如何自定义 react-draft-wysiwyg 的样式？

Question

我开始使用 react-draft-wysiwyg 并想知道是否可以使用样式和类扩展现有元素？

例如，默认有一个按钮B（粗体），我想给它添加一些样式和类，我该怎么做？

我的目标是获得类似<p className = "test"> BOLD TEXT </ p> 的内容，因此我将在课堂上获得粗体文本

class EditorContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div className="editor">
        <Editor
          editorState={editorState}
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            options: ["inline", "blockType", "fontSize"],
            inline: {
              inDropdown: false,
              className: "test",
              component: undefined,
              dropdownClassName: undefined,
              options: ["bold", "italic", "underline"],
              bold: { className: "test", style: { color: "red" } },
              italic: { className: undefined },
              underline: { className: undefined },
            },
          }}
        />

        <textarea
          disabled
          // value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        />
      </div>
    );
  }
}

Example

或者也许有 react-wysiwyg 另一个为此目的的库

Answer 1

您应该能够使用 blockStyleFn 属性将样式应用于块元素。文档中有一个很好的例子：https://draftjs.org/docs/advanced-topics-block-styling#blockstylefn

Answer 2

在<Editor/> 组件中使用customBlockRenderFunc={myBlockStyleFn} 而不是blockStyleFn={myBlockStyleFn}