CODEWITHSUNDEEP
htmlaloha-editor
jumpfightgo
jumpfightgo

Reputation: 196

How can I fix the Aloha HTML5 Editor to a specific position on the page?

I need the Aloha editor to be pinned to a specific position instead of bouncing around all over the page.

Is there a configuration option for that? There is an "append" option for configuring Aloha but I can't figure out how to apply or even if it would solve my problem...

Also open to hacks for overriding the position if there isn't a configuration option.

Upvotes: 6

Views: 842

Answers (3)

Jake Steele
Jake Steele

Reputation: 497

var toolbar = $('.aloha-toolbar');
// make the toolbar extend to 100% of the div.
toolbar.css({'width': '100%', 'height': '100%', });
// ADDS THE ALOHA EDITOR TO A DIV! 
$('#alohaContainer').append(toolbar);
// Renders the toolbar to the screen             
UiPlugin.showToolbar();
// The child element must also be resized, don't know why
toolbar.children().css({'width': '100%', 'height': '100%'});

Upvotes: 0

jumpfightgo
jumpfightgo

Reputation: 196

Response to my bug report:

This setting was added to the dev branch (but has not found it's way to the release branch so far) and the description for it in the guides was already added to the release branch.

https://github.com/alohaeditor/Aloha-Editor/issues/584#issuecomment-6870029

Upvotes: 2

Inshallah
Inshallah

Reputation: 4814

The configuration indicates that you use an the "element" setting to specify the id of the element to append to:

behaviour: 'float', // 'float' (default), 'topalign', 'append'
element: 'my-html-element-id', // use with 'append' behaviour option: HTML DOM ID of the element the FM should get the position from

Also, make use of the other options like draggable: false and pin: false.

If that doesn't work for you, please open a bugreport.

Upvotes: 3

Related Questions