完成编辑后如何关闭主轴编辑器

时间:2017-08-25 08:29:20

标签: javascript quill

我在DOM中元素的click事件上动态实例化QuillJS编辑器。所以我的要求是,一旦用户完成了对该元素的编辑,他/她应该能够关闭编辑器。目前,我没有在quill API中看到任何关闭方法。启用/禁用API方法对我来说不起作用,因为我想完全关闭编辑器并在看到主轴编辑器之前向用户显示他/她所拥有的相同视图,当然还有保存的更改。

这里的演示可以在这里看到 https://codepen.io/curiousdj/pen/eEjbPK

const options = { theme: "snow" };
var divs = document.getElementsByTagName("div");
var initializeQuill = function (e){
     if(!this.quill){
        console.log(e);
        this.target = event.currentTarget;
        this.quill = new Quill(this.target, options);
        this.target.children[0].onclick = function(et) { et.preventDefault(); };
        this.target.children[0].onblur = function(l) {
               l.target.parentElement.quill.close;
         };
        }
        this.quill.focus();
        e.stopPropagation();
        e.preventDefault();
}
for(var i = 0; i < divs.length; i++){
    divs[i].onclick = initializeQuill;
}

3 个答案:

答案 0 :(得分:1)

我建议:

  1. 复制quill实例的内容,销毁绑定实例的DOM元素,创建一个新的DOM元素并将内容粘贴回来
  2. 如您所尝试的那样,通过API使用禁用,但也禁用样式禁用的Quill实例,以区分Quill的格式和您自己的格式。
  3. 我已更新您的笔here以举例说明基本更改的第二个选项

    .ql-editor {
      padding:0;
      line-height:inherit;
    }
    
    .ql-editor p {
      margin-bottom:10px;
    }
    
    .ql-toolbar {
      display:none;
    }
    
    .ql-container.ql-snow {
      border:none;
      font-family:inherit;
      font-size:inherit;
    }
    

答案 1 :(得分:0)

您可以尝试在内容div上设置jsonResponse[i].Title

答案 2 :(得分:0)

为我工作:

function destory_editor(selector){
    if($(selector)[0])
    {
        var content = $(selector).find('.ql-editor').html();
        $(selector).html(content);

        $(selector).siblings('.ql-toolbar').remove();
        $(selector + " *[class*='ql-']").removeClass (function (index, css) {
           return (css.match (/(^|\s)ql-\S+/g) || []).join(' ');
        });

        $(selector + "[class*='ql-']").removeClass (function (index, css) {
           return (css.match (/(^|\s)ql-\S+/g) || []).join(' ');
        });
    }
    else
    {
        console.error('editor not exists');
    }
}

要使用它,只需致电:

destory_editor('.editor');