django - 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 的表单字段呈现为 atextarea而不是 a div，而 Quill 似乎无法在它上面工作：应用于文本的任何效果都不会在视觉上或在结果输出中注册，并且当我尝试编辑现有记录时，初始文本不会显示在编辑器中，即使它存在于标记之间的源 HTML 中textarea。

这是 Quill 无法解决的已知问题，textarea还是有其他问题？

Answer 1

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

第 1 步：
向您的文本区域添加一个类，例如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，将由 quill 编辑器实例使用。原始文本区域将被隐藏。

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

一个新的 Quill 实例被启动，

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

当其内容发生变化时，textarea 字段将得到更新。

Answer 2

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

有一个 Quill Form Submit示例。

Answer 3

简单的方法：

<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 4

将此添加到模块中以工作

['link']

这里工作完美。

Answer 5

尝试下面的代码来获取表单数据。

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link', 'blockquote', 'code-block', 'image'],
      [{ list: 'ordered' }, { list: 'bullet' }]
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});
var form = document.querySelector('form');
form.onsubmit = function() {
  // Populate hidden form on submit
  var about = document.querySelector('input[name=about]');
  about.value = JSON.stringify(quill.getContents());

  console.log("Submitted", $(form).serialize(), $(form).serializeArray());

alert('Open the console to see the submit data!')
  return false;
};