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.

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

const { Bold, Italic, Underline, Undo, Redo } = EditorTools;
const { pasteCleanup, sanitize, sanitizeClassAttr, sanitizeStyleAttr, removeAttribute } = EditorUtils;
const pasteSettings = {
    convertMsLists: true,
    // stripTags: 'span|font'
    attributes: {
        class: sanitizeClassAttr,
        style: sanitizeStyleAttr,
        // lang: removeAttribute,
        '*': removeAttribute
    }
};

class App extends React.Component {
    render() {
        return (
            <Editor
                onPasteHtml={event => pasteCleanup(sanitize(event.pastedHtml), pasteSettings)}
                contentStyle={{ height: 320 }}
                tools={[
                    [ Bold, Italic, Underline ],
                    [ Undo, Redo ]
                ]}
            />
        );
    }
}

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