tiptap
A renderless and extendable rich-text editor for Vue.js
Why I built tiptap
I was looking for a text editor for Vue.js and found some solutions that didn't really satisfy me. The editor should be easy to extend and not based on old dependencies such as jQuery. For React there is already a great editor called Slate.js, which impresses with its modularity. I came across Prosemirror and decided to build on it. Prosemirror is a toolkit for building rich-text editors that are already in use at many well-known companies such as Atlassian or New York Times.
What does renderless mean?
With renderless components you'll have (almost) full control over markup and styling. I don't want to tell you what a menu should look like or where it should be rendered in the DOM. That's all up to you. There is also a good article about renderless components by Adam Wathan.
How is the data stored under the hood?
You can save your data as a raw HTML string or can get a JSON-serializable representation of your document. And of course, you can pass these two types back to the editor.
Examples
To check out some live examples, visit tiptap.scrumpy.io.
Installation
npm install tiptap or
yarn add tiptap Basic Setup
<template> <editor-content :editor="editor" /> </template> <script> // Import the editor import { Editor, EditorContent } from 'tiptap' export default { components: { EditorContent, }, data() { return { editor: null, } }, mounted() { this.editor = new Editor({ content: '<p>This is just a boring paragraph</p>', }) }, beforeDestroy() { this.editor.destroy() }, } </script>Editor Properties
| Property | Type | Default | Description |
|---|---|---|---|
content | Object|String | null | The editor state object used by Prosemirror. You can also pass HTML to the content slot. When used both, the content slot will be ignored. |
editorProps | Object | {} | A list of Prosemirror editorProps. |
editable | Boolean | true | When set to false the editor is read-only. |
autoFocus | Boolean | false | Focus the editor on init. |
extensions | Array | [] | A list of extensions used, by the editor. This can be Nodes, Marks or Plugins. |
useBuiltInExtensions | Boolean | true | By default tiptap adds a Doc, Paragraph and Text node to the Prosemirror schema. |
dropCursor | Object | {} | Config for prosemirror-dropcursor. |
parseOptions | Object | {} | A list of Prosemirror parseOptions. |
onInit | Function | undefined | This will return an Object with the current state and view of Prosemirror on init. |
onFocus | Function | undefined | This will return an Object with the event and current state and view of Prosemirror on focus. |
onBlur | Function | undefined | This will return an Object with the event and current state and view of Prosemirror on blur. |
onUpdate | Function | undefined | This will return an Object with the current state of Prosemirror, a getJSON() and getHTML() function and the transaction on every change. |
Editor Methods
| Method | Arguments | Description |
|---|---|---|
setContent | content, emitUpdate, parseOptions | Replace the current content. You can pass an HTML string or a JSON document. emitUpdate defaults to false. parseOptions defaults to those provided in constructor. |
clearContent | emitUpdate | Clears the current content. emitUpdate defaults to false. |
setOptions | options | Overwrites the current editor properties. |
registerPlugin | plugin | Register a Prosemirror plugin. |
getJSON | – | Get the current content as JSON. |
getHTML | – | Get the current content as HTML. |
focus | – | Focus the editor. |
blur | – | Blur the editor. |
destroy | – | Destroy the editor. |
Components
| Name | Description |
|---|---|
<editor-content /> | Here the content will be rendered. |
<editor-menu-bar /> | Here a menu bar will be rendered. |
<editor-menu-bubble /> | Here a menu bubble will be rendered. |
<editor-floating-menu /> | Here a floating menu will be rendered. |
EditorMenuBar
The <editor-menu-bar /> component is renderless and will receive some properties through a scoped slot.
| Property | Type | Description |
|---|---|---|
commands | Array | A list of all commands. |
isActive | Object | An object of functions to check if your selected text is a node or mark. `isActive.{node |
getMarkAttrs | Function | A function to get all mark attributes of your selection. |
focused | Boolean | Whether the editor is focused. |
focus | Function | A function to focus the editor. |
Example
<template> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"> <div> <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold"> Bold </button> <button :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })"> H2 </button> </div> </editor-menu-bar> </template>
