Плагин панели инструментов React Draft.js не отображается

Я следил за документы при установке плагинов встроенной и статической панели инструментов, но, похоже, их нет.

Я использую интерфейс командной строки Create React App.

Компонент:

import React from 'react';
import {EditorState} from 'draft-js';
import Editor from 'draft-js-plugins-editor';

import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';

import 'draft-js/dist/Draft.css';
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
import 'draft-js-static-toolbar-plugin/lib/plugin.css';

const inlineToolbarPlugin = createInlineToolbarPlugin({
 //I read somewhere that this plug-in needs this structure passed to it, 
 //but the example in the docs did not use it, and they are undefined anyway
  // structure: [
  //   BoldButton,
  //   ItalicButton,
  //   UnderlineButton,
  //   CodeButton,
  //   Separator,
  // ],
});

const toolbarPlugin = createToolbarPlugin();

class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <Editor 
        editorState = {this.state.editorState} 
        onChange = {this.onChange}
        plugins = {[inlineToolbarPlugin, toolbarPlugin]}
      />
    );
  }
}

export default TextEditor;

Затем этот компонент передается другому компоненту, который просто отображает редактор и больше ничего не делает.

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
3 894
2

Ответы 2

Вы можете определить настраиваемые кнопки для выполнения желаемых операций, как показано ниже:

<Editor 
editorState = {this.state.editorState} 
onChange = {this.onChange}
plugins = {[inlineToolbarPlugin, toolbarPlugin]}
/>
<button onClick = {this._onBoldClick.bind(this)}>Bold</button> //add button to make bold

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

_onBoldClick() {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
}

Ссылку можно взять из документы.

Мне известно, но я все еще планирую использовать другие плагины. Моя цель - иметь возможность устанавливать плагины Draftjs в целом.

Draxy 05.04.2018 08:59

@Draxy ОК. Без проблем. Я добавил этот ответ для любых пользователей, пытающихся достичь такого рода возможностей.

Triyugi Narayan Mani 05.04.2018 09:01

Вам необходимо импортировать кнопки, прежде чем вы сможете создать панель инструментов

import {
  ItalicButton,
  BoldButton,
  UnderlineButton,
  CodeButton
} from "draft-js-buttons";

Кроме того, вам необходимо включить панель инструментов в свою функцию рендеринга.

const { Toolbar } = inlineToolbarPlugin;

render() {
  return (
    <div>
      <Editor 
         editorState = {this.state.editorState} 
         onChange = {this.onChange}
         plugins = {[inlineToolbarPlugin, toolbarPlugin]}
       />
       <Toolbar />
    </div>
);

предоставлена ​​неполная информация. использование копипаста не сработало. inlineToolbarPlugin не определен, ошибка. Было бы лучше, если бы вы импортировали все необходимое в своем примере.

omair azam 23.09.2020 09:29

Да, это было бы полезно, хотя эта информация была в вопросе, и, вероятно, поэтому я не повторил ее.

grantnz 23.09.2020 09:38

Другие вопросы по теме