Editor / Tools
material theme

Tools

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

Using Built-In Tools

To add or remove any of the available tools, use the tools prop of the Editor. All tools which are inserted in an array are rendered in a KendoReact ButtonGroup component.

The following example demonstrates all available tools of the Editor.

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorTools } from '@progress/kendo-react-editor';
import content from './content';

const {
    Bold, Italic, Underline, Strikethrough, Subscript, Superscript,
    AlignLeft, AlignCenter, AlignRight, AlignJustify,
    Indent, Outdent, OrderedList, UnorderedList,
    Undo, Redo, FontSize, FontName, FormatBlock,
    Link, Unlink, InsertImage, ViewHtml,
    InsertTable,
    AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,
    DeleteRow, DeleteColumn, DeleteTable,
    MergeCells, SplitCell
} = EditorTools;

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [ Bold, Italic, Underline, Strikethrough ],
                    [ Subscript, Superscript ],
                    [ AlignLeft, AlignCenter, AlignRight, AlignJustify ],
                    [ Indent, Outdent ],
                    [ OrderedList, UnorderedList ],
                    FontSize, FontName, FormatBlock,
                    [ Undo, Redo ],
                    [ Link, Unlink, InsertImage, ViewHtml ],
                    [ InsertTable ],
                    [ AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter ],
                    [ DeleteRow, DeleteColumn, DeleteTable ],
                    [ MergeCells, SplitCell ]
                ]}
                contentStyle={{ height: 300 }}
                defaultContent={content}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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.

The following example demonstrates how to customize the built-in Bold tool. The tool is updated to toggle the B tag, recognize the STRONG tag, its tooltip is changed to My Custom Bold, and the icon is reused.

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorTools } from '@progress/kendo-react-editor';
import MyBold from './myBold.jsx';
import content from './content-basic';

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [ MyBold, EditorTools.ViewHtml ]
                ]}
                defaultContent={content}
                contentStyle={{ height: 300 }}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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

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
  createViewHtmlTool,

  // Inserting and editing tables.
  createInsertTableTool,
  createAddRowBeforeTool,
  createAddRowAfterTool,
  createAddColumnBeforeTool,
  createAddColumnAfterTool,
  createDeleteRowTool,
  createDeleteColumnTool,
  createDeleteTableTool,
  createMergeCellsTool,
  createSplitCellTool
} = EditorTools;

Using Custom Tools

The Editor 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.
import React from 'react';
import ReactDOM from 'react-dom';

import { Editor } from '@progress/kendo-react-editor';

import MyColorTool from './myColorTool.jsx';
import BackgroundColorTool from './backgroundColorTool.jsx';
import { InsertHrTool, InsertImageTool } from './insertTools.jsx';
import content from './content-basic';

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [ MyColorTool, BackgroundColorTool ],
                    [ InsertHrTool, InsertImageTool ]
                ]}
                contentStyle={{ height: 300 }}
                defaultContent={content}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /