Methods in Vue Block Editor component

18 Nov 201824 minutes to read

The Block Editor component provides a comprehensive set of public methods to programmatically interact with and manipulate the editor content. These methods enable adding, removing, updating, and managing blocks, as well as controlling selection, formatting, and other editor operations.

Block Management Methods

Adding a block

Add a new block to the editor at a specified position using the addBlock method. This method can also insert the block before or after a target block.

<template>
  <div id='container'>
    <ejs-blockeditor ref="blockEditor"></ejs-blockeditor>
    <div id="controls">
        <div class="button-group">
            <button @click="addBlock">Add Block</button>
        </div>
    </div>  
  </div>
</template>

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

export default {
    components: {
        'ejs-blockeditor': BlockEditorComponent,
    },
    data() {
        return {
        }
    },
    methods: {
    // Add a new paragraph block after a specific block
    addBlock: function() {
        const newBlock = {
            id: 'new-block',
            blockType: 'Paragraph',
            content: [
            {
                contentType: ContentType.Text,
                content: 'This is a newly added block'
            }
            ]
        };
        this.$refs.blockEditor.ej2Instances.addBlock(newBlock, 'block-2', true);
        }, // true = after, false = before
    }
};
</script>

Removing a block

Remove a block from the editor using the removeBlock method.

Moving a block

Move a block from one position to another within the editor using the moveBlock method.

Updating a block

Update the properties of an existing block with the updateBlock method. Only the specified properties are modified, while others remain unchanged. It returns true if the update was successful and false otherwise.

Getting a block

Retrieve a block model by its unique identifier using the getBlock method. It returns null if the block is not found.

Getting block count

Use the getBlockCount method to retrieve the total number of blocks in the editor.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor ref="blockEditor" :blocks="blocksData"></ejs-blockeditor>
    <div id="controls">
            <h3>Block Management Methods</h3>
            <div class="button-group">
                <button @click="addBlock">Add Block</button>
                <button @click="removeBlock">Remove Block</button>
                <button @click="getBlock">Get Block</button>
                <button @click="moveBlock">Move Block</button>
                <button @click="updateBlock">Update Block</button>
                <button @click="getBlockCount">Get Block Count</button>
            </div>
            <div id="output"></div>
        </div> 
  </div>
</template>

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

let blockEditor=ref(null);

const blocksData = [
     {
        id: 'block-1',
        blockType: 'Heading',
        properties: { level: 1},
        content: [
            {
                contentType: ContentType.Text,
                content: 'Sample Heading'
            }
        ]
    },
    {
        id: 'block-2',
        blockType: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This is a sample paragraph block.'
            }
        ]
    },
    {
        id: 'block-3',
        blockType: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This is another paragraph block.'
            }
        ]
    }
];

const addBlock= () => {
      const newBlock = {
        id: 'new-block',
        type: 'Paragraph',
        content: [
          {
            type: ContentType.Text,
            content: 'This is a newly added block'
          }
        ]
      };
      blockEditor.addBlock(newBlock, 'block-2', true);
      displayOutput(`Block added successfully with ID: ${newBlock.id}`);
    },
const removeBlock = () => {
      blockEditor.removeBlock('block-3');
      displayOutput('Block with ID "block-3" removed successfully');
    },
const getBlock = () => {
      const block = blockEditor.getBlock('block-1');
      if (block && block.content) {
        displayOutput(`Block found:\nID: ${block.id}\nType: ${block.type}\nContent: ${block.content[0].content}`);
      } else {
        displayOutput('Block with ID "block-1" not found');
      }
    },
 const moveBlock= () => {
      blockEditor.moveBlock('block-2', 'block-1');
      displayOutput('Block "block-2" moved successfully');
    },
 const updateBlock= () => {
      const success = blockEditor.updateBlock('block-2', { indent: 1, content: [{ content: 'Updated content' }] });
      const updatedBlock = blockEditor.getBlock('block-2');
      if (success && updatedBlock && updatedBlock.content) {
        displayOutput(`Block ${updatedBlock.id} updated successfully\nNew content: "${updatedBlock.content[0].content}" \nNew indent: ${updatedBlock.indent}`);
      } else {
        displayOutput('Failed to update block');
      }
    },
