Question

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

当我们将html粘贴到编辑器中时，文本样式粘贴得很好，但是当我们包含图像时，图像的大小被设置为图像的自然高度/宽度，而不是我们所拥有的内联样式组。出于某种原因，Quill的清洁工必须删除这种造型。是否有传入的参数，以便我们可以避免这个＆＃34;更清洁＆＃34;既然我们直接传递了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;
        });

Answer 1

如果你有完整的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或其他任何设置来设置它们。

如何在QuillJS / Rich-Text增量中指定宽度和高度attr

1 个答案: