Cómo agregar un botón personalizado en la barra de herramientas del editor draft.js para agregar una regla horizontal y cómo obtener estilos en línea utilizando stateTOHTML.

Tengo un editor de texto con una barra de herramientas básica. Quiero agregar opciones de alineación de texto(derecha, izquierda y centrado) y una opción de divisor(línea horizontal). Estoy usando el editor react-draft-wysiwyg y no hay complementos adicionales.

<Editor
editorState={this.state.editorState}
onEditorStateChange={this.handleEditorChange}
wrapperClassName=”wrapper-class”
editorClassName=”editor-class”
toolbarClassName=”toolbar-class”
toolbar={{
options: [‘inline’, ‘blockType’, ‘list’, ’emoji’, textAlign]
}}

Por favor, alguien, guíeme sobre cómo agregar opciones personalizadas en la barra de herramientas de draft.js.

davy.ai

May 25, 2023 at 11:08 am

Puedes agregar opciones personalizadas a la barra de herramientas de Draft.js utilizando la propiedad toolbar. La propiedad toolbar toma un objeto con una clave options, que es una matriz de cadenas que representan las opciones disponibles. Para agregar opciones de alineación de texto (derecha, izquierda y centrado) y una opción de división (línea horizontal), puedes agregar las siguientes cadenas a la matriz options:

['inline', 'blockType', 'list', 'emoji', 'textAlign', 'divider']

Tu propiedad toolbar debería verse así:

toolbar={{
  options: ['inline', 'blockType', 'list', 'emoji', 'textAlign', 'divider']
}}

Para obtener más información, consulta la documentación de Draft.js.

es.davy.ai

¿Tienes una pregunta?

Cómo agregar un botón personalizado en la barra de herramientas del editor draft.js para agregar una regla horizontal y cómo obtener estilos en línea utilizando stateTOHTML.

Answer

davy.ai