如何为 Quill 内容定义布局？

Question

如何使用 Quill 在编辑器中创建编辑器？ 想象一个场景：有一些带格式的文本，然后有一个嵌入（图像/视频/...），右边有一些带格式的文本。 然后又是一些文字。 所以 HTML 看起来像：

<editor>
<regular_quill_stuff></regular_quill_stuff>
<customEmbed> // some CSS flex here
    <container contenteditable="false"><image></image></container>
    <container><regular_quill_stuff_in></regular_quill_stuff_in></container>
</customEmbed>
<regular_quill_stuff></regular_quill_stuff>
</editor>

笔记：

• 在 'regular_quill_stuff_in' 中，用户也应该能够使用相同的工具栏，但应该禁用插入嵌入。
• 当您从外部移除嵌入污点时，“regular_quill_stuff_in”内容应移至“regular_quill_stuff”。

我尝试过基于 Block、Code 和 Scroll 制作一些自定义印迹，但我真的不明白如何使它工作，而且许多低级的东西没有很好地记录。 然后我尝试在 dom 节点上创建另一个 Quill 实例，但由于主 quill 正在从 . 我能够通过基于用户聚焦 div 的自动启用/禁用 Quills 来修复它，但它仍然有问题，更不用说在两个 Quills 之间传递信息并且编辑历史和增量非常不协调。

当然，必须有一种方法可以使它更容易。

Answer 1

页面上的 HTML 元素的样式和组织是使用 CSS 样式表完成的。 基本上，元素获取其 class 和 id 属性的值，以便可以选择它们以应用所需的样式。

任何 WYSIWYG 富文本编辑器都可以完成相同的过程。 编辑器工具栏上的按钮不仅负责添加新内容，还负责更改已存在的内容。 对于某些人来说，这涉及将类更改或应用到所需的代码段。

我们可以使用对齐格式在 Quill 中看到这种情况。 如果您在 Quill 中编写以下行：

This is a simple test.

因此，您将在编辑器中拥有以下 HTML 标记：

<p>This is a simple test.</p>

选择此文本的一部分并使用/应用 对齐格式，例如居中，将导致将类应用于该段落，结果如下：

<p class="ql-align-center">This is a simple test.</p>

那么这是什么意思？ 这意味着您可以定义自己的格式来应用负责按照您想要的方式安排 Quill 内容布局的类。

和你说的相比，这个想法不是将内容添加到容器中，而是添加一个能够组织内容的CSS类。

您可以选择应用属性，或为其定义新元素。 但是这种过程需要测试和更多的测试。 我不确定您想如何组织事物，或者您想添加哪些功能。 因此，为了正确实现这一点，您需要测试作为编辑器内容的不同 HTML 元素的格式和样式。

我建议你从简单的东西开始，比如文本，一个段落。 尝试创建一个可以将类应用于段落的属性。 当您可以这样做时，请尝试其他内容，例如图像、视频、嵌入元素。 你会发现不同的结果，这表明你必须不断测试，直到找到想要的结果。

作为帮助，复制对齐代码，但将其更改为所需的类。 可以在以下链接中找到有关这方面的更多信息：

• 在 QuillJS 中创建自定义类属性
• 使用 Quill.js 为您的网站构建 WYSIWYG 编辑器
• 自定义类属性示例

要了解如何通过印迹定义新格式，请参阅以下链接：

• Quill 示例和常见问题解答
• Quill GitHub - 羊皮纸
• 用羊皮纸克隆培养基