const getBlockCount= () => {
      const count = blockEditor.getBlockCount();
      displayOutput(`Total number of blocks: ${count}`);
    },

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


</script>

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

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" ref="blockEditor"></ejs-blockeditor>
    <div id="controls">
            <h3>Block Management Methods</h3>
            <div class="button-group">
                <button @click="addBlock">Add Block</button>
                <button @click="removeBlock">Remove Block</button>
                <button @click="getBlock">Get Block</button>
                <button @click="moveBlock">Move Block</button>
                <button @click="updateBlock">Update Block</button>
                <button @click="getBlockCount">Get Block Count</button>
            </div>
            <div id="output"></div>
        </div>  
  </div>
</template>

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

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
      blocksData : [
          {
            id: 'block-1',
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Sample Heading'
                }
            ]
        },
        {
            id: 'block-2',
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'This is a sample paragraph block.'
                }
            ]
        },
        {
            id: 'block-3',
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'This is another paragraph block.'
                }
            ]
        }
      ],
      
    };
  },
  methods: {
    addBlock: function() {
      const newBlock = {
        id: 'new-block',
        type: 'Paragraph',
        content: [
          {
            type: ContentType.Text,
            content: 'This is a newly added block'
          }
        ]
      };
      this.$refs.blockEditor.ej2Instances.addBlock(newBlock, 'block-2', true);
      this.displayOutput(`Block added successfully with ID: ${newBlock.id}`);
    },
    removeBlock: function() {
      this.$refs.blockEditor.ej2Instances.removeBlock('block-3');
      this.displayOutput('Block with ID "block-3" removed successfully');
    },
    getBlock: function() {
      const block = this.$refs.blockEditor.ej2Instances.getBlock('block-1');
      if (block && block.content) {
        this.displayOutput(`Block found:\nID: ${block.id}\nType: ${block.type}\nContent: ${block.content[0].content}`);
      } else {
        this.displayOutput('Block with ID "block-1" not found');
      }
    },
    moveBlock: function() {
      this.$refs.blockEditor.ej2Instances.moveBlock('block-2', 'block-1');
      this.displayOutput('Block "block-2" moved successfully');
    },
    updateBlock: function() {
      const success = this.$refs.blockEditor.ej2Instances.updateBlock('block-2', { indent: 1, content: [{ content: 'Updated content' }] });
      const updatedBlock = this.$refs.blockEditor.ej2Instances.getBlock('block-2');
      if (success && updatedBlock && updatedBlock.content) {
        this.displayOutput(`Block ${updatedBlock.id} updated successfully\nNew content: "${updatedBlock.content[0].content}" \nNew indent: ${updatedBlock.indent}`);
      } else {
        this.displayOutput('Failed to update block');
      }
    },
    getBlockCount: function() {
      const count = this.$refs.blockEditor.ej2Instances.getBlockCount();
      this.displayOutput(`Total number of blocks: ${count}`);
    },
    displayOutput: function(message) {
      var outputDiv = document.getElementById('output');
      if (outputDiv) {
          outputDiv.textContent = message;
      }
    }
  }
};
</script>

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

Selection and Cursor Methods

Setting text selection

Set the text selection within a specific content element using start and end positions with the setSelection method.

Setting cursor position

Place the cursor at a specific position within a block using the setCursorPosition method.

Getting selected blocks

Retrieve the currently selected blocks in the editor with the getSelectedBlocks method. It returns null if no blocks are selected.

Getting selection range

Get the current selection range in the editor using the getRange method. This method returns a Range object representing the selected text, or null if no selection is active.

Setting selection range

Set the selection range in the editor using the selectRange method. This method accepts a Range object that defines the start and end positions of the selection.

Selecting a block

Select a specific block in the editor using the selectBlock method.

Selecting all blocks

