如何定义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”中，用户也应该能够使用相同的工具栏，但是插入嵌入应该被禁用。
• 当您从外部删除embed时，“regular_quill_stuff_in”内容应该移动到“正则_quill_”。

我试着做一些基于块，代码和滚动的定制污点，但我不能真正理解如何使它工作，许多低水平的东西没有很好的记录。然后，我尝试在dom节点上创建Quill的另一个实例，但是它非常错误，因为主quill是从内部接收事件的。我能够修复它的自动启用/禁用基于用户聚焦div的Quills，但它仍然是错误的，更不用说传递信息之间的两个Quills和编辑历史和三角洲是非常不可靠的。

当然，一定有办法让事情变得更容易。

Answer 1

页面上的HTML元素的样式和组织是使用CSS样式表完成的。基本上，元素获取它们的类和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编辑器
• 自定义类属性示例

若要了解如何通过blots定义新格式，请参阅下列链接：

• 例句与常见问题
• 毛刺GitHub -羊皮纸
• 带羊皮纸的克隆培养基