Custom Rendering

The Editor provides options for customizing the way it renders its elements—for example, HTML wrapper element, tools, and dialogs.

The following example demonstrates how to create a custom Editor with the Bold, Italic, Underline, and Link tools, and an Insert Link dialog.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { EditorTools } from '@progress/kendo-react-editor';
import { customToolRendering, customToolRenderingWithDialog } from './customToolRendering.jsx';
import { EditorCustom } from './EditorCustom.jsx';

const Bold = customToolRendering(EditorTools.Bold);
const Italic = customToolRendering(EditorTools.Italic);
const Underline = customToolRendering(EditorTools.Underline);
const Link = customToolRenderingWithDialog(EditorTools.Link);

class App extends React.Component {
    render() {
        return (
                defaultContent="Hello world"
                tools={[ Bold, Italic, Underline, Link ]}

    <App />,

In this article