Implement Syncfusion Vue BlockEditor component for block-based content editing with rich text, images, tables, and interactive blocks. Use this skill ALWAYS when user needs block editor, notion-style editor, content blocks, rich text blocks, document editor with blocks, modular content editor, or mentions @syncfusion/ej2-vue-blockeditor, BlockEditor, block-based editing, content management editor. Covers all 14 block types, 5 content types, drag-and-drop, menus, methods, events, and Composition API patterns.
The Syncfusion Vue BlockEditor is a powerful block-based content editor that enables users to create, format, and organize content using various block types. This skill guides you through implementing the BlockEditor component with Vue 3 Composition API, covering all 14 block types, menus, methods, events, and advanced features.
The Vue BlockEditor component provides:
/), Context Menu (right-click), Block Action Menu, Inline Toolbar📄 Read: references/getting-started.md
@syncfusion/ej2-vue-blockeditor)<script setup>)📄 Read: references/block-types.md
📄 Read: references/inline-content.md
users array📄 Read: references/typography-blocks.md
📄 Read: references/list-blocks.md
isChecked state📄 Read: references/nested-blocks.md
parentId)isExpanded state configuration📄 Read: references/special-blocks.md
codeBlockSettings (languages, defaultLanguage)imageBlockSettings (saveUrl, path, maxFileSize, allowedTypes)📄 Read: references/editor-menus.md
/ trigger) - commandMenuSettingscontextMenuSettingsblockActionMenuSettingsinlineToolbarSettings📄 Read: references/methods-api.md
addBlock(), removeBlock(), updateBlock(), moveBlock()setSelection(), getSelectedBlocks(), selectBlock(), selectAllBlocks()setCursorPosition(), focusIn(), focusOut()getDataAsJson(), getDataAsHtml(), print()executeToolbarAction(), enableToolbarItems(), disableToolbarItems()parseHtmlToBlocks(), renderBlocksFromJson()📄 Read: references/events-lifecycle.md
blockChangedblockDragStart, blockDragging, blockDroppedfocus, blurselectionChangedbeforePasteCleanup, afterPasteCleanupbeforeFileUpload, fileUploading, fileUploadSuccess, fileUploadFailedenableDragAndDroppasteCleanupSettings (allowedStyles, deniedTags, keepFormat, plainText)undoRedoStack (default: 30)keyConfig customizationreadOnlyenablePersistencecssClassheight, widthlocale property with L10nenableRtlenableHtmlSanitizer (XSS prevention), enableHtmlEncode<template>
<div>
<ejs-blockeditor
ref="blockEditor"
:blocks="blocks"
:users="users"
:enableDragAndDrop="true"
@blockChanged="onBlockChanged"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { BlockEditorComponent as EjsBlockeditor, ContentType } from '@syncfusion/ej2-vue-blockeditor';
const blockEditor = ref(null);
const blocks = [
{
id: 'heading-1',
blockType: 'Heading',
properties: { level: 1 },
content: [
{ contentType: ContentType.Text, content: 'Welcome to BlockEditor' }
]
},
{
id: 'intro-para',
blockType: 'Paragraph',
content: [
{ contentType: ContentType.Text, content: 'Create content using blocks. Type ' },
{ contentType: ContentType.Text, content: '/', properties: { styles: { bold: true } } },
{ contentType: ContentType.Text, content: ' for commands.' }
]
},
{
id: 'checklist-1',
blockType: 'Checklist',
properties: { isChecked: false },
content: [
{ contentType: ContentType.Text, content: 'Complete the tutorial' }
]
}
];
const users = [
{ id: 'user1', user: 'John Doe' },
{ id: 'user2', user: 'Jane Smith' }
];
const onBlockChanged = (args) => {
console.log('Block changed:', args.changes);
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-blockeditor/styles/material.css';
</style>