Search code examples
aloha-editor

Aloha Toolbar, add widgets which don't cause Text selection los

Aloha adds mousedown, blur, ... handlers to the document body, to recognice when the the Toolbar is shown/ hidden and the document selection should be changed. Now I have a plugin (a ColorPicker), which appends itself to document body. So when I click the the element aloha recognizes that no editable element is selected and hides the toolbar.

I found two ways to prevent this and both look like really dirty hacks.

  1. Catching the mousedown handlers and not promote them to document body.

    This is bad, since the plugin requires this click handlers too.

  2. Add the class 'aloha-dialog' to editor

    Aloha seems to treat elements which have this class differently. However this seems to break some intern functionality, if it is not hidden correctly.

So did I miss some functionality, or is this not handled by a standard functionality yet?

BR, Stefan

Solution

  • Aloha uses Surface.trackRange on the toolbar, so that clicks in the toolbar (which is outside the editable) don't hide it.

    For example:

    Aloha.require(['aloha/jquery', 'ui/surface'], function ($, Surface) {
     Surface.trackRange($('#color-picker'));
});