javascript - 如何为 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 属性的值，以便可以选择它们以应用所需的样式。

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

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

This is a simple test.

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

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

选择此文本的一部分并使用/应用 alignment format to，例如居中，会导致一个类被应用到段落中，结果如下:

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

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

Compared to what you said, the idea is not to add the content to a container, but to add a CSS class capable of organizing the content.

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

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

作为帮助，复制对齐代码，但将其更改为所需的类。有关这方面的更多信息，请访问以下链接:

• > Creating a custom class attributer in QuillJS
• > Using Quill.js To Build A WYSIWYG Editor For YourWebsite
• > Example for custom class attributor

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

• > Quill-Examples-and-FAQ
• > Quill GitHub - Parchment
• > Cloning Medium withParchment