toolbar

Configuration

Default configuration lang translations draftEditor editor toolbar toolbar.className toolbar.style toolbar.visible toolbar.position toolbar.controls toolbar.controlsConfig

Data conversion

Examples

Toolbar settings.

toolbar.style

The toolbar wrapper style prop.

() => {
  const config = {
    toolbar: {
      style: {
        padding: 25,
        background: '#50c1ae',
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      style: {
        padding: 25,
        background: '#50c1ae',
      },
    },
  }
  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.

toolbar.visible

Sets whether the toolbar is visible. It's true by default.

() => {
  const config = {
    toolbar: {
      visible: false,
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      visible: false,
    },
  }
  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 change the toolbar visibility.

toolbar.position

Sets the toolbar position: Top or bottom.

Possible values: 'top' or 'bottom'. The default value is 'top'.

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

() => {
  const config = {
    toolbar: {
      position: 'bottom',
    },
  }
  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 change the toolbar position.

toolbar.controls

Array that sets the toolbar controls. You can see the default controls on Default configuration section.

In order to add the built-in controls you have to import them:

import { toolbarControlTypes } from 'react-mui-draft-wysiwyg';

And pass them to toolbar.controls option like this:

() => {
  const config = {
    toolbar: {
      controls: [
        toolbarControlTypes.bold,
        toolbarControlTypes.italic,
        toolbarControlTypes.underline,
      ],
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controls: [
        toolbarControlTypes.bold,
        toolbarControlTypes.italic,
        toolbarControlTypes.underline,
      ],
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

Let's see all the available controls.

undo

This control allows the user undo the last change.

toolbarControlTypes.undo

redo

This control allows the user redo the last change.

toolbarControlTypes.redo

bold

This control allows the user toggle bold style of the current selected text.

toolbarControlTypes.bold

italic

This control allows the user toggle italic style of the current selected text.

toolbarControlTypes.italic

underline

This control allows the user toggle underline of the current selected text.

toolbarControlTypes.underline

strikethrough

This control allows the user toggle strikethrough style of the current selected text.

toolbarControlTypes.strikethrough

fontColor

This control allows the user change the font color of the current selected text.

toolbarControlTypes.fontColor

fontBackgroundColor

This control allows the user change the font background color of the current selected text.

toolbarControlTypes.fontBackgroundColor

linkAdd

This control allows the user add a link (URL) to the current selected text.

toolbarControlTypes.linkAdd

linkRemove

This control allows the user remove all links of the current selected text.

toolbarControlTypes.fontColor

image

This control allows the user add an image by uploading it or adding its URL.

toolbarControlTypes.image

blockType

This control allows the user change the paragraph style (Header 1, Header 2, etc.).

toolbarControlTypes.blockType

fontFamily

This control allows the user change the font family (Arial, Sans Serif, etc) of the selected text.

toolbarControlTypes.fontFamily

textAlign

This control allows the user change text alignment (left, center, right and justify) of the selected paragraphs.

toolbarControlTypes.textAlign

unorderedList

This control allows the user start an unordered list of items.

toolbarControlTypes.unorderedList

orderedList

This control allows the user start an ordered list of items.

toolbarControlTypes.orderedList

divider

This control is purely cosmetic. Add a vertical line that allows you to separate the rest of the controls.

toolbarControlTypes.divider

toolbar.controlsConfig

This setting allow to customize some toolbar controls.

toolbar.controlsConfig.blockType

toolbar.controlsConfig.blockType.options

This allows you to set the available options.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        blockType: {
          options: [
            {
              value: 'default',
              text: LANG_PREFIX + 'controls.blockType.labels.normal',
            },
            {
              value: 'header-one',
              text: LANG_PREFIX + 'controls.blockType.labels.header1',
            },
            {
              value: 'header-two',
              text: LANG_PREFIX + 'controls.blockType.labels.header2',
            },
            {
              value: 'header-three',
              text: LANG_PREFIX + 'controls.blockType.labels.header3',
            },
            {
              value: 'blockquote',
              text: 'Quote',
            },
          ],
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        blockType: {
          options: [
            {
              value: 'default',
              text: LANG_PREFIX + 'controls.blockType.labels.normal',
            },
            {
              value: 'header-one',
              text: LANG_PREFIX + 'controls.blockType.labels.header1',
            },
            {
              value: 'header-two',
              text: LANG_PREFIX + 'controls.blockType.labels.header2',
            },
            {
              value: 'header-three',
              text: LANG_PREFIX + 'controls.blockType.labels.header3',
            },
            {
              value: 'blockquote',
              text: 'Quote',
            },
          ],
        },
      },
    },
  }
  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 options.

The value property contains the draft block style. Built-in block styles: 'default', 'header-one', 'header-two', 'header-three', 'header-four', 'header-five', 'header-six' and 'blockquote'

The text property contains the text that the user sees.

The LANG_PREFIX constant in the example above tells to the editor to translate the text. For more information about translations go to: lang section

toolbar.controlsConfig.image

toolbar.controlsConfig.image.uploadCallback

Function containing the logic when an image is uploaded. Receives image File object as parameter. It must return a Promise with the URL as string.

By default the image is converted to base64. Use this option if you want upload to a server or doing something with it before is added to the editor.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        image: {
          uploadCallback: file =>
            new Promise(function(resolve, reject) {
              if (file.size > 1000000) {
                reject('The image is too big! Max size: 1mb')
              }
              // Here you can upload the image to a server for example,
              // grab the URL and return it with the resolve function
              resolve('https://picsum.photos/200/300')
            }),
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        image: {
          uploadCallback: file =>
            new Promise(function(resolve, reject) {
              if (file.size > 1000000) {
                reject('The image is too big! Max size: 1mb')
              }
              // Here you can upload the image to a server for example,
              // grab the URL and return it with the resolve function
              resolve('https://picsum.photos/200/300')
            }),
        },
      },
    },
  }
  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 logic.

Note: This is only is applicable on the upload image option, it doesn't work on the URL option.

toolbar.controlsConfig.fontColor

toolbar.controlsConfig.fontColor.colorsPerRow

This is the maximum number of color options that will be shown in a single row. By default 10.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontColor: {
          colorsPerRow: 30,
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontColor: {
          colorsPerRow: 30,
        },
      },
    },
  }
  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 number.

toolbar.controlsConfig.fontColor.options

This is and array with the available color list. In order to see the default value go to: Default configuration section.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontColor: {
          options: [
            { text: 'black', value: 'rgb(0, 0, 0)' },
            { text: 'white', value: 'rgb(255, 255, 255)' },
            { text: 'red', value: 'rgb(255, 0, 0)' },
            { text: 'green', value: 'rgb(0, 255, 0)' },
            { text: 'blue', value: 'rgb(0, 0, 255)' },
          ],
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontColor: {
          options: [
            { text: 'black', value: 'rgb(0, 0, 0)' },
            { text: 'white', value: 'rgb(255, 255, 255)' },
            { text: 'red', value: 'rgb(255, 0, 0)' },
            { text: 'green', value: 'rgb(0, 255, 0)' },
            { text: 'blue', value: 'rgb(0, 0, 255)' },
          ],
        },
      },
    },
  }
  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 colors.

