如何使用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>
注意:
我曾尝试根据Block,Code和Scroll制作一些自定义污点,但我真的不太了解如何使其工作,而且很多低级内容也没有得到很好的记录。然后,我尝试在dom节点上创建另一个Quill实例,但是由于主要的羽毛笔正在从内部接收事件,因此这是非常麻烦的。我能够基于用户关注的div通过自动启用/禁用笔芯来修复它,但是它仍然是错误的,更不用说在两个笔芯之间传递信息了,并且编辑历史记录和增量非常不一致。
肯定有一种使它变得更容易的方法。
使用CSS样式表完成页面上HTML元素的样式和组织。基本上,元素会为其类和id属性获取值,以便可以选择它们以应用所需的样式。
使用任何WYSIWYG富文本编辑器都可以完成相同的过程。编辑器工具栏上的按钮不仅负责添加新内容,还负责更改已经存在的内容。对于某些人来说,这涉及到将类更改或应用于所需的代码段。
我们可以使用对齐格式在Quill中看到这种情况。如果您在Quill中写以下行:
This is a simple test.
因此,编辑器中将具有以下HTML标记:
<p>This is a simple test.</p>
[选择本文的一部分,并在中间使用/应用alignment format,将导致对该类应用一个类,其结果如下:
<p class="ql-align-center">This is a simple test.</p>
这是什么意思?这意味着您可以定义自己的格式来应用类,这些类负责按照您想要的方式安排Quill内容的布局。
与您所说的相比,此想法不是将内容添加到容器,但添加了一个能够组织内容的CSS类。
您可以选择应用归因或为其定义新元素。但是这种过程需要测试和更多测试。我不确定您要如何组织事物或要添加哪些功能。因此,为使其正确实施,您将需要测试作为编辑器内容出现的不同HTML元素的格式和样式。
我建议您从简单的内容开始,例如文本,段落。尝试创建可将类应用于段落的属性。如果可以,请尝试其他操作,例如图像,视频和嵌入元素。您会发现各种各样的结果,这表明您必须进行测试,直到找到所需的结果。
作为帮助,请复制对齐代码,但将其更改为所需的类。可以在以下链接中找到关于此的更多信息:
要了解如何通过印迹定义新格式,请参见以下链接:
希望这可以帮助您获得所需的结果。如果您仍然需要帮助,请发表评论。我会尽快(如果我知道的话)一定会回答您,好吗?祝你好运。