Tiptap – Vue Js Rich Text Editor

0 481

In the article, we will discuss “Tiptap – Vue Js Rich Text Editor”. The rich text editor is mostly used in all kind of Web Apps which fulfill our text processing requirements. It makes our writing easy and manageable.

We have already covered some of the basics on Vue Js in our previous articles. If you are not familiar with the Vue Js then you can start with the following articles.

Tiptap – Vue Js Rich Text Editor

Tiptap is created by Philipp Kühn. It is an extendable rich-text editor for Vue Js and also a wonderful Vue Js resource.

Install Tiptap:

npm install tiptap

or

yarn add tiptap

The basic example of Tiptap:

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

Example of the JSON-serializable output:

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Demo text"
        }
      ]
    }
  ]
}

Other available examples:

For more details about the Tiptap editor’s capabilities, check out the above mentioned live demos. It’s an open source project and located at GitHub so you can use this in your personal or commercial projects as per your needs.

Leave A Reply

Your email address will not be published.