如何指示React-Quill应用内联样式而不是类？

Question

我使用了React-quill，并注意到对于某些内容，类被返回。有没有办法获得内联样式而不是类。

<p>Pjhfdcjhad <span class="ql-size-large">jadhjvhgds</span> dsbjhvgdsz xv</p>

应该改为

<p>Pjhfdcjhad <span style="font-size: 1.5em;">jadhjvhgds</span> dsbjhvgdsz xv</p>

示例代码和下面的框

https://codesandbox.io/s/agitated-snowflake-zvy6l

Answer 1

我的天，这是非常难以定制的。有一些是开箱即用的，只有register。有些需要更改CSS，有些则不需要。

这有助于获得字体大小、缩进、文本方向等的内联样式。

对齐方向：

最简单的--只需要注册：

//Text direction
Quill.register(Quill.import("attributors/style/direction"), true);
//Alignment
Quill.register(Quill.import("attributors/style/align"), true);

字体大小：

const Size = Quill.import("attributors/style/size");
Size.whitelist = ["0.75em", "1em", "1.5em", "2.5em"];
Quill.register(Size, true);

除了注册之外，还需要对CSS进行更改才能正确适应菜单：

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.75em"]::before {
  content: "Small";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1em"]::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.5em"]::before {
  content: "Large";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="2.5em"]::before {
  content: "Huge";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
  content: "Small";
  font-size: 0.75em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1em"]::before {
  content: "Normal";
  font-size: 1em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.5em"]::before {
  content: "Large";
  font-size: 1.5em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="2.5em"]::before {
  content: "Huge";
  font-size: 2.5em !important;
}

文本缩进：

羊皮纸自定义格式

const Parchment = Quill.import("parchment");
class IndentAttributor extends Parchment.Attributor.Style {
  add(node, value) {
    if (value === 0) {
      this.remove(node);
      return true;
    } else {
      return super.add(node, `${value}em`);
    }
  }
}

let IndentStyle = new IndentAttributor("indent", "text-indent", {
  scope: Parchment.Scope.BLOCK,
  whitelist: ["1em", "2em", "3em", "4em", "5em", "6em", "7em", "8em", "9em"]
});

Quill.register(IndentStyle, true);

左侧链接编辑器截图：

需要一个数据文本编辑器来绑定容器

  <div data-text-editor="form-editor">
    <ReactQuill
      ....
      bounds={`[data-text-editor="form-editor"]`} //for link editor to be not cut-off
    />
  </div>

https://codesandbox.io/s/vibrant-chebyshev-50eg7