editor

The editor options only affect the part where the user types, the editor.

editor.wrapperElement

It is the component that wraps the editor (excluding the toolbar). By default, is the Paper component from Material UI.

You can pass a string (for example: 'div') or a component.

() => {
  const config = {
    editor: {
      wrapperElement: 'div',
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    editor: {
      wrapperElement: 'div',
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

You can edit the code above and try other wrappers.

editor.className

It is the className for the editor.

() => {
  const config = {
    editor: {
      className: 'my-class-name',
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    editor: {
      className: 'my-class-name',
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

editor.style

It is the style for the editor.

() => {
  const config = {
    editor: {
      style: {
        border: '1px solid gray',
        backgroundColor: '#a7a460',
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    editor: {
      style: {
        border: '1px solid gray',
        backgroundColor: '#a7a460',
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

You can edit the code above and try other styles.

editor

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}editor.wrapperElement

editor.className

editor.style

editor.wrapperElement