javascript - 完成编辑后如何关闭羽毛笔编辑器

Question

我在 DOM 中元素的单击事件上动态实例化 QuillJS 编辑器。所以我的要求是，一旦用户完成对该元素的编辑，他/她应该能够关闭编辑器。目前，我在 quill API 中没有看到任何关闭方法。启用/禁用 API 方法对我不起作用，因为我想完全关闭编辑器并向用户显示他/她在看到 quill 编辑器之前的相同 View ，但当然包含已保存的更改。

这个的演示可以在这里看到
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;
}

Answer 1

我会建议:

1. 复制 quill 实例的内容，销毁该实例绑定(bind)的 DOM 元素，创建一个新的 DOM 元素并将内容粘贴回
2. 通过 API 使用禁用，就像您已经尝试过的那样，但也为禁用的 Quill 实例设置样式，以不显示 Quill 的格式与您自己的格式之间的任何区别。

我已经更新了你的笔 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;
}