Sanitizing Pasted HTML Content

The Editor exposes a set of built-in functions for sanitizing the content which the user pastes in the content area.

The sanitizing approaches improve the control over the entered content and ensure that its styling is consistent. Sanitizing the pasted HTML content is advisable when the user copies content from MS Word.

The following example demonstrates how to use and extend the built-in content sanitizing. For flexibility, the HTML sanitizing occurs in the application and is not built in the Editor.

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

const { Bold, Italic, Underline, Undo, Redo } = EditorTools;

class App extends React.Component {
    render() {
        return (
            <Editor
                onPasteHtml={event => {
                    const html = sanitizeHtml(event.pastedHtml);

                    console.log('sanitized HTML', html);
                    console.log('raw content', event.pastedHtml);

                    return html;
                }}
                contentStyle={{ height: 320 }}
                tools={[
                    [ Bold, Italic, Underline ],
                    [ Undo, Redo ]
                ]}
            />
        );
    }
}

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

In this article

 /