1

我们使用的是 QuillJS 1.0 Beta。我们有文本编辑器，用户最初创建内容。当他们单击提交时，它会.innerHTML()从编辑器中提取并将其保存到我们的数据库中。然后，如果用户想要编辑该内容，我们从数据库中提取 html 并使用.pasteHTML()来自 Quill 的 API 将其粘贴到编辑器中。

当我们将 html 粘贴到编辑器中时，文本样式粘贴得很好，但是当我们包含图像时，图像的大小被设置为图像的自然高度/宽度，而不是我们设置的内联样式。出于某种原因，Quill 的清洁工必须删除这种样式。是否有要传递的参数，以便我们可以避免这种“更清洁”，因为我们传递的是直接的 html？

以下是来自数据库的一些 html 字符串，如下所示：

<p class="ql-align-center"><strong class="ql-size-huge" style="color: rgb(255, 255, 255);">&nbsp;$450 Referral Bonus</strong></p><p class="ql-align-center"><strong class="ql-size-small" style="color: rgb(186, 35, 35);">Phone a friend!</strong></p><p class="ql-align-center"><img width="145" height="140" style="width: 145px; height: 140px;" src="data:image/png;base64,iVBORw0KG

如您所见，样式就在那里。当我在 Quill 粘贴到编辑器后查看 DOM 时，img 标签没有任何这些样式。任何想法？

我试图添加一个匹配器，它会以某种方式解释图像标签，但无论我做什么，我都无法获得要粘贴的宽度/高度：

quill.editor.clipboard.addMatcher('IMG', function(node, delta) {
            let imgWidth = node.width;
            let imgHeight = node.height;
            var delta2 = new Delta([{
                insert: { image: node.src },
                attributes: {
                    width: imgWidth,
                    height: imgHeight
                }
            }]);

            return delta2;
        });
4

1 回答 1

0

如果您在图像、段落标签等上有带有内联样式的完整 HTML 字符串，您只需将quill.container.firstChild.innerHTML属性设置为 html 字符串，它就会将其与样式一起粘贴给您。这完全绕过了addMatcher方法和pasteHTML()方法。

就我而言，我从我们的数据库中获取 HTML 字符串并将该属性设置为它：

this._httpClient.fetch('/ApiUrl')
            .then(response => response.json())
            .then(resp => {
                this.obj.editor.container.firstChild.innerHTML = resp.ExecutiveControlHtmlResult;
            });

我将我的 Quill 实例保存在一个名为的变量中，editor但是您应该能够通过 jquery 或您正在使用的任何东西来设置这些。

于 2016-08-10T18:24:36.547 回答