如何在编辑器外点击关闭CKEditor或tinyMCE？ [英] How can i close CKEditor or tinyMCE on a click outside of the editor?

问题描述

我有可以在页面上添加的文本小部件。点击应该激活div到wysiwyg编辑器。在编辑器之外的任何地方点击都应该将新内容写入div来销毁编辑器。

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.

准备好回调的文档：

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，我想抓住，如果鼠标是在编辑器或在小部件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.

这很好除了当我点击快速div

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

推荐答案

这里是如何从textarea中删除TinyMCE：

Here's how to remove TinyMCE from a textarea:

tinyMCE.execCommand（'mceRemoveControl'，false，'id'）;

您还可以使用mceAddControl或mceToggleEditor进行更多控制。 'id'是textarea上的id属性。

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

这应该正常工作，你正常的方式启动TinyMCE，不能更具体没有看到你的源代码！

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

这篇关于如何在编辑器外点击关闭CKEditor或tinyMCE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！