javascript 如何在完成编辑后关闭Quill编辑器

iyr7buue 于 2022-12-28 发布在 Java

关注(0)|答案(4)|浏览(581)

我在DOM中的一个元素的单击事件上动态示例化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;
}

JavaScript

来源：https://stackoverflow.com/questions/45877323/how-to-close-the-quill-editor-when-done-with-editing

4条答案

按热度按时间

7fyelxc51#

我的建议是：
1.复制quill示例的内容，销毁该示例绑定到的DOM元素，创建一个新的DOM元素并将内容粘贴回
1.通过API使用disable，正如您已经尝试过的那样，但也可以对禁用的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;
}

赞(0）回复(0）举报 2022-12-28

6yoyoihd2#

我的工作是：

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');

赞(0）回复(0）举报 2022-12-28

o8x7eapl3#

您可以尝试在内容div上设置contenteditable="false"。

赞(0）回复(0）举报 2022-12-28

mwg9r5ms4#

在最新版本（可能还有以前的版本）中，ql-toolbar始终是quill编辑器的previousSibling。

document.getElementById("editor element id").previousSibling.remove();

这样做的好处是一次“处置”一个编辑器。

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 如何在完成编辑后关闭Quill编辑器

4条答案

相关问题

热门标签

最新问答