我如何直接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