Select all blocks in the editor using the selectAllBlocks method.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor ref="blockEditor" :blocks="blocksData"></ejs-blockeditor>
    <div id="controls">
            <h3>Selection and Cursor Methods</h3>
            <div class="button-group">
                <button @click="setSelection">Set Selection</button>
                <button @click="setCursorPosition">Set Cursor Position</button>
                <button @click="getSelectedBlocks">Get Selected Blocks</button>
                <button @click="getRange">Get Selection Range</button>
                <button @click="selectRange">Set Selection Range</button>
                <button @click="selectBlock">Select Block</button>
                <button @click="selectAllBlocks">Select All Blocks</button>
            </div>
            <div id="output"></div>
        </div>
  </div>
</template>

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

let blockEditor=ref(null);

const blocksData = [
     {
        id: 'heading-block',
        blockType: 'Heading',
        properties: { level: 1},
        content: [
            {
                contentType: ContentType.Text,
                content: 'Welcome to Block Editor'
            }
        ]
    },
    {
        id: 'paragraph-1',
        blockType: 'Paragraph',
        content: [
            {
                id: 'paragraph1-content',
                contentType: ContentType.Text,
                content: 'This is the first paragraph with some sample text content for selection demonstration.'
            }
        ]
    },
    {
        id: 'paragraph-2',
        blockType: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This is the second paragraph that can be used for various selection operations.'
            }
        ]
    },
    {
        id: 'list-block',
        blockType: 'BulletList',
        content: [
            {
                contentType: ContentType.Text,
                content: 'First list item'
            }
        ]
    }
];

  const setSelection=() => {
      this.$refs.blockEditor.ej2Instances.setSelection('paragraph1-content', 5, 15);
      this.displayOutput('Text selection set in "paragraph-1" block from position 5 to 15');
    },
    const setCursorPosition=() => {
      this.$refs.blockEditor.ej2Instances.setCursorPosition('block-1', 10);
      this.displayOutput('Cursor position set at position 10 in "block-1"');
    },
    const getSelectedBlocks=() => {
      const selectedBlocks = this.$refs.blockEditor.ej2Instances.getSelectedBlocks();
      if (selectedBlocks && selectedBlocks.length > 0) {
        const blockInfo = selectedBlocks.map(block => `ID: ${block.id}, Type: ${block.blockType}`).join('\n');
        this.displayOutput(`Selected blocks (${selectedBlocks.length}):\n${blockInfo}`);
      } else {
        this.displayOutput('No blocks are currently selected');
      }
    },
    const getRange=() => {
      const range = this.$refs.blockEditor.ej2Instances.getRange();
      if (range) {
        const parent = range.startContainer.nodeType === 3 ? range.startContainer.parentElement : range.startContainer;
        this.displayOutput(`Current selection range: blockId: ${parent.closest('.e-block').id} Start Container: ${range.startContainer.nodeName} Start Offset: ${range.startOffset} End Container: ${range.endContainer.nodeName} End Offset: ${range.endOffset} Collapsed: ${range.collapsed}`);
      } else {
        this.displayOutput('No selection range found');
      }
    },
    const selectRange=() => {
      const paragraphElement = document.getElementById('paragraph-2');
      if (paragraphElement) {
        const range = document.createRange();
        const textNode = paragraphElement.querySelector('.e-block-content').firstChild;
        if (textNode) {
          range.setStart(textNode, 8);
          range.setEnd(textNode, 20);
          this.$refs.blockEditor.ej2Instances.selectRange(range);
          this.displayOutput('Custom selection range applied to "paragraph-2" (positions 8-20)');
        } else {
          this.displayOutput('Could not find text content in paragraph-2');
        }
      }
    },
    const selectBlock=() => {
      this.$refs.blockEditor.ej2Instances.selectBlock('block-1');
      this.displayOutput('Entire "block-1" selected');
    },
    const selectAllBlocks=() => {
      this.$refs.blockEditor.ej2Instances.selectAllBlocks();
      this.displayOutput('All blocks in the editor have been selected');
    };
    const displayOutput=(message) => {
      var outputDiv = document.getElementById('output');
      if (outputDiv) {
          outputDiv.textContent = message;
      }
    }

