javascriptsceditor

SCEditor: Dropdown is out of place

When I create the sceditor like in the example, the dropdowns that appear when clicking on the font icon appears in its normal place.

        var textarea = document.getElementById('example');
        sceditor.create(textarea, {
            format: 'bbcode',
            icons: 'monocons',
            autofocus: true,
            style: '../minified/themes/content/default.min.css'
        });

However, once I specify my own toolbar, the dropdown is moved off screen and I have to scroll down for ages to find it.

        var textarea = document.getElementById('example');
        sceditor.create(textarea, {
            format: 'bbcode',
            icons: 'monocons',
            autofocus: true,
            style: '../minified/themes/content/default.min.css',
            toolbarContainer: document.getElementById('toolbar')
        });

Any way to correct the positioning while having a custom toolbar?

Solution

  • Custom toolbars are outside the sceditor container, which has a relative position. According to https://stackoverflow.com/a/14107783/4710434

    By definition offsetTop returns the top position of the object relative to the top side of its offsetParent element, in pixels.

    Now offsetParent needs to be an element with a position other than static. If you change the position attribute of scroll element in your fiddle I get a value of 1012 as opposed to 1110 without the position attribute.

    Therefore, remove the relatie position specifier for .sceditor-container` from the CSS file.

    Now, the dropdown is relative to the doucment's body, and must be moved. Fortunately, editor.createDropDown() can be overridden via a simple plugin

    sceditor.plugins.fix = function ()
{
    let editor;

    this.init = function ()
    {
        editor = this;
        const fn = editor.createDropDown;
        this.createDropDown = function (menuItem, name, content) {
            fn(menuItem, name, content);
            document.body.appendChild(document.querySelector('.sceditor-dropdown'));
        };
    };
};