CKEditor无法删除工具栏，直到我单击它

我目前正在使用 CKEditor，当我单击离开时，我在删除工具栏时遇到了一些问题。目前，我想在用户单击CKEditor实例时动态创建它。

但是，当我尝试单击而不单击工具栏时，就会出现问题。当我尝试单击工具栏时，它会停留在那里，它不会运行我的任何 onBlur 代码。只有当我单击工具栏上的按钮或单击离开，然后单击返回文本区域时，它才会删除工具栏并运行我的onBlur代码。

下面是我编写的一小段代码，用于在单击时创建实例。我在这里做错了什么还是错过了一段焦点代码？

    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src="ckeditorckeditor.js"></script>
            <script>
            $(document).ready(function(){
                CKEDITOR.disableAutoInline = true;
                $("#abc").on('click', function(){
                    var ck = CKEDITOR.inline(CKEDITOR.document.getById('abc'));
                });
            });
            </script>
        </head>
        <body>
            <div id="abc" contenteditable="true" >
                Edit this
            </div>
        </body>
    </html>

尝试在单击时删除 jquery，并简单地允许 ckeditor 处理它

$(document).ready(function () {
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline('abc');
 });

或

var abcEditor = CKEDITOR.inline('abc');

因此，

我没有在单击时进行，而是这样做，以便在页面加载时它将找到所有内容可编辑区域并创建 ckeditor 实例。

最初我想在单击时使用来动态创建实例，因为我将动态填充内容。但是，我发现在创建动态内容时创建 ckeditor 实例更容易。

使用此函数，我可以在创建动态内容时创建新的 ckeditor 实例，还可以使用 onblur 函数将所有内容写入我的数据库。

如果有人有任何解决方案可以从ckediter获取原始html，请告诉我。此方法必须获取父元素，然后找到元素然后保存它，这对我来说听起来不对。因此，如果您对如何做到这一点有任何建议，我都敞开心扉！谢谢！

        if(CKEDITOR.instances[this.id] == undefined){
            console.log("creating new instance");
            var ck = CKEDITOR.inline(CKEDITOR.document.getById(  this.id ));
            ck.on('blur', function(e){
                var id = e.editor.name;
                var html = $("#"+id).parent()[0].outerHTML;
                console.log(html);
                $.ajax({
                    type: 'POST',
                    url: "saveHtml",
                    data: { content : html}
                }).done(function(data) {
                    console.log(data);
                    console.log("finished sending data");
                });
            });
        }else{
            console.log("no instance created");
        }

相关内容

最新更新

热门标签：