Блог

Я сталкиваюсь с проблемой при реализации React Draft Wysiwyg, шрифт, размер, жирный шрифт и другие параметры выпадающего списка не работают

это мой код

 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 },
        }}
      />
    </div>
  )
}
 

когда я нажимаю на шрифт или любой другой выпадающий список, он показывает ошибку

Пожалуйста, попробуйте обернуть вашу функцию setState.

 const onSetEditorState = (newState) => {
   setEditorState(newState)
}
 

затем передайте onSetEditorState в качестве реквизита onEditorStateChange

Я нашел решение из этого старого клипа 2020. Спасибо ему.

youtube: https: //www.youtube.com/watch?v= t12a6z090AUamp;t= 760samp;ab_channel=CodingShiksha

репозиторий github: https: //github.com/gauti123456/ReactWysiwygEditor

Выполните следующие действия

1. Измените код в src/index.js

 import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
 

Для

 import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom";                 // add this

render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
 

Я не знаю, что это значит, но это не сработало, если я не сделаю этот шаг, кто-нибудь может объяснить.
Я буду очень признателен.

дополнительная информация

Поэтому я пытаюсь весь день, всю ночь, чтобы выяснить, что не так с этим редактором, который я не могу нажать, и он появляется в выпадающем списке. Таким образом, версии react и react-dom не связаны с этой проблемой, а также с версией CSS.

Итак, счастливого кодирования!

Ps. Draft js будет заархивирован в 31 декабря 2022 года, а meta company вместо этого будет использовать lexical. Итак, имейте это в виду. https://github.com/facebook/lexical

Ps2. Для React Draft Wysiwyg — это расширение Draft js, это очень хорошо, но я вижу, что github уже очень давно не активен. Поэтому, пожалуйста, подумайте, будете ли вы использовать это в долгосрочной перспективе.