Toast UI Editor for Vue 3

This library serves as a Vue 3 wrapper for the incredible Toast UI Markdown Editor.

⚠️ The library is still in development and limited in its functionalities - however the core features are working.

Installation

npm install --save tui-editor-vue3

Usage

Editor

Import the Editor component and the CSS.

<script setup>
import { ref } from 'vue'
import { Editor } from 'tui-editor-vue3'
import 'tui-editor-vue3/dist/style.css'

const content = ref('# Hello, world!')
</script>

<template>
  <Editor v-model="content" />
</template>

Editor Props

| Name | Type | Default | Description | | ------------------ | ------------------------------------ | ------------ | ----------- | | allowFullScreen | boolean | true | Custom addition to allow fullscreen mode | | darkMode | boolean | false | Boolean value to set dark mode | | editorClasses | object \| string \| string[] | undefined | Classes to bind to the editor element | | enhanced | boolean | true | Custom additions to the CSS both in "normal" and fullscreen mode | | height | string | '500px' | | hideModeSwitch | boolean | undefined | Defines whether to hide the mode switch tab | | initialEditType | EditorType | 'markdown' | Sets the editor type on initial load | | language | string | undefined | Sets the language of the editor | | plugins | PluginName[] | [] | | previewStyle | PreviewStyle | 'tab' | Sets the preview style in the markdown mode | | toolbarItems | (string \| ToolbarItemOptions)[][] | * | | usageStatistics | boolean | undefined | | useCommandShortcut | boolean | undefined | | modelValue** | string | undefined | Used with v-model |

• * [['heading', 'bold', 'italic'], ['quote', 'ul', 'ol'], ['table', 'link']]

Editor Events

| Name | Parameters | Description | | ----------------- | ---------- | ----------------- | | update:modelValue | string | Used with v-model, called with input | | addImage | * | Called when using image upload | | fullScreenChange | boolean | Called when toggling fullscreen mode |

• * { blob, callback }: { blob: File | Blob, callback: HookCallback }

Viewer

Import the Viewer component and the CSS.

<script setup>
import { ref } from 'vue'
import { Viewer } from 'tui-editor-vue3'
import 'tui-editor-vue3/dist/style.css'

const content = ref('# Hello, world!')
</script>

<template>
  <Viewer :value="content" />
</template>

Viewer Props

| Name | Type | Default | Description | | -------- | -------------- | ----------- | ----------- | | darkMode | boolean | false | Boolean value to set dark mode | | plugins | PluginName[] | [] | | value | string | undefined | The value to render with the viewer |

Notes

This library is still in development and limited in its functionalities - in time I will put some more work into it to make it more feature complete.

License

Toast UI Editor for Vue 3 is open-sourced software licensed under the MIT license.