@tiptap/vue-3

What is @tiptap/vue-3?

@tiptap/vue-3 is a rich-text editor framework for Vue 3, built on top of ProseMirror. It provides a highly customizable and extensible editor experience, allowing developers to create complex text editing interfaces with ease.

What are @tiptap/vue-3's main functionalities?

Basic Editor Setup

This code sets up a basic editor using @tiptap/vue-3 with the StarterKit extension, which includes common features like bold, italic, and lists.

```json
{
  "template": "<editor-content :editor=\"editor\" />",
  "setup": "import { EditorContent, useEditor } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';

export default {
  components: {
    EditorContent,
  },
  setup() {
    const editor = useEditor({
      extensions: [StarterKit],
      content: '<p>Hello World!</p>',
    });

    return {
      editor,
    };
  },
};"
}
```

Custom Extensions

This code demonstrates how to create a custom extension for @tiptap/vue-3, allowing you to add custom commands and functionality to the editor.

```json
{
  "template": "<editor-content :editor=\"editor\" />",
  "setup": "import { EditorContent, useEditor } from '@tiptap/vue-3';
import { Extension } from '@tiptap/core';

const CustomExtension = Extension.create({
  name: 'custom',
  addCommands() {
    return {
      setCustom: () => ({ commands }) => {
        return commands.insertContent('<p>Custom Content</p>');
      },
    };
  },
});

export default {
  components: {
    EditorContent,
  },
  setup() {
    const editor = useEditor({
      extensions: [CustomExtension],
      content: '<p>Initial Content</p>',
    });

    return {
      editor,
    };
  },
};"
}
```

Collaboration

This code sets up a collaborative editor using @tiptap/vue-3 and the y-webrtc provider, allowing multiple users to edit the same document in real-time.

```json
{
  "template": "<editor-content :editor=\"editor\" />",
  "setup": "import { EditorContent, useEditor } from '@tiptap/vue-3';
import Collaboration from '@tiptap/extension-collaboration';
import { WebrtcProvider } from 'y-webrtc';
import * as Y from 'yjs';

const ydoc = new Y.Doc();
const provider = new WebrtcProvider('your-room-name', ydoc);

export default {
  components: {
    EditorContent,
  },
  setup() {
    const editor = useEditor({
      extensions: [
        Collaboration.configure({
          document: ydoc,
        }),
      ],
      content: '<p>Collaborative Content</p>',
    });

    return {
      editor,
    };
  },
};"
}
```

Other packages similar to @tiptap/vue-3

quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a simple API and a rich set of features, but it is less customizable compared to @tiptap/vue-3.

slate

Slate is a completely customizable framework for building rich text editors. It offers more control over the editor's behavior and appearance, but requires more effort to set up compared to @tiptap/vue-3.

draft-js

Draft.js is a framework for building rich text editors in React, developed by Facebook. It provides a lot of flexibility and control, but it is more complex to use and less feature-rich out of the box compared to @tiptap/vue-3.

README

@tiptap/vue-3

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open-sourced software licensed under the MIT license.