0

我开始使用 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>
    );
  }
}

例子

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

4

2 回答 2

0

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

于 2021-02-11T11:16:44.870 回答
0

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

于 2020-07-21T13:09:34.220 回答