tiptap

A renderless and extendable rich-text editor for Vue.js

Package	Version	Downloads	Description
tiptap			The core package including the vue component.
tiptap-extensions			A collection of some basic extensions for tiptap.
tiptap-commands			A collection of commands. These are mostly used for extensions.
tiptap-utils			A collection of utility functions.

Examples

To check out some live examples, visit tiptap.scrumpy.io.

Installation

npm install tiptap

Basic Setup

<template>
  <editor>
    <!-- Add HTML to the scoped slot called "content" -->
    <div slot="content" slot-scope="props">
      <p>Hi, I'm just a boring paragraph</p>
    </div>
  </editor>
</template>

<script>
// Import the editor
import { Editor } from 'tiptap'

export default {
  components: {
    Editor,
  },
}
</script>

Editor Properties

Property	Type	Default	Description
editable	Boolean	true	When set to false the editor is read-only.
doc	Object	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.
extensions	Array	[]	A list of extensions used, by the editor. This can be Nodes, Marks or Plugins.
@update	Function	undefined	This will return the current state of Prosemirror on every change.

Extensions

By default the editor will only support some boring paragraphs. Other nodes and marks are available as extensions. There is a package called tiptap-extensions with the most basic nodes, marks and plugins.

Available Extensions

<template>
  <editor :extensions="extensions">
    <div slot="content" slot-scope="props">
      <h1>Yay Headlines!</h1>
      <p>All these <strong>cool tags</strong> are working now.</p>
    </div>
  </editor>
</template>

<script>
// Import the editor
import { Editor } from 'tiptap'
import {
  Blockquote,
  BulletList,
  CodeBlock,
  HardBreak,
  Heading,
  ListItem,
  OrderedList,
  TodoItem,
  TodoList,
  Bold,
  Code,
  Italic,
  Link,
} from 'tiptap-extensions'

export default {
  components: {
    Editor,
  },
  data() {
    return {
      extensions: [
        new Blockquote(),
        new BulletList(),
        new CodeBlock(),
        new HardBreak(),
        new Heading(),
        new ListItem(),
        new OrderedList(),
        new TodoItem(),
        new TodoList(),
        new Bold(),
        new Code(),
        new Italic(),
        new Link(),
      ],
    }
  },
}
</script>

Create Custom Extensions

Soon … Until then you can take a look at the embed example.

Contributing

Please see CONTRIBUTING for details.

Credits

• Philipp Kühn
• All Contributors

License

The MIT License (MIT). Please see License File for more information.