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

 /