Paste Clean-up in Vue Block Editor component

17 Dec 202520 minutes to read

The Block Editor component provides robust paste clean-up functionalities to ensure that pasted content integrates seamlessly and maintains consistency with the editor’s styling and structure. This helps in removing unwanted formatting, scripts, or elements often copied from external sources like web pages or word processors.

You can configure the paste behavior using the pasteCleanupSettings property, which allows you to define how content is handled when pasted into the editor.

Configuring allowed styles

The allowedStyles property lets you define which CSS styles are permitted in pasted content. Any style not in this list is stripped out, ensuring that only desired visual attributes are preserved.

By default, following styles are allowed:

[‘font-weight’, ‘font-style’, ‘text-decoration’, ‘text-transform’].

In the below example, only font-weight and font-style styles will be retained from the pasted content. All other inline styles will be removed.

Setting denied tags

The deniedTags property specifies a list of HTML tags to be removed from pasted content. This is useful for stripping potentially problematic elements like <script> or <iframe> tags. By default, this property is an empty array, so no tags are removed.

In the below example, any <script> or <iframe> tags found in the pasted content will be removed, preventing unwanted behavior or styling issues.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :pasteCleanupSettings="pasteCleanupSettings" :afterPasteCleanup="afterPasteCleanup"></ejs-blockeditor>
    <div id="controls">
        <h4>Test Content to Copy and Paste:</h4>
        <div class="test-content">
            <div id="sampleContent" contenteditable="true">
                <h2 style="color: red; font-weight: bold; font-size: 24px;">Formatted Heading</h2>
                <p style="background-color: yellow; font-style: italic;">
                    This is a <span style="font-weight: bold;">bold paragraph</span> with 
                    <span style="color: blue; font-style: italic;">italic text</span> and 
                    <span style="text-decoration: underline;">underlined content</span>.
                </p>
                <script> console.log('This script should be removed'); </script>
                <iframe src="about:blank" width="100" height="50"></iframe>
                <div style="border: 1px solid black; padding: 10px;">
                    <span style="font-weight: 600;">Heavy text</span> and 
                    <span style="color: green; font-size: 18px;">colored text</span>
                </div>
            </div>
        </div>
        <div id="output"></div>
    </div>
  </div>
</template>

<script setup>
import { BlockEditorComponent as EjsBlockeditor, AfterPasteCleanupEventArgs } from "@syncfusion/ej2-vue-blockeditor";

const blocksData = [
    {
        id: 'demo-block',
        blockType: 'Paragraph'
    }
];
const pasteCleanupSettings= {
    allowedStyles: ['text-decoration'],
    deniedTags: ['script', 'iframe']
};
const afterPasteCleanup= (args: AfterPasteCleanupEventArgs) => {
    displayOutput(`After Paste Event: Processed content length: ${args.content.length} characters`);
};
const displayOutput=(message) => {
    const outputDiv = document.getElementById('output');
    if (outputDiv) {
        outputDiv.textContent = message;
    }
};
onMounted(() => {
      displayOutput(`Paste Cleanup Settings Active: 
      - Keep Format: ${pasteSettings.keepFormat} 
      - Plain Text: ${pasteSettings.plainText} 

      Copy content from the test area above and paste it into the editor to see the cleanup in action.`);
    });

</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :pasteCleanupSettings="pasteCleanupSettings" :afterPasteCleanup="afterPasteCleanup"></ejs-blockeditor>
    <div id="controls">
        <h4>Test Content to Copy and Paste:</h4>
        <div class="test-content">
            <div id="sampleContent" contenteditable="true">
                <h2 style="color: red; font-weight: bold; font-size: 24px;">Formatted Heading</h2>
                <p style="background-color: yellow; font-style: italic;">
                    This is a <span style="font-weight: bold;">bold paragraph</span> with 
                    <span style="color: blue; font-style: italic;">italic text</span> and 
                    <span style="text-decoration: underline;">underlined content</span>.
                </p>
                <script> console.log('This script should be removed'); </script>
                <iframe src="about:blank" width="100" height="50"></iframe>
                <div style="border: 1px solid black; padding: 10px;">
                    <span style="font-weight: 600;">Heavy text</span> and 
                    <span style="color: green; font-size: 18px;">colored text</span>
                </div>
            </div>
        </div>
        <div id="output"></div>
    </div>
  </div>
</template>

<script>
import { BlockEditorComponent } from "@syncfusion/ej2-vue-blockeditor";

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
      blocksData : [
          {
              id: 'demo-block',
              blockType: 'Paragraph'
          }
      ],
      pasteCleanupSettings: {
          allowedStyles: ['text-decoration'],
          deniedTags: ['script', 'iframe']
      },
      afterPasteCleanup: (args) => {
          this.displayOutput(`After Paste Event: Processed content length: ${args.content.length} characters`);
      }
    };
  },
  methods: {
    displayOutput :function(message) {
      var outputDiv = document.getElementById('output');
      if (outputDiv) {
          outputDiv.textContent = message;
      }
    }
  },
  mounted() {
    this.displayOutput(`Paste Cleanup Settings Active:
      - Allowed Styles: ['text-decoration']
      - Denied Tags: ['script', 'iframe']

      Copy content from the test area above and paste it into the editor to see the cleanup in action.`);
  }
};
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>

