Editor / Custom Rendering
material theme

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 (
            <EditorCustom
                defaultContent="Hello world"
                tools={[
                    [ Bold, Italic, Underline ], [ Link ]
                ]}
            />
        );
    }
}

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

In this article

 /