# Tools

The React Editor, part of KendoReact, provides a set of built-in, user-interface tools, enables you to customize the available tools and to add custom ones.

* [API Reference including the EditorTools](https://www.telerik.com/kendo-react-ui-develop/components/editor/api/editortools)

## Using Built-In Tools

To add or remove any of the available tools, use the [`tools`](https://www.telerik.com/kendo-react-ui-develop/components/editor/api/editorprops#tools) prop of the Editor. All tools which are inserted in an array are rendered in a [KendoReact ButtonGroup](https://www.telerik.com/kendo-react-ui-develop/components/buttons/buttongroup) component.

The following example demonstrates all available tools of the React Editor, part of KendoReact.

[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/all-tools/func/source.txt)

## Customizing Built-In Tools

To customize any of the built-in tools of the Editor:

1. Based on the default tool configuration, create the desired tool settings.
2. Pass the settings to the corresponding function which creates the tool.

In the following example, the built-in `Bold` tool is changed to toggle the `B` tag, recognize the `STRONG` tag, its tooltip is changed to `My Custom Bold`, and the icon is reused. The FontSize DropDownList width and items are changed.

[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/edit-built-in-tools/func/source.txt)

The following code snippet demonstrates all tool settings and their corresponding functions which create the tools.

```jsx
  import { EditorToolsSettings, EditorTools } from '@progress/kendo-react-editor';

  const {
  bold, italic, underline, strikethrough, subscript, superscript,
  alignLeft, alignCenter, alignRight, alignJustify,
  indent, outdent,
  orderedList, bulletList,
  undo,
  redo,
  fontSize, fontName,
  formatBlock,
  link,
  unlink,
  image,
  viewHtml,
  insertTable,
  addRowBefore,
  addRowAfter,
  addColumnBefore,
  addColumnAfter,
  deleteRow,
  deleteColumn,
  deleteTable,
  mergeCells,
  splitCell
  } = EditorToolsSettings;

  const {
  createAlignTool,
  createStyleDropDownList, // Accepts fontSize and fontName settings.
  createFormatBlockDropDownList, // The formatBlock settings.
  createUndoTool,
  createRedoTool,
  createIndentTool,
  createOutdentTool,
  createInlineFormatTool, // bold, italic, underline, strikethrough, subscript, superscript
  createInsertImageTool, // image
  createLinkTool,
  createUnlinkTool,
  createListTool, // orderedList, bulletList
  createViewHtmlToo
  // Inserting and editing tables.
  createInsertTableTool,
  createAddRowBeforeTool,
  createAddRowAfterTool,
  createAddColumnBeforeTool,
  createAddColumnAfterTool,
  createDeleteRowTool,
  createDeleteColumnTool,
  createDeleteTableTool,
  createMergeCellsTool,
  createSplitCellTool
  } = EditorTools;
```

To customize the ColorPicker of ForeColor or BackColor tools, wrap the tool into a function and pass the new props to
[colorPickerProps](https://www.telerik.com/kendo-react-ui-develop/components/inputs/api/colorpickerprops).

```jsx
  import { Editor, EditorTools } from '@progress/kendo-react-editor';

  const { ForeColor, BackColor, Bold, Italic, Underline } = EditorTools;

  const CustomForeColor = props => (
    <ForeColor {...props} colorPickerProps={{ view: 'gradient' }} />
  );
  const CustomBackColor = props => (
    <BackColor {...props} colorPickerProps={{ view: 'gradient' }} />
  );

  const App = () => {
    return (
      <Editor
        tools={[[Bold, Italic, Underline], CustomForeColor, CustomBackColor]}
        contentStyle={{ height: 300 }}
        defaultContent={'<p>Editor Content</p>'}
      />
    );
  };
```

## Using Custom Tools

The React Editor, part of KendoReact, allows you to create and implement custom tools.

The following example demonstrates how to create:

* A drop-down list for applying color styles.
* A tool for toggling the background color style.
* Tools for inserting specific elements into the content.

[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/custom-tools/func/source.txt)

## Creating Custom Tools Using CSS and Plugins

The KendoReact Editor allows you to use plugins and CSS styles in custom tools.

The following example demonstrates how to implement a custom paragraph marker tool by:

* Using custom styles.
* Utilizing the Decoration plugin.
* Passing data from the tool to the plugin.

[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/custom-tools-styles-plugins/func/source.txt)

## Suggested Links

* [React Editor](https://www.telerik.com/kendo-react-ui-develop/components/editor)
* [API Reference of the Editor](https://www.telerik.com/kendo-react-ui-develop/components/editor/api/editor)