Element Tiptap

🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue2 (🚀 tiptap2 and Vue3 is in alpha)
Alternatives To Element Tiptap
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Quill34,8242,8951,52712 days ago76April 10, 20201,324bsd-3-clauseJavaScript
Quill is a modern WYSIWYG editor built for compatibility and extensibility.
Editor.js22,130371229 hours ago51June 22, 2022473apache-2.0TypeScript
A block-style editor with clean JSON output
Tiptap18,5131364 days ago198September 20, 2022245mitTypeScript
The headless editor framework for web artisans.
Trix17,512252343 days ago34March 29, 2022102mitJavaScript
A rich text editor for everyday writing
Tui.editor15,7942661474 days ago38December 12, 2019465mitTypeScript
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
Medium Editor15,7615011134 months ago125December 20, 2017344otherJavaScript
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
Tinymce12,7411,5048253 days ago153September 08, 20221,131mitTypeScript
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular
Pell11,6564122a year ago16December 05, 201868mitJavaScript
📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies
Summernote11,0665191002 days ago41October 14, 202174mitJavaScript
Super simple WYSIWYG editor
5 days ago7mitTypeScript
🍼 Plugin driven WYSIWYG markdown editor framework.
Alternatives To Element Tiptap
Select To Compare

Alternative Project Comparisons

ElTiptap logo

npm GitHub Release Date npm peer dependency version semantic-release GitHub

Element Tiptap Editor

A WYSIWYG rich-text editor using tiptap and Element UI for Vue.js

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

💥 2.0 is in alpha

Support Vue3, use tiptap2 and Element Plus, see here

📔 Languages

English | 简体中文

🎄 Demo


👾Code Sandbox

✨ Features

  • 🎨Use element-ui 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: init, transaction, focus, blur, paste, drop, update
  • 🍀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


yarn add element-tiptap


npm install --save element-tiptap

Install plugin

import Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// import ElementUI's styles
import 'element-ui/lib/theme-chalk/index.css';
// import this package's styles
import 'element-tiptap/lib/index.css';

// use ElementUI's plugin
// use this package's plugin
Vue.use(ElementTiptapPlugin, {
  /* plugin options */
// Now you register `'el-tiptap'` component globally.

Default plugin options:

  lang: "en", // see i18n
  spellcheck: true, // can be overwritten by editor prop


Partial import

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

import { ElementTiptap } from 'element-tiptap';

export default {
  components: {
    'el-tiptap': ElementTiptap,

🌐 I18n

You can declare when you install the plugin.

Vue.use(ElementTiptapPlugin, {
  lang: 'zh',

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.

🚀 Usage

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

import {
  // necessary extensions
} from 'element-tiptap';

export default {
  data () {
    // editor extensions
    // they will be added to menubar and bubble menu by the order you declare.
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
      // editor's content
      content: `
        <p>This Editor is awesome!</p>

📔 Props


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
  • ListItem
  • BulletList (use with ListItem)
  • OrderedList (use with ListItem)
  • TodoItem
  • TodoList (use with TodoItem)
  • TextAlign
  • Indent
  • LineHeight
  • HorizontalRule
  • HardBreak
  • TrailingNode
  • History
  • Table (use with TableHeader, TableCell, TableRow)
  • TableHeader
  • TableCell
  • TableRow
  • FormatClear
  • TextColor
  • TextHighlight
  • Preview
  • Print
  • Fullscreen
  • SelectAll
  • FontType
  • FontSize
  • CodeView (🆕)

You can find all extensions docs here.

You can customize the extension menu button view

  1. create your custom extension.
// create your extension file
import { Bold } from 'element-tiptap';

export default class CustomBold extends Bold {
  menuBtnView (editorContext) {
    // editorContext contains some properties that are useful to you, such as isActive, commands, etc
    // more detailed docs check this https://github.com/scrumpy/tiptap#editormenubar
    // this package append editor instance to editorContext
    return {
      component: CustomButton, // your component
      componentProps: { // bind to your component with v-bind
      componentEvents: { // bind to your component with v-on
  1. use custom extension in component
  <el-tiptap :extensions="extensions" />

import CustomBold from '...'; // import your extension

export default {
  data () {
    return {
      extensions: [
        new CustomBold(),

Here is the example of how to create your extension button view (an extension can also render multiple menu buttons).


Type: Object

Default: {}

Tiptap Editor properties (passed to the constructor).

see the full list of properties here.

editorProps is a powerful prop in this list, you can use this prop to control the behavior of the editor directly, customize the editor for yourself.

❗not available properties❗(they are used in this package):

  • content
  • editable
  • useBuiltInExtensions
  • extensions
  • onInit
  • OnFocus
  • onBlur
  • onUpdate


Type: string

Default: ''

When editor is empty, placeholder will display.

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


Type: string

Default: ''

Editor's content

<el-tiptap :content="content" @onUpdate="onEditorUpdate" />

or Use 'v-model'

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


Type: string

Default: 'html'

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

<el-tiptap output="json" />

further reading: prosemirror data structure


Type: boolean

Default: false

<el-tiptap :readonly="true" />

when readonly is true, editor is not editable.


Type: boolean

Default: plugin spellcheck option value

<el-tiptap :spellcheck="true"> </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%;


Type: boolean

Default: true

Enables or disables the display of the menubar.


Type: boolean

Default: true

Enables or disables the display of the character counter.


Type: boolean

Default: true

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


Type: string

Default: plugin lang option value

<el-tiptap lang="zh"> </el-tiptap>

Specifies the editor i18n language.

👽 Events


  <el-tiptap @onInit="onInit" />

export default {
  methods: {
     * the tiptap editor instance
     * see https://tiptap.scrumpy.io/docs/guide/editor.html
    onInit ({ editor }) {


Transaction, Focus, Blur, Paste, Drop

The same as init

⚗️ Slots


You can customize the menubar and will receive some properties through a scoped slot.

properties: scrumpy/tiptap

<el-tiptap v-model="content" :extensions="extensions">
  <!-- new syntax for slot since Vue 2.6.0
  see: https://vuejs.org/v2/guide/components-slots.html -->
  <template #menubar="{ commands, isActive }">
    <!--You can render custom menu buttons.-->
      :class="{ 'is-active': isActive.bold() }"


Customize the bubble menu like menubar.

properties: scrumpy/tiptap

<el-tiptap v-model="content" :extensions="extensions">
  <template #menububble="{ commands, isActive }">
      :class="{ 'is-active': isActive.bold() }"


Footer of the editor, after the editor content.

🏗 Contributing

Please see CONTRIBUTING for details.

📝 Changelog


📄 License


💝 Buy Me A Coffee

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

reward Buy Me A Coffee

Popular Editor Projects
Popular Wysiwyg Projects
Popular Text Editors Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Element Ui
Wysiwyg Editor
Rich Text
Rich Text Editor