Question

I have text widgets that can be added on the page. A click should activate the div into a wysiwyg editor. A click anywhere outside of the editor should destroy the editor with the new content written to the div.

in the document on ready callback :

var ckeditorConfig = {
                    toolbar :
                        [
                            [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                            [ 'Font', 'FontSize']
                        ],
                    toolbarCanCollapse : false,
                    toolbarLocation  : 'top',
                    resize_enabled : false,
                    removePlugins : 'maximize,resize',
                };

    window.ckeditorHover = false;

    $('.we-widget-wrapper').hover(
        function(){
            window.ckeditorHover = true;
        },
        function(){
            window.ckeditorHover = false;
        }
    );

    $('.we-widget-textbox')
        .click(function(e){
            e.stopPropagation();
            var id = "" + $(this).attr('id');
            if (CKEDITOR.currentInstance){
                CKEDITOR.currentInstance.destroy();
            }

            CKEDITOR.replace(id, ckeditorConfig);                   
        });

    $('html')
        .click(function(e){
            if(!window.ckeditorHover){
                if (CKEDITOR.currentInstance){
                    CKEDITOR.currentInstance.destroy();
                }
            }
        });

The html part:

<div class='we-widget-wrapper'>
     <div id='textbox01' class='we-widget-textbox we-widget'>
         <p>Some text here...</p>
     </div>
</div>

I’ve wrapped both in the we-widget-wrapper class because CKEditor temporarely hides my div and below it appends it’s own div and i want to catch if the mouse is over the editor or over the widget div.

This works fine except when i click fast on the div the immediately outside of it both the editor and the div disappear.

Answer 1

Here’s how to remove TinyMCE from a textarea:

tinyMCE.execCommand('mceRemoveControl', false, 'id');

You can also have ‘mceAddControl’ or ‘mceToggleEditor’ for more control. ‘id’ is the id attribute on the textarea.

This should work pending you’ve initiated TinyMCE in the normal ways, can’t be more specific without seeing your source code!