Tiptap – Vue Js Rich Text Editor

1 2,295

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.

1 Comment
  1. Ben Wertach says

    Hi, I wanted to call the Editor as a vuejs component in laravel. I’ve installed the npm package and imported it to my app.js like:

    import { Editor, EditorContent } from ‘tiptap’

    After that, I loaded the Vue-component:

    Vue.component(‘editor’, Editor);

    In my template, I am calling the editor by:

    I am getting always some errors like:

    vue warn]: Error in render: “TypeError: Cannot call a class as a function”

    How can I import tiptap editor for use in Laravel Vue components ?