Paste cleanup in EJ2 TypeScript Rich text editor control

18 Apr 202310 minutes to read

The Rich Text Editor allows you to reduce the effort while converting the Microsoft Word content to HTML format with format and styles.

MS Word to HTML

By default, Rich Text Editor consider the following processes on paste content from Microsoft Word.

List conversion: The list elements copied from the Microsoft Word document contains paragraph tags with styles and classes. The list elements are converted to standard HTML list elements by referring the styles and class names in the paragraph tags.

Converting style: The styles of the elements copied from the Microsoft Word document are converted to standard CSS styles and added as inline styles for each respective element.

Tags and comments: The Microsoft Word specific XML tags and comments are removed when cleanup on paste.

Paste cleanup

You can control the formatting and styles on pasting the content to the editor using the pasteCleanup settings property. The following settings are available to clean up the content:

API Description Default Value Type
prompt To invoke prompt dialog with paste options on pasting the content in editor. false boolean
plainText To paste the content as plain text. false boolean
keepFormat To keep the same format with copied content. true boolean
deniedTags To ignore the tags when pasting HTML content. null string[]
deniedAttrs To paste the content by filtering out these attributes from the content. null string[]
allowedStyleProps To paste the content by accepting these style attributes and removing other style attributes. [‘background’, ‘background-color’, ‘border’, ‘border-bottom’, ‘border-left’, ‘border-radius’, ‘border-right’, ‘border-style’, ‘border-top’, ‘border-width’, ‘clear’, ‘color’, ‘cursor’, ‘direction’, ‘display’, ‘float’, ‘font’, ‘font-family’, ‘font-size’, ‘font-weight’, ‘font-style’, ‘height’, ‘left’, ‘line-height’, ‘margin’, ‘margin-top’, ‘margin-left’, ‘margin-right’, ‘margin-bottom’, ‘max-height’, ‘max-width’, ‘min-height’, ‘min-width’, ‘overflow’, ‘overflow-x’, ‘overflow-y’, ‘padding’, ‘padding-bottom’, ‘padding-left’, ‘padding-right’, ‘padding-top’, ‘position’, ‘right’, ‘table-layout’, ‘text-align’, ‘text-decoration’, ‘text-indent’, ‘top’, ‘vertical-align’, ‘visibility’, ‘white-space’, ‘width’] string[]

Rich Text Editor features are segregated into individual feature-wise modules. To use paste cleanup, inject paste cleanup module using the RichTextEditor.Inject(PasteCleanup).

Prompt dialog

When prompt is set to true, pasting the content in the editor will open a dialog box that contains three options Keep, Clean, and Plain Text as radio buttons:

  1. Keep: Radio button to keep the same format with copied content.
  2. Clean: Radio button to clear all the style formats with copied content.
  3. Plain Text: Radio button to paste the copied content as plain text without any formatting or style (including the removal of all tags).

When prompt value is set true, the API properties plainText and keepFormat will not be considered for processing when pasting the content.

Paste as plain text

When plainText is set to true, the copied content will be converted as plain text by removing all the HTML tags and styles applied to it and only the plain text is pasted in the editor.

When plainText value is set true, the API property prompt should be set to false, and keepFormat will not be considered for processing when pasting the content.

Keep format

When keepFormat is set to true, the copied content will maintain all the style formatting allowed in the allowedStyleProps on pasting the content in the editor.

When keepFormat is set to false, the style in the copied content will be removed without considering the allowed styles in the allowedStyleProps when pasting the content in the editor.

When keepFormat value is set true, the API property prompt and plainText should be set to false.

Denied tags

When deniedTags values are set, the tags that matches the ‘denied tags’ list will be removed on pasting the copied content in the editor. For Example,

  1. 'a': Paste the content by filtering out anchor tags.
  2. 'a[!href]': Paste the content by filtering out anchor tags that do not have the ‘href’ attribute.
  3. 'a[href, target]': Paste the content by filtering out anchor tags that have the ‘href’ and ‘target’ attributes.

Denied attributes

When the deniedAttrs values are set, the attributes that matches the ‘denied attributes’ list will be removed on pasting the copied content in the editor. For Example,

'id', 'title': This will remove the attributes ‘id’ and ‘title’ from all tags.

Allowed style properties

By default, the following basic styles are allowed on pasting the content to the editor.

[‘background’, ‘background-color’, ‘border’, ‘border-bottom’, ‘border-left’, ‘border-radius’, ‘border-right’, ‘border-style’, ‘border-top’, ‘border-width’, ‘clear’, ‘color’, ‘cursor’, ‘direction’, ‘display’, ‘float’, ‘font’, ‘font-family’, ‘font-size’, ‘font-weight’, ‘font-style’, ‘height’, ‘left’, ‘line-height’, ‘margin’, ‘margin-top’, ‘margin-left’, ‘margin-right’, ‘margin-bottom’, ‘max-height’, ‘max-width’, ‘min-height’, ‘min-width’, ‘overflow’, ‘overflow-x’, ‘overflow-y’, ‘padding’, ‘padding-bottom’, ‘padding-left’, ‘padding-right’, ‘padding-top’, ‘position’, ‘right’, ‘table-layout’, ‘text-align’, ‘text-decoration’, ‘text-indent’, ‘top’, ‘vertical-align’, ‘visibility’, ‘white-space’, ‘width’]

When you configure allowedStyleProps, the styles, which matches the ‘allowed style properties’ list are allowed, all other style properties will be removed on pasting the content in the editor.

For Example,

allowedStyleProps: ['color', 'margin']': This will allow only the style properties ‘color’ and ‘margin’ in each pasted element.

In the following example, the paste cleanup related settings are explained with its module configuration

import { RichTextEditor, Toolbar, HtmlEditor PasteCleanup } from '@syncfusion/ej2-richtexteditor';

RichTextEditor.Inject(Toolbar, HtmlEditor, PasteCleanup);

let defaultRTE: RichTextEditor = new RichTextEditor({
    value: ` <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>
        <p><b>Paste Cleanup properties:</b></p>
        <ul>
            <li>
                <p>prompt - specifies whether to enable the prompt when pasting in Rich Text Editor.</p>
            </li>
            <li>
                <p>plainText - specifies whether to paste as plain text or not in Rich Text Editor.</p>
            </li>
            <li>
                <p>keepFormat- specifies whether to keep or remove the format when pasting in Rich Text Editor.</p>
            </li>
            <li>
                <p>deniedTags - specifies the tags to restrict when pasting in Rich Text Editor.</p>
            </li>
            <li>
                <p>deniedAttributes - specifies the attributes to restrict when pasting in Rich Text Editor.</p>
            </li>
            <li>
                <p>allowedStyleProperties - specifies the allowed style properties when pasting in Rich Text Editor.</p>
            </li>
        </ul>`,
    toolbarSettings: {
        type: 'Expand'
    },
    pasteCleanupSettings: {
        prompt: true,
        plainText: false,
        keepFormat: false,
        deniedTags: ['a'],
        deniedAttrs: ['class', 'title', 'id'],
        allowedStyleProps: ['color', 'margin', 'font-size']
    }
    });
defaultRTE.appendTo('#defaultRTE');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='defaultRTE'>
        </div>
    </div>
</body>

</html>

Note: The Paste toolbar button action will not work and the clipboard will be restricted due to some limitations in the browser. Pasting copied contents into the Rich Text Editor can be done by using the Ctrl+V keyboard command.