</script>

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

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" ref="blockEditor"></ejs-blockeditor>
    <div id="controls">
            <h3>Selection and Cursor Methods</h3>
            <div class="button-group">
                <button @click="setSelection">Set Selection</button>
                <button @click="setCursorPosition">Set Cursor Position</button>
                <button @click="getSelectedBlocks">Get Selected Blocks</button>
                <button @click="getRange">Get Selection Range</button>
                <button @click="selectRange">Set Selection Range</button>
                <button @click="selectBlock">Select Block</button>
                <button @click="selectAllBlocks">Select All Blocks</button>
            </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 : [
          {
            id: 'heading-block',
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Welcome to Block Editor'
                }
            ]
        },
        {
            id: 'paragraph-1',
            blockType: 'Paragraph',
            content: [
                {
                    id: 'paragraph1-content',
                    contentType: ContentType.Text,
                    content: 'This is the first paragraph with some sample text content for selection demonstration.'
                }
            ]
        },
        {
            id: 'paragraph-2',
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'This is the second paragraph that can be used for various selection operations.'
                }
            ]
        },
        {
            id: 'list-block',
            blockType: 'BulletList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'First list item'
                }
            ]
        }
      ]     
    };
  },
  methods: {
    setSelection: function() {
      this.$refs.blockEditor.ej2Instances.setSelection('paragraph1-content', 5, 15);
      this.displayOutput('Text selection set in "paragraph-1" block from position 5 to 15');
    },
    setCursorPosition: function() {
      this.$refs.blockEditor.ej2Instances.setCursorPosition('block-1', 10);
      this.displayOutput('Cursor position set at position 10 in "block-1"');
    },
    getSelectedBlocks: function() {
      const selectedBlocks = this.$refs.blockEditor.ej2Instances.getSelectedBlocks();
      if (selectedBlocks && selectedBlocks.length > 0) {
        const blockInfo = selectedBlocks.map(block => `ID: ${block.id}, Type: ${block.blockType}`).join('\n');
        this.displayOutput(`Selected blocks (${selectedBlocks.length}):\n${blockInfo}`);
      } else {
        this.displayOutput('No blocks are currently selected');
      }
    },
    getRange: function() {
      const range = this.$refs.blockEditor.ej2Instances.getRange();
      if (range) {
        const parent = range.startContainer.nodeType === 3 ? range.startContainer.parentElement : range.startContainer;
        this.displayOutput(`Current selection range: blockId: ${parent.closest('.e-block').id} Start Container: ${range.startContainer.nodeName} Start Offset: ${range.startOffset} End Container: ${range.endContainer.nodeName} End Offset: ${range.endOffset} Collapsed: ${range.collapsed}`);
      } else {
        this.displayOutput('No selection range found');
      }
    },
    selectRange: function() {
      const paragraphElement = document.getElementById('paragraph-2');
      if (paragraphElement) {
        const range = document.createRange();
        const textNode = paragraphElement.querySelector('.e-block-content').firstChild;
        if (textNode) {
          range.setStart(textNode, 8);
          range.setEnd(textNode, 20);
          this.$refs.blockEditor.ej2Instances.selectRange(range);
          this.displayOutput('Custom selection range applied to "paragraph-2" (positions 8-20)');
        } else {
          this.displayOutput('Could not find text content in paragraph-2');
        }
      }
    },
    selectBlock: function() {
      this.$refs.blockEditor.ej2Instances.selectBlock('block-1');
      this.displayOutput('Entire "block-1" selected');
    },
    selectAllBlocks: function() {
      this.$refs.blockEditor.ej2Instances.selectAllBlocks();
      this.displayOutput('All blocks in the editor have been selected');
    },
    displayOutput: function(message) {
      var outputDiv = document.getElementById('output');
      if (outputDiv) {
          outputDiv.textContent = message;
      }
    }
  }
};
</script>

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

Focus Management Methods

FocusIn

Use the focusIn method to programmatically set focus on the editor, making it ready for user input.

