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：
向您的文本区域添加一个类，例如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步：

在文本区域之后的任意位置添加此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) {
//...
});

对于找到的每个羽毛笔编辑器类，

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字段之后创建一个div，该div具有唯一的ID和固定的高度，将由纤管编辑器实例使用。原始文本区域将被隐藏。

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不与textarea合作

5 个答案: