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

Official Documentation

Documentation can be found on the Tiptap website.

License

Tiptap is open sourced software licensed under the MIT license.