es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Las opciones de menú desplegable del React Draft Wysiwyg no funcionan.

Estoy teniendo problemas al implementar React Draft Wysiwyg, las opciones de fuente, tamaño, negrita y otros desplegables no funcionan.

Este es mi código:

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

export const HTMLEditor: React.FC = (): JSX.Element => {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());

  return (
    <div classname="mt-2 mb-2">
      <editor toolbarclassname="toolbarClassName" wrapperclassname="wrapperClassName" editorclassname="editorClassName" editorstate="{editorState}" oneditorstatechange="{setEditorState}" toolbar="{{" inline:="" {="" indropdown:="" true="" },="" list:="" {="" indropdown:="" true="" },="" textalign:="" {="" indropdown:="" true="" },="" link:="" {="" indropdown:="" true="" },="" history:="" {="" indropdown:="" true="" },="" }}=""></editor>
    </div>
  );
};

Imagen

Cuando hago clic en la fuente u otro desplegable, muestra el error.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que no has incluido las opciones de la barra de herramientas necesarias para fuente, tamaño, negrita y otras opciones desplegables en tu código. Necesitas agregarlas al objeto toolbar de esta manera:

    toolbar={{
      inline: { inDropdown: true },
      list: { inDropdown: true },
      textAlign: { inDropdown: true },
      link: { inDropdown: true },
      history: { inDropdown: true },
      fontFamily: { options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'] },
      fontSize: { options: [8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96] },
      fontWeight: { options: ['normal', 'bold'] },
    }}
    

    Esto debería agregar las opciones desplegables necesarias para la fuente, tamaño y negrita. Puedes personalizar las opciones según tus necesidades.

    ¡Espero que esto te ayude!

Comments are closed.