FocusOut

Use the focusOut method to programmatically remove focus from the editor. This clears any active selections and makes the editor inactive.

Formatting Methods

Executing toolbar action

Execute a built-in toolbar formatting command using the executeToolbarAction method. Use this to apply formatting such as bold, italic, or color to the selected text.

Enabling toolbar items

Enable specific items in the inline toolbar using the enableToolbarItems method. This method accepts a single item or an array of items to enable.

Disabling toolbar items

Disable specific items in the inline toolbar using the disableToolbarItems method. This method accepts a single item or an array of items to disable.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor ref="blockEditor" :blocks="blocksData"></ejs-blockeditor>
    <div id="controls">
        <h3>Formatting Methods</h3>
        <div class="button-group">
            <button @click="applyBold">Apply Bold</button>
            <button @click="applyColor">Apply Color</button>
            <button @click="enableToolbar">Enable Toolbar Items</button>
            <button @click="disableToolbar">Disable Toolbar Items</button>
        </div>
        <div class="instruction">
            <p><strong>Instructions:</strong> Select some text in the editor first, then click the formatting buttons to see the effects.</p>
        </div>
        <div id="output"></div>
    </div>
  </div>
</template>

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

let blockEditor=ref(null);

const blocksData = [
     {
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Formatting Demo'
                }
            ]
        },
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Select this text and apply different formatting options using the buttons below. You can make text bold or change colors for the text.'
                }
            ]
        },
        {
            blockType: 'BulletList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'List item for formatting demonstration'
                }
            ]
        }
];

const applyBold=()=> {
  blockEditor.executeToolbarAction(CommandName.Bold);
  displayOutput('Bold formatting applied to selected text');
};
const applyColor=()=> {
  blockEditor.executeToolbarAction(CommandName.Color, '#ff6b35');
  displayOutput('Orange color (#ff6b35) applied to selected text');
};
const enableToolbar=()=> {
  blockEditor.enableToolbarItems(['bold', 'italic', 'underline']);
  displayOutput('Toolbar items (bold, italic, underline) have been enabled');
};
disableToolbar: function(){
  blockEditor.disableToolbarItems(['bold', 'italic']);
  displayOutput('Toolbar items (bold, italic) have been disabled');
};
const displayOutput=(message)=> {
  var outputDiv = document.getElementById('output');
  if (outputDiv) {
      outputDiv.textContent = message;
  }
};

</script>

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

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" ref="blockEditor"></ejs-blockeditor>
    <div id="controls">
            <h3>Formatting Methods</h3>
            <div class="button-group">
                <button @click="applyBold">Apply Bold</button>
                <button @click="applyColor">Apply Color</button>
                <button @click="enableToolbar">Enable Toolbar Items</button>
                <button @click="disableToolbar">Disable Toolbar Items</button>
            </div>
            <div class="instruction">
                <p><strong>Instructions:</strong> Select some text in the editor first, then click the formatting buttons to see the effects.</p>
            </div>
            <div id="output"></div>
        </div>
  </div>
</template>

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

export default {
  components: {
    'ejs-blockeditor': BlockEditorComponent,
  },
  data() {
    return {
      blocksData : [
          {
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Formatting Demo'
                }
            ]
        },
        {
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Select this text and apply different formatting options using the buttons below. You can make text bold or change colors for the text.'
                }
            ]
        },
        {
            blockType: 'BulletList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'List item for formatting demonstration'
                }
            ]
        }
      ]     
    };
  },
  methods: {
    applyBold: function() {
      this.$refs.blockEditor.ej2Instances.executeToolbarAction(CommandName.Bold);
      this.displayOutput('Bold formatting applied to selected text');
    },
    applyColor: function() {
      this.$refs.blockEditor.ej2Instances.executeToolbarAction(CommandName.Color, '#ff6b35');
      this.displayOutput('Orange color (#ff6b35) applied to selected text');
    },
    enableToolbar: function() {
      this.$refs.blockEditor.ej2Instances.enableToolbarItems(['bold', 'italic', 'underline']);
      this.displayOutput('Toolbar items (bold, italic, underline) have been enabled');
    },
    disableToolbar: function(){
      this.$refs.blockEditor.ej2Instances.disableToolbarItems(['bold', 'italic']);
      this.displayOutput('Toolbar items (bold, italic) have been disabled');
    },
    displayOutput: function(message) {
      var outputDiv = document.getElementById('output');
      if (outputDiv) {
          outputDiv.textContent = message;
      }
    }
  }
};
</script>

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

