我如何定义羽毛笔内容的布局?

问题描述 投票:1回答:1

如何使用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实例,但是由于主要的羽毛笔正在从内部接收事件,因此这是非常麻烦的。我能够基于用户关注的div通过自动启用/禁用笔芯来修复它,但是它仍然是错误的,更不用说在两个笔芯之间传递信息了,并且编辑历史记录和增量非常不一致。

肯定有一种使它变得更容易的方法。

javascript text wysiwyg quill
1个回答
0
投票

使用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元素的格式和样式。

我建议您从简单的内容开始,例如文本,段落。尝试创建可将类应用于段落的属性。如果可以,请尝试其他操作,例如图像,视频和嵌入元素。您会发现各种各样的结果,这表明您必须进行测试,直到找到所需的结果。

作为帮助,请复制对齐代码,但将其更改为所需的类。可以在以下链接中找到关于此的更多信息:

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

希望这可以帮助您获得所需的结果。如果您仍然需要帮助,请发表评论。我会尽快(如果我知道的话)一定会回答您,好吗?祝你好运。

© www.soinside.com 2019 - 2024. All rights reserved.