Редактор WYSIWYG в React с помощью React-Draft-Wysiwyg

React-Draft-Wysiwyg

React и библиотеки Draft.js использовались для создания react-draft-wysiwyg библиотеки — редактора WYSIWYG («Что видишь, то и получаешь»). Он имеет массу настраиваемых встроенных функций, включая кнопки стилизации текста, поддержку сочетаний клавиш, возможность встраивания медиафайлов, поддержку смайлов и многое другое, что можно ожидать от современного компонента HTML-редактора.

Особенности React-Draft-Wysiwyg

Библиотека react-draft-wysiwyg предлагает компонент редактора форматированного текста со всеми общими функциями WYSIWYG, перечисленными ниже.

• Поддержка встроенных стилей: жирный, курсив, подчеркивание, зачеркивание, код, нижний индекс и надстрочный индекс.
• Возможность изменить порядок элементов управления на панели инструментов.
• Поддержка типов блоков: Абзац, H1 – H6, Цитата, Код.
• Возможность изменения стилей и значков на панели инструментов.
• Возможность показывать панель инструментов только тогда, когда редактор сфокусирован.
• Возможность добавления пользовательских элементов управления на панель инструментов.
• Поддержка выравнивания текста.
• Поддержка установки размера шрифта и семейства шрифтов.
• Поддержка упорядоченных/неупорядоченных списков и отступов.
• Настраиваемая панель инструментов с возможностью добавления/удаления элементов управления.

Преимущества React-Draft-Wysiwyg

• Простые возможности настройки и интеграции : react-draft-wysiwyg библиотека имеет простой API, понятные реквизиты компонентов и хорошо написанную документацию. Это позволяет быстро и легко настроить редактор форматированного текста для вашего проекта React. Кроме того, компонент редактора форматированного текста поддерживает как определенные известные библиотеки сообщества Draft.js, так и основные API.
• Гибкость и возможность настройки : эта библиотека не только предоставляет гибкий набор функций, но и не ограничивает возможности разработчиков. Благодаря различным компонентам он позволяет разработчикам персонализировать панель инструментов и функциональные возможности. Даже добавлять собственные элементы панели инструментов очень просто!

Начало работы с React-Draft-Wysiwyg.

Начнем с создания нового проекта в выбранной вами директории. Чтобы запустить проект, введите любую из команд из списка ниже в командной строке.

    npx create-react-app text-editor-example
    --or--
    yarn create react-app text-editor-example
    --or--
    pnpm create react-app text-editor-example

После создания запустите его, перейдя в корень папки проекта и введя команду ниже:

    npm start
    --or--
    yarn start
    --or--
    pnpm start

Команды, показанные ниже, добавят пакеты react-draft-wysiwygи draft.jsв ваш проект React:

    npm install --save react-draft-wysiwyg draft-js

Подготовка редактора

Прежде чем мы сможем начать, нам нужно внести некоторые изменения в файл src/App.js. Мы будем импортировать EditorState из draft-js вместе с editor компонентом и стилями из react-draft-wysiwyg.

Добавьте код, чтобы сделать видимым редактор форматированного текста. Ваш файл App.js теперь должен содержать следующий код:

    import React, { useState } from 'react';
    import { EditorState } from 'draft-js';
    import { Editor } from 'react-draft-wysiwyg';
    import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
    import './App.css';
    function App() {
      const [editorState, setEditorState] = useState(
        () => EditorState.createEmpty(),
      );
      return (
        <div className="App">
          <h1>Text Editor</h1>
          <Editor
            editorState={editorState}
            onEditorStateChange={setEditorState}
            placeholder="The message goes here..."
          />
        </div>
      )
    }
    export default App;

Функция createEmpty создаст EditorState пустое состояние в качестве нашей отправной точки. EditorState используется в качестве editor prop. После сохранения изменений и обновлений вид не выглядит фантастическим, как вы увидите:

Стиль редактора

В стиле редактора props стиля могут помочь более четко выделить различные разделы редактора. Пропсом может быть класс, используемый для определенной области, или объект со стилями:

• toolbarClassName=”toolbarClassName”
• wrapperClassName=”wrapperClassName”
• editorClassName=”editorClassName”

Чтобы стилизовать редактор, добавьте следующие className свойства к Editor компоненту и соответствующие стили к App.css:

    <Editor
      editorState={editorState}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
      onEditorStateChange={this.onEditorStateChange}
    />;

    .toolbarClassName {
      border-radius: 10px;
    }
    .wrapperClassName {
      border: 1px solid rgb(231, 221, 221);
      padding: 1rem;
    }
    .editorClassName {
      background-color:rgb(239, 222, 222);
      border-radius: 10px;  
      padding: 1rem; 
    }

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

в режиме разработки вы можете увидеть предупреждение «Невозможно вызвать setState компонент». React отображает это предупреждающее сообщение из-за проблемы с react-draft-wysiwyg.

Надеемся, что администраторы библиотеки исправят эту проблему как можно скорее. Вы можете временно отключить строгий режим React для этого урока, выполнив следующие действия:

    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      // <React.StrictMode>
        <App />
      // </React.StrictMode>
    );

EditorState Props

В редакторе может существовать как неконтролируемый, так и регулируемый компонент. EditorState, объект состояния верхнего уровня редактора, используется для создания управляемого редактора.

В то время как тип потока, указывающий ожидаемую структуру необработанного формата содержимого, может использоваться для создания неконтролируемого редактора, такого как EditorState или RawDraftContentState. Следующие props будут переданы контролируемому редактору, если мы хотим его создать:

• editorState: Опция для управления обновлением состояния редактора.
• onEditorStateChange: функция, которая получает объектный параметр типа EditorStateи вызывается всякий раз, когда изменяется состояние редактора.

Они будут добавлены в наш editor компонент, и тогда он будет выглядеть следующим образом:

    <Editor
      editorState={editorState}
      onEditorStateChange={setEditorState}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
    />

Передавая initialEditorState, EditorState также можно использовать для создания неуправляемого редактора. После создания состояния редактора инициализируйте его с помощью этого объекта типа EditorState:

    <Editor
      initialEditorState={editorState}
      onEditorStateChange={setEditorState}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
      placeholder="The message goes here..."
    />

Использование RawDraftContentState является альтернативным методом достижения неуправляемого редактора. Непроверенный редактор принимает следующие реквизиты: initialEditorState и onContentStateChange.

    <Editor
      initialContentState={contentState}
      onContentStateChange={this.onContentStateChange}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
    />

Использование RawDraftContentState для достижения управляемого редактором поведения не рекомендуется. На производительность влияет contentState преобразование в экземпляр editorState.

Заключение

В этом посте основное внимание уделялось созданию редактора форматированного текста с панелью инструментов, в которой уже есть ряд опций для ввода и отображения текста. Вы можете добавить функции, которые позволят вам хранить текст в базе