覆盖Quill.js优化过程，以实现分别具有两个相应的标记未加入 我尝试过的事情：相关信息：可能的相关信息：

编程问答 2022-07-13

问题描述

你好

我迫切需要在quill Rich Text编辑器中将两个相应的标签彼此相邻，如下所示：

<p>Dummy: <em>One italic format,</em><em> and another italic format.</em> dummy</p>

我在羽毛笔中得到的是：

<p>Dummy: <em>One italic format,and another italic format.</em> dummy</p>

我正在尝试覆盖quill.js库的自然行为，因为在official documentation中这种情况非常清楚：

由于<p><span>Text</span></p>和<p>Text</p>代表相同的内容，因此前者无效，这也是quill优化<span>包装的一部分。同样，一旦添加格式，<p><em>Te</em><em>st</em></p>和<p><em><em>Test</em></em></p>也是无效的，因为它们不是最紧凑的表示形式。

由于这些限制，quill无法支持任意DOM树和HTML更改。但是，正如我们将看到的，这种结构提供的一致性和可预测性使我们能够轻松构建丰富的编辑体验。

我尝试过的事情：

主要是我尝试通过以下想法扩展斜体印迹create()功能：

  • 将html属性附加到斜体节点以区分两个标签（不成功，quill仍将它们联接）：
import quill from "quill";

const OriginalItalic = quill.import("formats/italic");

export class MyItalic extends OriginalItalic {
  static create(){

    const node = super.create();

    // some not related code here
    node.setAttribute("title",`Italic number: #${prevIoUslySetNumberHere}`);
    // more unrelated logic here

    return node;
  }
}
quill.register("formats/italic",MyItalic,true);

  • 使用DOM manipulation techniques在每个斜体后插入带有zero-width-space的文本节点。 但是，create()函数不会将其直接附加到quill树。它所做的只是返回插入的节点，因此在函数执行期间尚未附加该节点。因此，我不能在不存在的节点后插入。由于这种原因，我放弃了这个想法。

  • 将斜体tagName属性更改为不同的受支持的HTML标签，希望quill能解决我的问题，我已经尝试过<q>，<cite>，<u>， <pre>（由于块印迹而不是行内印迹，因此该行为表现得非常不同，(info)）等。结果同样不成功（奎尔加入他们）。

相关信息：

我不需要使用ItalicBlot。我可以使用另一种字体，只要它不是字体颜色，背景颜色或字体，无论如何我都会应用自己的样式。我意识到quill不会将两个<span>拼成不同的颜色。

可能的相关信息：

我在DevExtreme中使用Vue.js。我的Rich Text编辑器是Devextreme小部件，但是它是由quill驱动的，并且我已经使用这种方法成功扩展了项目中的其他内容（直接quill，不是小部件本身，但是我也这样做了）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

devextremejavascriptquillrich-text-editorvue.js