2

我遵循了有关安装内联和静态工具栏插件的文档，但它们似乎不存在。

我正在使用 Create React App CLI。

组件：

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;

然后将该组件传递给另一个组件，该组件只呈现编辑器，不做任何其他事情。

我一定是遗漏了一些东西，或者没有给插件他们需要的东西，我只是不知道是什么。我猜我的代码不足以首先开始添加插件？

4

2 回答 2

1

您可以定义自定义按钮来执行所需的操作，如下所示：

<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'));
}

您可以参考docs。

于 2018-04-05T06:24:51.130 回答
1

您需要先导入按钮，然后才能创建工具栏

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>
);
于 2018-06-20T23:49:05.600 回答