The text property contains the text shown in tooltip when the user moves the mouse over the color. The value property contains the value of the color in rgb, hex or string (black, 'red', etc.).

toolbar.controlsConfig.fontBackgroundColor

toolbar.controlsConfig.fontBackgroundColor.colorsPerRow

This is the maximum number of color options that will be shown in a single row. By default 10.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontBackgroundColor: {
          colorsPerRow: 30,
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontBackgroundColor: {
          colorsPerRow: 30,
        },
      },
    },
  }
  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 number.

toolbar.controlsConfig.fontBackgroundColor.options

This is and array with the available color list. In order to see the default value go to: Default configuration section.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontBackgroundColor: {
          options: [
            { text: 'black', value: 'rgb(0, 0, 0)' },
            { text: 'white', value: 'rgb(255, 255, 255)' },
            { text: 'red', value: 'rgb(255, 0, 0)' },
            { text: 'green', value: 'rgb(0, 255, 0)' },
            { text: 'blue', value: 'rgb(0, 0, 255)' },
          ],
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontBackgroundColor: {
          options: [
            { text: 'black', value: 'rgb(0, 0, 0)' },
            { text: 'white', value: 'rgb(255, 255, 255)' },
            { text: 'red', value: 'rgb(255, 0, 0)' },
            { text: 'green', value: 'rgb(0, 255, 0)' },
            { text: 'blue', value: 'rgb(0, 0, 255)' },
          ],
        },
      },
    },
  }
  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 colors.

toolbar.controlsConfig.fontSize

toolbar.controlsConfig.fontSize.options

This is an array with the available sizes. In order to see the default value go to: Default configuration section.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontSize: {
          options: [
            'default',
            '4px',
            '8px',
            '12px',
            '24px',
            '36px',
            '60px',
            '72px',
            '96px',
          ],
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontSize: {
          options: [
            'default',
            '4px',
            '8px',
            '12px',
            '24px',
            '36px',
            '60px',
            '72px',
            '96px',
          ],
        },
      },
    },
  }
  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 font sizes.

toolbar.controlsConfig.fontFamily

toolbar.controlsConfig.fontFamily.options

This is an array with the available font families. In order to see the default value go to: Default configuration section.

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontFamily: {
          options: [
            'default',
            'Arial',
            'Tahoma',
            'Times New Roman',
            'Impact',
          ],
        },
      },
    },
  }
  const [editorState, setEditorState] = React.useState(
    MUIEditorState.createEmpty(config),
  )
  const onChange = newState => {
    setEditorState(newState)
  }
  return (
    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={config}
    />
  )
}

() => {
  const config = {
    toolbar: {
      controlsConfig: {
        fontFamily: {
          options: [
            'default',
            'Arial',
            'Tahoma',
            'Times New Roman',
            'Impact',
          ],
        },
      },
    },
  }
  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 font families.

toolbar

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

toolbar.className