javascript - How to customize the style for react-draft-wysiwyg? - Stack Overflow

admin管理员组

文章数量:1401281

I am starting to use react-draft-wysiwyg and want to know if I can extend existing elements with styles and classes?

For example, there is a button B (bold) by default and I want to add some styles and classes to it, how can I do that?

My goal is to get something like this <p className = "test"> BOLD TEXT </ p> and as a result I will get bold text with the class

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",
              ponent: 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

Or maybe there is react-wysiwyg another library for this purpose

I am starting to use react-draft-wysiwyg and want to know if I can extend existing elements with styles and classes?

For example, there is a button B (bold) by default and I want to add some styles and classes to it, how can I do that?

My goal is to get something like this <p className = "test"> BOLD TEXT </ p> and as a result I will get bold text with the class

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",
              ponent: 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

Or maybe there is react-wysiwyg another library for this purpose

• javascript
• reactjs
• react-draft-wysiwyg

Share Improve this question Follow edited Jul 21, 2020 at 19:42 Raghul SK 1,39055 gold badges2424 silver badges3535 bronze badges asked Jul 21, 2020 at 12:59 JuniorrrrrJuniorrrrr 16922 gold badges44 silver badges1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

<Editor editorStyle={{ border: "1px solid black" }} />

use customBlockRenderFunc={myBlockStyleFn} in <Editor/> ponent instead of blockStyleFn={myBlockStyleFn}

You should be able to apply style to block elements using the blockStyleFn prop. There's a good example in the docs: https://draftjs/docs/advanced-topics-block-styling#blockstylefn

本文标签： javascriptHow to customize the style for reactdraftwysiwygStack Overflow