如何自定义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}