Toast UI Editor for Vue 3

Vue 3 wrapper components for TOAST UI Editor - a powerful Markdown WYSIWYG editor.

🔥 Source Code Distribution

This package is distributed as source code rather than bundled files. This approach offers several advantages:

• Better tree-shaking: Your bundler can eliminate unused code more effectively
• Smaller bundle size: No duplicate dependencies or unnecessary code
• Consistent build process: The component is built with your project's settings
• Better debugging: Source maps align with your build process
• Customization: Easier to customize or extend the components

📋 Overview

This library provides Vue 3 components that wrap the Toast UI Editor, offering a seamless integration of this powerful Markdown editor into your Vue applications. The package includes two main components:

• Editor: A full-featured Markdown editor with WYSIWYG editing capabilities
• Viewer: A component to render Markdown content as HTML with the same styling as the editor

Key Features

• 📝 Markdown and WYSIWYG editing modes
• 🔄 Seamless switching between editing modes
• 🌙 Dark mode support
• 🖼️ Image upload handling
• 🔌 Plugin system for extended functionality
• 📊 Built-in support for charts, code highlighting, and more
• 🖥️ Fullscreen editing mode
• 🎨 Customizable toolbar and styling

📦 Installation

1# npm
2npm install @oeasenet/tui-editor
3
4# yarn
5yarn add @oeasenet/tui-editor
6
7# pnpm
8pnpm add @oeasenet/tui-editor

🚀 Usage

Global Registration

Register the components globally in your Vue application:

1// main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import TuiEditorPlugin from '@oeasenet/tui-editor'
5import '@oeasenet/tui-editor/styles' // Import the CSS
6
7const app = createApp(App)
8app.use(TuiEditorPlugin)
9app.mount('#app')

Local Registration

Import and use the components directly in your Vue components:

1<script setup>
2import { ref } from 'vue'
3import { Editor, Viewer } from '@oeasenet/tui-editor'
4import '@oeasenet/tui-editor/styles' // Import the CSS
5
6const content = ref('# Hello, Toast UI Editor!')
7</script>
8
9<template>
10  <Editor v-model="content" height="500px" />
11  <Viewer :value="content" />
12</template>

🔧 Components

Editor

A full-featured markdown editor with WYSIWYG editing capabilities.

Props

Name	Type	Default	Description
modelValue	String	''	Markdown content (v-model)
height	String	'500px'	Editor height
initialEditType	'markdown' | 'wysiwyg'	'wysiwyg'	Initial editor type
previewStyle	'tab' | 'vertical'	'vertical'	Preview style
toolbarItems	Array	See below	Toolbar items
plugins	Array	All plugins	Editor plugins
darkMode	Boolean	false	Enable dark mode
hideModeSwitch	Boolean	false	Hide mode switch tab
enhanced	Boolean	false	Enable enhanced UI features
allowFullScreen	Boolean	true	Allow fullscreen mode
language	String	undefined	Editor language
usageStatistics	Boolean	undefined	Enable usage statistics
useCommandShortcut	Boolean	undefined	Enable keyboard shortcuts
editorClasses	Object | String | Array	undefined	CSS classes for editor

Default toolbar items:

1[
2  ['heading', 'bold', 'italic', 'strike'],
3  ['hr', 'quote'],
4  ['ul', 'ol', 'task', 'indent', 'outdent'],
5  ['table', 'image', 'link'],
6  ['code', 'codeblock']
7]

Events

Name	Parameters	Description
update:modelValue	(value: string)	Emitted when content changes
addImage	({ blob, callback })	Emitted when an image is added. The callback should be called with the image URL
fullScreenChange	(value: boolean)	Emitted when fullscreen mode changes

Exposing

Name	Type	Description
editor	Editor | null	The underlying Toast UI Editor instance

Viewer

Renders markdown content as HTML with the same styling as the editor.

Props

Name	Type	Default	Description
value	String	Required	Markdown content to display
plugins	Array	All plugins	Viewer plugins
darkMode	Boolean	false	Enable dark mode

Exposing

Name	Type	Description
viewer	Viewer | null	The underlying Toast UI Viewer instance

🧩 Using Plugins

The library comes with several plugins pre-configured. By default, all plugins are enabled, but you can customize which ones to use:

1<script setup>
2import { ref } from 'vue'
3import { Editor, mapPlugins } from '@oeasenet/tui-editor'
4import '@oeasenet/tui-editor/styles'
5
6const content = ref('# Hello, Toast UI Editor!')
7// Only enable specific plugins
8const plugins = mapPlugins(['chart', 'codeSyntaxHighlight', 'colorSyntax'])
9</script>
10
11<template>
12  <Editor v-model="content" :plugins="plugins" />
13</template>

Available Plugins

• chart - Add chart diagrams using Chart.js
• codeSyntaxHighlight - Syntax highlighting for code blocks using Prism.js
• colorSyntax - Add color to text using syntax like {color:red}text{color}
• tableMergedCell - Support for merged cells in tables
• uml - UML diagrams using PlantUML

🎨 Customization

Dark Mode

Enable dark mode for both the Editor and Viewer components:

1<template>
2  <Editor v-model="content" :dark-mode="true" />
3  <Viewer :value="content" :dark-mode="true" />
4</template>

Custom Toolbar

Customize the toolbar items to show only the tools you need:

1<script setup>
2const customToolbar = [
3  ['heading', 'bold', 'italic'],
4  ['ul', 'ol', 'link']
5]
6</script>
7
8<template>
9  <Editor v-model="content" :toolbar-items="customToolbar" />
10</template>

Image Upload

Handle image uploads by listening to the addImage event:

1<script setup>
2function handleImageUpload({ blob, callback }) {
3  // Upload the image to your server
4  const uploadPromise = uploadImageToServer(blob)
5
6  uploadPromise.then(imageUrl => {
7    // Provide the image URL to the editor
8    callback(imageUrl, 'Image description')
9  })
10}
11</script>
12
13<template>
14  <Editor v-model="content" @add-image="handleImageUpload" />
15</template>

📝 License

MIT