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
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