Я следил за документы при установке плагинов встроенной и статической панели инструментов, но, похоже, их нет.
Я использую интерфейс командной строки 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;
Затем этот компонент передается другому компоненту, который просто отображает редактор и больше ничего не делает.
Должно быть, я чего-то упускаю или не даю плагинам то, что им нужно, я просто не знаю что. Я предполагаю, что кода, который у меня есть, недостаточно, чтобы начать добавлять плагины в первую очередь?





Вы можете определить настраиваемые кнопки для выполнения желаемых операций, как показано ниже:
<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'));
}
Ссылку можно взять из документы.
@Draxy ОК. Без проблем. Я добавил этот ответ для любых пользователей, пытающихся достичь такого рода возможностей.
Вам необходимо импортировать кнопки, прежде чем вы сможете создать панель инструментов
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 не определен, ошибка. Было бы лучше, если бы вы импортировали все необходимое в своем примере.
Да, это было бы полезно, хотя эта информация была в вопросе, и, вероятно, поэтому я не повторил ее.
Мне известно, но я все еще планирую использовать другие плагины. Моя цель - иметь возможность устанавливать плагины Draftjs в целом.