jquery 检测内部变化 div 获取 html 并设置为输入值

Question

我正在使用 Quilljs 作为富文本编辑器。

$(document).ready(function () {
    //get content of quillEdit and insert into hidden input field.
    $(".ql-editor").on('change', function() {
        var content = $(this).html();
        $("#QuillEdit").val(content);
        console.log(content);
    });
});
<form>
   <input type="text" name="quillEdit" id="QuillEdit" class="hidden-input" value="" />
</form>
<div id="quillEditor">
    <div id="toolbar"></div>
</div>

在上面，quill 在#quillEditor 中创建了编辑器。在那里，它创建了一个 div 和 class 的 ql-editor.

在 div 中创建了所有内容（p 标签等）。

我正在尝试，每当 ql-editor 内部发生变化时，我想将 html 转储到我的输入 "QuillEdit" 作为它的值..

但绝对没有任何事情发生...

到目前为止一直对此一片空白。知道如何让它工作吗？

Answer 1

找到解决方案，quilljs 有一个 textchange 事件，我可以检查一下。

所以我的解决方案如下所示：

quill.on('text-change', function (delta, oldDelta, source) {
    var content = $(".ql-editor").html();
    $("#QuillEdit").val(content);
});

jquery 检测内部变化 div 获取 html 并设置为输入值

jquery detect change inside div get the html and set to value of input

jquery

quill