JavaScript QuillJS-获取和设置内容

问题描述

曾经在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;
    }

这将给我类似这样的价值。 {“ ops”：[{“ insert”：“ Test \ n”}]}

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

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

到目前为止，我已经尝试过了，该操作是通过使用称为“内容”的数据属性在锚定标记单击上生成值的方法

            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

解决方法

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

asp.net c#c#javascript quill