javascript - 如何将现有数据读入 Quill JS

Question

我真的很难理解如何使用羽毛笔......

保存数据不是问题，因为这非常简单:)

我有点卡在两点上

1. 如何在quill中编辑保存的数据
2. 如何解析保存的数据以创建静态页面

任何人都可以提供任何建议如何加载增量

{"ops":[{"insert":"this is a test bit of text\n"}]}

回到羽毛笔编辑器以及如何解析输出以创建页面？

提前感谢您的任何回复！

Answer 1

使用setContents插入一个增量：

quill.setContents({
    "ops":[
        {"insert":"this is a test bit of text\n"}
    ]
});

http://codepen.io/anon/pen/VKWZLd

您可以通过以下方式访问原始 HTML：

var html = document.querySelector(".ql-editor").innerHTML

如果您使用的是原始 HTML，则需要在使用之前对其进行清理。

Answer 2

这对我有用。愿它对某人有所帮助。

editor.root.innerHTML = "<p><strong class=\"ql-size-large\"><em><s><u>This would be the text that we are going to show in the editor with pre-formatting.<\/u><\/s><\/em><\/strong><\/p>";

这editor将是您的 quill 实例。

感谢这个链接

Answer 3

我是为使用 Laravel 的人写的。我是这样做的：

要存储，在提交我的表单之前：

        form.submit(function(){
            var description = document.querySelector('input[name=description]');
            description.value = editor.root.innerHTML;                
        })

要编辑我的表单，我会加载内容：

         var editor = new Quill('#quill-editor', {
            modules: {
                toolbar: toolbarOptions
            },
            placeholder: 'type something',
            theme: 'snow'
        });
        .root.innerHTML = '{!! !empty($quill_editor) ? $quill_editor : ''  !!} ';

如果最后你想使用 html，你可以像这样在你的模板中加载它：

{!! $description !!}

我希望对某人有用

Answer 4

• 创建编辑器（以下示例为只读版本）
• 找到您的目标（您希望显示文本的位置）
• 解析你的字符串内容
• 为您的编辑器设置内容

---

var quill = new Quill('#editor-container', { modules: { toolbar: [] }, readOnly: true, theme: 'bubble'} );
var $target = $('#editor-container');
var $content = JSON.parse($target[0].innerText);
quill.setContents($content);

Answer 5

Quill 通过自己的方法解析内容。

如果您直接使用 HTML，请使用危险的PasteHTML，如下所示：

quill.clipboard.dangerouslyPasteHTML("<p>here is some <strong>awesome</strong> text</p>");

这将通过自己的方法清理 HTML 并加载 HTML。

Answer 6

我正在设置root.innerHTML，但它弄乱了实际的 HTML，该pasteHTML方法似乎工作正常，如下所示：

quill.pasteHTML(YOUR_HTML_HERE, 'silent');

我还有一个代码编辑器，并使用以下方法：

let delta = quill.editor.getDelta();
delta.insert(VALUE_HERE, { 'code-block': true });
quill.updateContents(delta, 'silent');

您可能还需要在使用上述方法之前清除您的内容getDelta，如下所示：

quill.setContents([
  { insert: '\n', attributes: { 'code-block': true } }
], 'silent');

我使用silent了Source，因此不会在我自己的绑定事件侦听器上触发此更改。

Answer 7

// parse String
let stringToParse = String.raw`{"ops":[{"insert":"this is a test bit of text\n"}]}`;
// set quill editor instance to Delta state.
quill.setContents(JSON.parse());

来自 Quill 的setContents将编辑器设置为 Delta。

String.raw以避免扩展'\t'为' '. （另见JSON.parse 在解析时抛出错误......）

Answer 8

所以我设法找到了一个解决方法，不确定它是否是正确的方法，但它有效。

原来是 javascript 转义了传递给它的数据。

本质上，当表单无法提交错误数据时，会将错误数据添加回隐藏的输入字段，然后 javascript 从那里读取它......

HTML 表单：

<input name="post" id="post" type="hidden" data-post-id="{{ old('post') }}">

Javascript：

var postId = $('#post').data("post-id");
quill.setContents(postId);