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.
Customizing Built-In Tools
To customize any of the built-in tools of the Editor:
- Based on the default tool configuration, create the desired tool settings.
- 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.
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.