QuillJS不适用于textarea

Question

我正在尝试在Django 1.10模板中的特定表单字段上使用QuillJS，如下所示：

<link href="https://cdn.quilljs.com/1.1.3/quill.snow.css" rel="stylesheet">

<script src="https://cdn.quilljs.com/1.1.3/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#id_text', {
    theme: 'snow'
  });
</script>

问题在于Django渲染了我要使用Quill textarea而不是a 的form字段div，并且Quill似乎不起作用：应用于文本的任何效果在视觉上或结果输出中均未注册，并且当我尝试编辑现有记录时，即使textarea标签之间的源HTML中包含初始文本，编辑器中也不会显示初始文本。

是Quill无法使用的已知问题，textarea还是还有其他可能出错的问题？

Answer 1

最简单的方法：

<div id="quill_editor"></div>
<input type="hidden" id="quill_html" name="name"></input>

<script>
    var quill = new Quill('#quill_editor', {
            theme: 'snow'
    });
   quill.on('text-change', function(delta, oldDelta, source) {
        document.getElementById("quill_html").value = quill.root.innerHTML;
    });
</script>

Answer 2

以下示例适用于 jQuery，但可以轻松更改为在纯 javascript 中运行。

第 1 步：
向您的 textarea 添加一个类，例如quill-editor：

<textarea name="input" placeholder="Textarea" class="form-control quill-editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
</textarea>

第2步：

在 textarea 字段后添加此 javascript 代码：

$('.quill-editor').each(function(i, el) {
    var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
    var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
    el.addClass('d-none');
    el.parent().append(div);

    var quill = new Quill('#' + id, {
        modules: { toolbar: true },
        theme: 'snow'
    });
    quill.on('text-change', function() {
        el.html(quill.getContents());
    });
});

它将允许您添加任意数量的编辑器，并更新其相应的文本区域。不需要其他代码。

这个怎么运作：

$('.quill-editor').each(function(i, el) {
//...
});

对于它找到的每个 quill-editor 类，

var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
el.hide();
el.parent().append(div);

它将在 textarea 字段之后创建一个具有唯一 ID 和固定高度的 div，该 div 将由 quill 编辑器实例使用。原来的 textarea 将被隐藏。

var quill = new Quill('#' + id, {
    modules: { toolbar: true },
    theme: 'snow'
});

启动了一个新的 Quill 实例，

quill.on('text-change', function() {
    el.html(quill.getContents());
});

当它的内容发生变化时，textarea 字段将被更新。

Answer 3

您可以将 Quill 与 div 一起使用，并将编辑器的内容 ( Delta ) 与表单中的隐藏输入字段同步。

有一个 Quill表单提交示例。