Element Tiptap Editor

A WYSIWYG rich-text editor using tiptap2 and Element Plus for Vue3

that's easy to use, friendly to developers, fully extensible and clean in design.

🧊 Legacy

Element Tiptap 1.0

📔 Languages

English | 简体中文

🎄 Demo

👉https://leecason.github.io/element-tiptap

👾Code Sandbox

✨ Features

• 🎨Use element-plus components
• 💅Many out of box extensions (welcome to submit an issue for feature request👏)
• 🔖Markdown support
• 📘TypeScript support
• 🌐I18n support(en, zh, pl, ru, de, ko, es, zhtw, fr, ptbr, nl, he). welcome to contribute more languages
• 🎈Events you might use: create, transaction, focus, blur, destroy
• 🍀Fully extensible, you can customize editor extension and its menu button view
• 💻Also can control the behavior of the editor directly, customize the editor for yourself.

📦 Installation

NPM

yarn add element-tiptap

Or

npm install --save element-tiptap

Install plugin

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap';
// import ElementTiptap's styles
import 'element-tiptap/lib/style.css';
const app = createApp(App);
// use ElementPlus's plugin app.use(ElementPlus); // use this package's plugin app.use(ElementTiptapPlugin); // Now you register 'el-tiptap' component globally.
app.mount('#app');

Or

Partial import

<template>
  <el-tiptap ...></el-tiptap>
</template>

🚀 Usage

<template>
  <el-tiptap v-model:c :extensi />
</template>

📔 Props

extensions

Type: Array

You can use the necessary extensions. The corresponding command-buttons will be added by declaring the order of the extension.

All available extensions:

• Doc
• Text
• Paragraph
• Heading
• Bold
• Italic
• Strike
• Underline
• Link
• Image
• Iframe
• CodeBlock
• Blockquote
• BulletList
• OrderedList
• TaskList
• TextAlign
• Indent
• LineHeight
• HorizontalRule
• HardBreak
• History
• Table
• FormatClear
• Color
• Highlight
• Print
• Fullscreen
• SelectAll
• FontFamily
• FontSize
• CodeView

You can customize the extension. See Custom extensions.

placeholder

Type: string

Default: ''

When editor is empty, placeholder will display.

<el-tiptap placeholder="Write something …" />

content

Type: string

Default: ''

Editor's content

<el-tiptap :c @ />

or Use 'v-model'

<el-tiptap v-model:c />

output

Type: string

Default: 'html'

Output can be defined to 'html' or 'json'.

<el-tiptap output="json" />

further reading: prosemirror data structure

readonly

Type: boolean

Default: false

<el-tiptap readonly />

when readonly is true, editor is not editable.

spellcheck

Type: boolean

Default: false

<el-tiptap spellcheck> </el-tiptap>

Whether the content is spellcheck enabled.

width, height

Type: string | number

A string value with unit or a simple value (the default unit is px)：

<el-tiptap :width="700" height="100%"> </el-tiptap>

The above example will be converted to:

width: 700px;
height: 100%;

enableCharCount

Type: boolean

Default: true

Enables or disables the display of the character counter.

tooltip

Type: boolean

Default: true

Control if tooltips are shown when getting with mouse over the buttons from the toolbar.

locale

Specifies the editor i18n language.

<template>
  <el-tiptap :locale="en"></el-tiptap>
</template>

Available languages:

• en(default)
• zh
• pl by @FurtakM
• ru by @baitkul
• de by @Thesicstar
• ko by @Hotbrains
• es by @koas
• zh_tw by @eric0324
• fr by @LPABelgium
• pt_br by @valterleonardo
• nl by @Arne-Jan
• he by @shovalPMS

👽 Events

onCreate

<template>
  <el-tiptap @ />
</template>

onTransaction, onFocus, onBlur, onDestroy

The same as onCreate

🏗 Contributing

Please see CONTRIBUTING for details.

📝 Changelog

Changelog

📄 License

MIT

💝 Buy Me A Coffee

I am so happy that so many people like this project, and I will do better with your support.