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.

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.

• javascript
• tinymce
• ckeditor
• wysiwyg

• Hello, what is so hard to post your (relevant) html source code? This action makes it easier to help. Note: An idividual problem needs always an individual soloution. – Reporter Commented May 26, 2011 at 9:33
• Hi. I though it wasn't necessary to post the whole html code. The rest doesn't change it's only this part that troubles me. I thought it would be more cleaner to point it out this way so that one wouldn't have to go through all the other code that's not particularly related to this problem. The divs in the example can be anywhere in the page. Later on they will be added dynamically. I'm just using this div on an empty page to test the editor behavior. – Keeper Hood Commented May 26, 2011 at 11:56

3 Answers 3

This is the code you would need to place on a button onclick action to close CKEditor

CKEDITOR.instances.editor1.destroy();

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!

CKEditor seems to provide an API to "stopPropagation"

So my solution would be to put an onclick event on the body, but stop propagation of the click event on the editor.

e.g.

var element = CKEDITOR.document.getById( 'myElement' );
element.on( 'click', function( ev )
{
    // The DOM event object is passed by the "data" property.
    var domEvent = ev.data;
    // Prevent the click to chave any effect in the element.
    domEvent.stopPropagation();
});

and the body event will be something like this (well, not exactly, but just to illustrate)

$("body").click(function(event){
    element.destroy();
});

see here