Question

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

保存数据不是一个问题，因为非常简单：）

我有点卡在两点上

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

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

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

回到主播编辑器以及如何解析输出以创建页面？

提前感谢您的回复！

Answer 1

使用setContents插入delta：

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将是您的主播实例。

感谢LINK

Answer 3

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

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 4

我是为使用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 5

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

setContents（从Quill中将编辑器设置为Delta）。

String.raw以避免将'\t'扩展到' '。（另请参见JSON.parse throws error when parsing...）

Answer 6

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

如果直接使用HTML，请使用 dangerouslyPasteHTML ，如下所示：

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

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

Answer 7

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

原来是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);

如何将现有数据读入Quill JS

7 个答案: