Rich Text Editor For Vue.js – tiptap

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:

Rich Text Editor For Vue.js - tiptap-min

Classic

tiptap Inline Mode

Inline Mode

tiptap Floating Menu

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

Download Details:

Author: heyscrumpy

Live Demo: https://tiptap.scrumpy.io/#/

Download Link: https://github.com/heyscrumpy/tiptap/archive/master.zip

Official Website: https://github.com/heyscrumpy/tiptap

Install & Download:

# Yarn
$ yarn add tiptap

# NPM
$ npm install tiptap --save

Add Comment