如何将 tailwindcss 实用程序类添加到 Quill 的文本对齐下拉列表中？

Question

我在我的项目中使用 Tailwindcss，它使用

text-left

、

text-center

、

text-right

和

text-justify

来对齐文本。

然而，

Quill 添加了

ql-align-left

、

ql-align-center

、

ql-align-right

和

ql-align-justy

来对齐文本。

如何配置 Quill（或 react-quill）以使用或添加 Tailwindcss 的实用程序类而不是 Quill 的 css 类？

我的最终目标是轻松组合 Tailwindcss 和 Quill，因此也欢迎实现该最终目标的替代路线。

我已经看过这个自定义格式部分，但我找不到扩展或创建添加正确类的下拉式工具栏项目的方法。

但是，我确实成功地将类添加为内联印迹：

import { Quill } from "react-quill";

class AlignRight extends Inline {}

AlignRight.blotName = 'align-right';
AlignRight.className = 'text-right';
AlignRight.tagName = 'div';
AlignRight.keyName = 'align';

但是，这会添加类似应用的类

bold

和

italic

。这样就可以同时应用

text-right

和

text-center

：

<div class="text-right">
  <div class="text-center">
    this text has alignment conflicts
  </div>
</div>

显然这不是我想要的。与现有的对齐工具栏项一样，选择新的文本对齐方式应关闭先前的对齐方式。

此外，基于这些文档，我还期望能够导入类属性并执行以下操作：

let Align = Quill.import('attributors/class/align');

class AlignRight extends Align {}

但是导入的

Align

是一个对象，而不是我可以扩展的类。

Answer 1

我自己尝试过这个，这不是一个非常干净的解决方案，我编写了一个函数，当我单击“提交”时，该函数从鹅毛笔编辑器中读取值，然后在将其提交到数据库之前直接调整字符串内容，如下所示：

const handleContentChange = () => {
    const v = value.replace(/<h1/g, '<h1 class="your-custom-tailwind-classes"');
    setValue(v);
};

<ReactQuill
value={value}
onChange={setValue}
/>