Question

我有可以在页面上添加的文本小部件。单击应该将div激活为所见即所得的编辑器。单击编辑器外部的任何位置都应该使用写入div的新内容来销毁编辑器。

在准备回调的文件中：

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();
                }
            }
        });

html部分：


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

我把它们都包装在we-widget-wrapper类中，因为CKEditor临时隐藏了我的div而下面它附加了它自己的div，我想抓住鼠标是在编辑器上还是在widget div上。

这很好用，除非我快速点击它上面的div，编辑器和div都会消失。

Answer 1

这是您需要在按钮上单击代码来关闭CKEditor

的代码

CKEDITOR.instances.editor1.destroy();

Answer 2

以下是如何从textarea中删除TinyMCE：

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

您还可以使用'mceAddControl'或'mceToggleEditor'来获得更多控制权。 'id'是textarea上的id属性。

除非您以正常方式启动TinyMCE，否则这应该有效，如果没有看到您的源代码，则无法更具体！

Answer 3

CKEditor似乎为“stopPropagation”提供了一个API

所以我的解决方案是在主体上放置onclick事件，但停止在编辑器上传播click事件。

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();
});

并且身体事件将是这样的（好吧，不完全，但只是为了说明）

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

请参阅here

如何在编辑器外点击关闭CKEditor或tinyMCE？

3 个答案: