Question

我在安装内联和静态工具栏插件时遵循docs，但它们似乎不存在。

我正在使用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;

然后将该组件传递给另一个仅呈现编辑器的组件，而不执行任何其他操作。

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

Answer 1

创建工具栏之前，您需要先导入按钮

if($error == ''){
     $sql = "INSERT INTO k_fixtures SET
     league = '$league',
     team1 = '$home',
     team2 = '$away',
     dates = '$date',
     times = '$time'";

     $sql2 = querySql($sql); or die(mysqli_error($connect));
     if($sql2) {
         echo "Data Inserted";
     }
     else{
         echo "Data not Inserted";
     }
  }

此外，您需要在渲染功能中包含工具栏

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

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

您可以参考docs。

React Draft.js工具栏插件未显示

2 个答案: