Tiptap-lib NPM

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

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

📔 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, zh_tw, fr, pt_br, 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

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');

Partial import

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

<script setup>
import { ElementTiptap } from 'element-tiptap';
</script>

🚀 Usage

<template>
  <el-tiptap v-model:content="content" :extensions="extensions" />
</template>

<script setup>
import { ref } from 'vue';
import {
  // necessary extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  BulletList,
  OrderedList,
} from 'element-tiptap';

// editor extensions
// they will be added to menubar and bubble menu by the order you declare.
const extensions = [
  Doc,
  Text,
  Paragraph,
  Heading.configure({ level: 5 }),
  Bold.configure({ bubble: true }), // render command-button in bubble menu.
  Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
  Italic,
  Strike,
  BulletList,
  OrderedList,
];

// editor's content
const content = ref(`
  <h1>Heading</h1>
  <p>This Editor is awesome!</p>
`);
</script>

📔 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 find all extensions docs here.

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 :content="content" @onUpdate="onEditorUpdate" />

or Use 'v-model'

<el-tiptap v-model:content="content" />

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>

<script setup>
import { ElementTiptap } from 'element-tiptap';
import en from 'element-tiptap/lib/locales/en';
</script>

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

Welcome contribution.

👽 Events

onCreate

<template>
  <el-tiptap @onCreate="onCreate" />
</template>

<script setup>
/**
 * the tiptap editor instance
 * see https://tiptap.dev/api/editor
 */
const onCreate = ({ editor }) => {
  // ...
};
</script>