如何在 QuillJS/Rich-Text 增量中分配宽度和高度属性

Question

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

当我们将 html 粘贴到编辑器中时，文本样式粘贴得很好，但是当我们包含图像时，图像的大小被设置为图像的自然 height/width而不是我们设置的内联样式。出于某种原因，Quill 的清洁工必须去除这种造型。是否有一个参数可以传入，这样我们就可以避免这个 "cleaner" 因为我们直接传入 html?

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

<p class="ql-align-center"><strong class="ql-size-huge" style="color: rgb(255, 255, 255);">&nbsp;0 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 标签没有任何这些样式。有什么想法吗？

我尝试添加一个匹配器，它将以某种方式解释图像标签，但无论我做什么，我都无法让 width/height 坚持：

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 增量中分配宽度和高度属性

How to assign width and height attr's in QuillJS/Rich-Text deltas

html

javascript

rich-text-editor

quill