Disable Keep format

By default, the editor retains the formatting of pasted content (e.g., bold, italics, links). You can disable this by setting the keepFormat property to false. When disabled, the editor primarily pastes content as plain text, regardless of the allowedStyles configuration.

Allowing plain text

To paste content as plain text, stripping all HTML tags and inline styles, set the plainText property to true in pasteCleanupSettings. This ensures that only raw text is inserted, which is ideal for maintaining strict content consistency. By default, this property is false.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :pasteCleanupSettings="pasteCleanupSettings" :afterPasteCleanup="afterPasteCleanup"></ejs-blockeditor>
    <div id="controls">
        <h4>Test Content to Copy and Paste:</h4>
        <div class="test-content">
            <div id="sampleContent" contenteditable="true">
                <h2 style="color: red; font-weight: bold; font-size: 24px;">Formatted Heading</h2>
                <p style="background-color: yellow; font-style: italic;">
                    This is a <span style="font-weight: bold;">bold paragraph</span> with 
                    <span style="color: blue; font-style: italic;">italic text</span> and 
                    <span style="text-decoration: underline;">underlined content</span>.
                </p>
                <div style="border: 1px solid black; padding: 10px;">
                    <span style="font-weight: 600;">Heavy text</span> and 
                    <span style="color: green; font-size: 18px;">colored text</span>
                </div>
            </div>
        </div>
        <div id="output"></div>
    </div>
  </div>
</template>

<script setup>
import { BlockEditorComponent as EjsBlockeditor  } from "@syncfusion/ej2-vue-blockeditor";

const blocksData = [
    {
        blockType: 'Paragraph'
    }
];
const pasteCleanupSettings= {
        keepFormat: false,
        plainText: true,
    };
const afterPasteCleanup= (args) => {
    displayOutput(`After Paste Event: Processed content length: ${args.content.length} characters`);
};

const displayOutput=(message) => {
    const outputDiv = document.getElementById('output');
    if (outputDiv) {
        outputDiv.textContent = message;
    }
}

onMounted(() => {
      displayOutput(`Paste Cleanup Settings Active: 
      - Keep Format: ${pasteSettings.keepFormat} 
      - Plain Text: ${pasteSettings.plainText} 

      Copy content from the test area above and paste it into the editor to see the cleanup in action.`);
    });
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" :pasteCleanupSettings="pasteCleanupSettings" :afterPasteCleanup="afterPasteCleanup"></ejs-blockeditor>
    <div id="controls">
        <h4>Test Content to Copy and Paste:</h4>
        <div class="test-content">
            <div id="sampleContent" contenteditable="true">
                <h2 style="color: red; font-weight: bold; font-size: 24px;">Formatted Heading</h2>
                <p style="background-color: yellow; font-style: italic;">
                    This is a <span style="font-weight: bold;">bold paragraph</span> with 
                    <span style="color: blue; font-style: italic;">italic text</span> and 
                    <span style="text-decoration: underline;">underlined content</span>.
                </p>
                <div style="border: 1px solid black; padding: 10px;">
                    <span style="font-weight: 600;">Heavy text</span> and 
                    <span style="color: green; font-size: 18px;">colored text</span>
                </div>
            </div>
        </div>
        <div id="output"></div>
    </div>
  </div>
</template>

<script>
import { BlockEditorComponent, ContentType, AfterPasteEventArgs  } from "@syncfusion/ej2-vue-blockeditor";

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
      blocksData : [
          {
              blockType: 'Paragraph'
          }
      ],
      pasteCleanupSettings: {
          keepFormat: false,
          plainText: true,
      },
      afterPasteCleanup: (args) => {
          this.displayOutput(`After Paste Event: Processed content length: ${args.content.length} characters`);
      }
    };
  },
  methods: {
    displayOutput :function(message) {
      var outputDiv = document.getElementById('output');
      if (outputDiv) {
          outputDiv.textContent = message;
      }
    }
  },
  mounted() {
    this.displayOutput(`Paste Cleanup Settings Active: 
      - Keep Format: ${pasteSettings.keepFormat} 
      - Plain Text: ${pasteSettings.plainText} 

      Copy content from the test area above and paste it into the editor to see the cleanup in action.`);
  }
};
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/fluent2.css';
  @import '../node_modules/@syncfusion/ej2-blockeditor/styles/fluent2.css';
</style>

Events

The following events are available when pasting content into the editor.

Name	Args	Description
beforePasteCleanup	BeforePasteCleanupEventArgs	Triggers before the content is pasted into the editor.
afterPasteCleanup	AfterPasteCleanupEventArgs	Triggers after the content is pasted into the editor.

Below snippet demonstrates how to configure above events in the editor.

<ejs-blockeditor (beforePasteCleanup)="onBeforePasteCleanup()" />

<ejs-blockeditor (afterPasteCleanup)="onAfterPasteCleanup()" />