bergie / hallo

Simple rich text editor (contentEditable) for jQuery UI

Home Page:http://hallojs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Toolbar breaks out of its containing element

DanielSmedegaardBuus opened this issue · comments

Hi :)

I'm trying to use the Hallo editor on a page that's embedded in an iframe. By default, the toolbar will always position itself beneath and to the right the current selection, which makes it disappear out of the iframe's viewport when editing text which is to the far right and/or bottom of the page.

On a non-iframed page, when editing something that's to the far right, the toolbar will start to collapse on itself, which isn't pretty, but much preferable to the disappearance when in an iframe.

Missing documentation on which option are available and where to put them, I'm trying to search through the source code to find possible options to fix this. I found "positionAbove" and "parentElement" which both seem like they're something I could use, especially parentElement, which I assume is supposed to make the toolbar adhere to the dimensions of something other than the current window, but it doesn't do so. Neither of these options do anything.

"parentElement" works for me if you set toolbar: 'halloToolbarFixed', e.g.

$('#editable_div').hallo({
    plugins: {
        'halloformat': {},
    },
    toolbar: 'halloToolbarFixed',
    parentElement: $('#editable_toolbar_div')
});

@SWW13 yep, that is the right solution when running inside IFRAME. You can see an example with Hallo running with Create in an IFRAME at http://bergie.iki.fi/talks/2013/jquery-europe/#12.0