Data Export Methods

Getting data as JSON

Export the editor content in JSON format using the getDataAsJson method. This method allows exporting all blocks or a specific block.

Getting data as HTML

Export the editor content in HTML format using the getDataAsHtml method. This method allows exporting all blocks or a specific block.

Rendering Blocks from JSON

Renders blocks from JSON data using the renderBlocksFromJson method. This method allows either replacing all existing content or inserting at the cursor position.

// Replace all existing content
const replaceAllBlocks = editor.renderBlocksFromJson(jsonData, true);

// Insert at cursor (default behavior)
// Insert at cursor without replacing existing blocks (default behavior)
const insertedAtCursor = editor.renderBlocksFromJson(jsonData);

// Insert after a specific block (only applicable when replace = false)
const insertedAfterTarget = editor.renderBlocksFromJson(jsonData, false, 'target-block-id');

Parsing HTML to Blocks

Convert an HTML string into an array of BlockModel objects using the parseHtmlToBlocks method. This method allows transforming HTML content into structured editor blocks.

// Parse HTML into block
const blocks: BlockModel[] = editor.parseHtmlToBlocks(html);

Printing editor content

Print the editor content using the print method. This action opens the browser’s print dialog with the current editor content.

Composition API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor ref="blockEditor" :blocks="blocksData"></ejs-blockeditor>
    <div id="controls">
            <h3>Data Export Methods</h3>
            <div class="button-group">
                <button @click="getJsonAll">Get All as JSON</button>
                <button @click="getJsonBlock">Get Block as JSON</button>
                <button @click="getHtmlAll">Get All as HTML</button>
                <button @click="getHtmlBlock">Get Block as HTML</button>
                <button @click="printContent">Print Content</button>
            </div>
            <div id="output"></div>
        </div>
  </div>
</template>

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

let blockEditor=ref(null);

const blocksData = [
     {
        id: 'title-block',
        blockType: 'Heading',
        properties: { level: 1},
        content: [
            {
                contentType: ContentType.Text,
                content: 'Document Export Demo'
            }
        ]
    },
    {
        id: 'intro-block',
        blockType: 'Paragraph',
        content: [
            {
                contentType: ContentType.Text,
                content: 'This document demonstrates the data export capabilities of the Block Editor. You can export content as JSON or HTML formats.'
            }
        ]
    },
    {
        id: 'feature-heading',
        blockType: 'Heading',
        properties: { level: 2},
        content: [
            {
                contentType: ContentType.Text,
                content: 'Export Features'
            }
        ]
    },
    {
        id: 'features-list',
        blockType: 'BulletList',
        content: [
            {
                contentType: ContentType.Text,
                content: 'JSON export for data processing'
            }
        ]
    },
    {
        id: 'features-list-2',
        blockType: 'BulletList',
        content: [
            {
                contentType: ContentType.Text,
                content: 'HTML export for web display'
            }
        ]
    },
    {
        id: 'features-list-3',
        blockType: 'BulletList',
        content: [
            {
                contentType: ContentType.Text,
                content: 'Print functionality for hard copies'
            }
        ]
    },
    {
        id: 'code-example',
        blockType: 'Code',
        content: [
            {
                contentType: ContentType.Text,
                content: 'const data = editor.getDataAsJson();\nconsole.log(data);'
            }
        ]
    }
];

const getJsonAll=()=> {
      const blockData = blockEditor.getDataAsJson();
      const formattedJson = JSON.stringify(blockData, null, 2);
      displayOutput(`Block "block-1" as JSON:\n\n${formattedJson}`);
    };
