Dios mío, esto es extremadamente difícil de personalizar. Algunos funcionan fuera de la caja con solo register . Algunos requieren cambios de CSS y otros no.

Esto ayuda a obtener estilos en línea para tamaños de fuente, sangría, dirección del texto, etc.

Alinear y dirección:

El más fácil de todos: solo necesita registrarse:

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

Tamaño de fuente:

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

Requiere cambios de CSS para acomodar el menú correctamente además de registrarse:

 .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; }

Guion de texto:

Formato personalizado de pergamino

 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);

Corte del editor de enlaces a la izquierda:

Necesita un editor de texto de datos para el contenedor delimitador

 <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