Rich Text Editor For Vue.js – tiptap

Install & Download:

# Yarn
$ yarn add tiptap
# NPM
$ npm install tiptap --save

Description:

A renderless (fully customizable) and extendable WYSIWYG rich-text editor for Vue.js applications.

This is the 1# rich-text editor for Vue.js. Based on Prosemirror.

Basic Usage:

1. Import components of your choice into the project.

• Editor: Core Class
• EditorContent: Core Component
• EditorMenuBar: Basic Menu Bar
• EditorMenuBubble: Shows Menu Bar in a bubble attached to the selected text
• EditorFloatingMenu: Shows Menu Bar in floating panel

import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble, EditorFloatingMenu } from 'tiptap';

2. Add the EditorContent component to the template.

<template>
  <editor-content :editor="editor" />
</template>

3. Register the component and create a basic editor.

export default {
  components: {
    EditorContent,
  },
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    this.editor = new Editor({
      content: '<p>Default Content Here</p>',
    })
  }
}

4. All possible options for the editor.

editorProps: {},
editable: true,
autoFocus: null,
extensions: [],
content: '',
topNode: 'doc',
emptyDocument: {
  type: 'doc',
  content: [{
    type: 'paragraph',
  }],
},
useBuiltInExtensions: true,
disableInputRules: false,
disablePasteRules: false,
dropCursor: {},
parseOptions: {},
injectCSS: true,
onInit: () => {},
onTransaction: () => {},
onUpdate: () => {},
onFocus: () => {},
onBlur: () => {},
onPaste: () => {},
onDrop: () => {},

5. Install and import extensions. All possible extensions:

• Blockquote
• CodeBlock
• HardBreak
• Heading
• OrderedList
• BulletList
• ListItem
• TodoItem
• TodoList
• Bold
• Code
• Italic
• Link
• Strike
• Underline
• History

# Yarn
$ yarn add tiptap-extensions
# NPM
$ npm i tiptap-extensions --save

import { Heading, ... } from 'tiptap-extensions'

Previews:

Classic

Inline Mode

Floating Menu

Changelog:

v1.27.1 (04/24/2020)

• isActive() works with multiple attributes now
• change registerPlugin to add plugin after Extensions plugins
• update dependencies