JavaScript QuillJS - 获取和设置内容

Question

浏览 SO 有一段时间了，试图找到解决我问题的方法，但找不到有效的方法。

我正在使用 Quill 编辑器为我的站点提供一些富文本功能。有一些很好的文档可用，但我无法正确使用它。

比如。我有一个 ID 为 'Editor' 的 div，它变成了一个 Quil 实例。有一个调用函数 OnClick

的按钮

    function GetEditorContents() {
        var quill = new Quill('#Editor');
        MyContent = JSON.stringify(quill.getContents());

        // Pass the Quill Delta to a HiddenField value that I can then retreive on Code Behind. 
        var HiddenFieldContent = document.getElementById('<%= HFContent.ClientID%>');
        HiddenFieldContent.value = MyContent;
    }

这将给我这样的值。 {“操作”：[{“插入”：“Test\n”}]}

据我所知，它添加了“ops”和“insert”，然后我写的是“Test”，它甚至在末尾为我添加了一个新行。我可以毫无问题地将其保存到我的数据库中。

我现在遇到的问题是，当我返回此页面并从数据库中读取时，如果有可用内容，我希望将其重新加载到 Quill 编辑器中。这个还有另一个 Quill 函数 (SetContents)，这就是我正在努力解决的问题。

到目前为止我已经尝试过这个，其中使用名为 'content'

的数据属性在锚标记点击上生成值

            var quill = new Quill('#Editor');
            var MyContent = $(e.relatedTarget).data('content');
            quill.setContents(MyContent);

但这不起作用。在我的文本编辑器中，我只得到 JSON 数据字符串的第一部分，即“{”。

我试过 JSON.parse(MyContent) 但这会产生错误。

Uncaught SyntaxError: Unexpected token u in JSON at position 0

如果我从数据库中操作我的字符串（基本上删除大部分 JSON 数据结构）并使用另一种插入数据的方法，它工作正常。但这不是我想要的预期行为，特别是因为 Quill 表示它有一个非常好的 API。一定是我遗漏了什么？

quill.setContents([
    { insert: $(e.relatedTarget).data('content') },
    { insert: '\n' }
]);

供参考，这里是他们的参考。 https://quilljs.com/docs/api

Answer 1

在测试了更多东西并为此花费了太多时间之后，我决定回到基础并检查呈现页面上的一些标记。事实证明，我在 data-attribute 中使用了 double-quote。例如 data-country="Austria"，我需要简单地使用单引号。例如 data-country='Austria'。这意味着我可以将整个 Delta 字符串加载到我的属性中。

JavaScript QuillJS - 获取和设置内容

JavaScript QuillJS - Get and Set of Contents

javascript

c#

asp.net

quill