Javascript 如何将现有数据读入Quill JS

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

保存数据不是问题，因为这很简单：）

我在两点上有点困惑

如何编辑纬管中保存的数据

如何解析保存的数据以创建静态页面

有人能给我们提供一些关于如何装载三角洲的建议吗

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

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

提前感谢您的回复

用于插入增量：

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

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

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

---

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

因此我设法找到了解决方法，不确定它是否是正确的方法，但它确实有效

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

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

HTML格式：

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

• 创建编辑器（以下示例适用于只读版本）
• 找到目标（要显示文本的位置）
• 解析字符串内容
• 给你的编辑

---

---

这对我有用。愿它能帮助一些人

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.root.innerHTML=“这将是我们将在编辑器中显示的文本，并带有预格式化。“；

这里的

editor

将是您的羽毛笔实例

---

多亏了这个

我为使用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 : ''  !!} ';

如果最后您想使用is作为html，您可以像这样在模板中加载它：

{!! $description !!}

我希望对某人有用

// 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());

从羽毛笔到将编辑器设置为三角形

---

避免将

'\t'

扩展为

'

。（另请参见）

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

如果您直接使用HTML，请按如下方式使用：

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

quill.clipboard.危险的粘贴HTML（这里有一些很棒的文本”；

---

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

感谢您的回复。因此，我在使用setContents API之前尝试过这个方法，但它只输出文本字符串“{”ops:[{”insert:“这是文本的测试位\n“}]}”，并且没有创建表单。上面的代码笔链接向您展示了setContents的实时演示。你说的形式是指文本编辑器？回答得好。。感谢这不是一个很好的问题答案，如果您接受来自用户输入的HTML，这也不是一个很好的实践。使用增量来防止攻击。

// 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.clipboard.dangerouslyPasteHTML("<p>here is some <strong>awesome</strong> text</p>");