QuillJS 不适用于文本区域

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 而不是 div，并且 Quill 似乎无法处理它：应用了任何效果文本不会在视觉上或结果输出中注册，并且当我尝试编辑现有记录时，初始文本不会显示在编辑器中，即使它存在于源 HTML 之间textarea 个标签。

Quill 无法与 textarea 一起使用是否是一个已知问题，或者是否存在其他可能出错的问题？

Answer 1

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

有一个 Quill Form Submit 示例。

Answer 2

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

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;
};

Answer 3

以下示例适用于 jQuery，但它可以很容易地更改为普通 javascript 中的运行。

第 1 步：
将 class 添加到您的文本区域，例如 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 class，

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 editor实例使用。原始文本区域将被隐藏。

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

启动了一个新的 Quill 实例，

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

当其内容更改时，textarea 字段将更新。

Answer 4

简单的方法：

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

将此添加到模块中以工作

['link']

这里运行良好。

QuillJS 不适用于文本区域

QuillJS doesn't work with textarea

django

django-templates

quill