const getJsonBlock=()=> {
      const blockData = blockEditor.getDataAsJson('block-1');
      const formattedJson = JSON.stringify(blockData, null, 2);
      displayOutput(`Block "block-1" as JSON:\n\n${formattedJson}`);
    };
const getHtmlAll=()=> {
      const htmlData = blockEditor.getDataAsHtml();
      displayOutput(`All blocks as HTML:\n\n${htmlData}`);
    };
 const getHtmlBlock=()=> {
      const blockHtml = blockEditor.getDataAsHtml('block-2');
      displayOutput(`Block "block-2" as HTML:\n\n${blockHtml}`);
    };
 const printContent=()=> {
      blockEditor.print();
      displayOutput('Print dialog opened. Check for a new browser window/tab with the printable content.');
    };
const displayOutput=(message)=> {
    const outputDiv = document.getElementById('output');
    if (outputDiv) {
        outputDiv.textContent = message;
    };
}


</script>

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

Options API (~/src/App.vue)

<template>
  <div id='container'>
    <ejs-blockeditor :blocks="blocksData" ref="blockEditor"></ejs-blockeditor>
    <div id="controls">
            <h3>Data Export Methods</h3>
            <div class="button-group">
                <button @click="getJsonAll">Get All as JSON</button>
                <button @click="getJsonBlock">Get Block as JSON</button>
                <button @click="getHtmlAll">Get All as HTML</button>
                <button @click="getHtmlBlock">Get Block as HTML</button>
                <button @click="printContent">Print Content</button>
            </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 : [
          {
            id: 'title-block',
            blockType: 'Heading',
            properties: { level: 1},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Document Export Demo'
                }
            ]
        },
        {
            id: 'intro-block',
            blockType: 'Paragraph',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'This document demonstrates the data export capabilities of the Block Editor. You can export content as JSON or HTML formats.'
                }
            ]
        },
        {
            id: 'feature-heading',
            blockType: 'Heading',
            properties: { level: 2},
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Export Features'
                }
            ]
        },
        {
            id: 'features-list',
            blockType: 'BulletList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'JSON export for data processing'
                }
            ]
        },
        {
            id: 'features-list-2',
            blockType: 'BulletList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'HTML export for web display'
                }
            ]
        },
        {
            id: 'features-list-3',
            blockType: 'BulletList',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'Print functionality for hard copies'
                }
            ]
        },
        {
            id: 'code-example',
            blockType: 'Code',
            content: [
                {
                    contentType: ContentType.Text,
                    content: 'const data = editor.getDataAsJson();\nconsole.log(data);'
                }
            ]
        }
    ]     
    };
  },
  methods: {
    getJsonAll: function() {
      const blockData = this.$refs.blockEditor.ej2Instances.getDataAsJson();
      const formattedJson = JSON.stringify(blockData, null, 2);
      this.displayOutput(`Block "block-1" as JSON:\n\n${formattedJson}`);
    },
    getJsonBlock: function() {
      const blockData = this.$refs.blockEditor.ej2Instances.getDataAsJson('block-1');
      const formattedJson = JSON.stringify(blockData, null, 2);
      this.displayOutput(`Block "block-1" as JSON:\n\n${formattedJson}`);
    },
    getHtmlAll: function() {
      const htmlData = this.$refs.blockEditor.ej2Instances.getDataAsHtml();
      this.displayOutput(`All blocks as HTML:\n\n${htmlData}`);
    },
    getHtmlBlock: function() {
      const blockHtml = this.$refs.blockEditor.ej2Instances.getDataAsHtml('block-2');
      this.displayOutput(`Block "block-2" as HTML:\n\n${blockHtml}`);
    },
    printContent: function() {
      this.$refs.blockEditor.ej2Instances.print();
      this.displayOutput('Print dialog opened. Check for a new browser window/tab with the printable content.');
    },
    displayOutput: function(message) {
      var outputDiv = document.getElementById('output');
      if (outputDiv) {
          outputDiv.textContent = message;
      }
    }
  }
};
</script>

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