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

Question

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

当我们将 html 粘贴到编辑器中时，文本样式粘贴得很好，但是当我们包含图像时，图像的大小将设置为图像的自然高度/宽度，而不是我们的内联样式放。由于某种原因，奎尔的清洁工一定要删除这种样式。是否有一个参数可以传入，这样我们就可以避免这种“更干净”的情况，因为我们直接传入 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 粘贴到编辑器中后查看 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 或您正在使用的任何内容来设置它们。