Tiptap – Vue Js Rich Text Editor

By Pankaj Sood On Oct 15, 2018

Get real time updates directly on you device, subscribe now.

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.

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee

Vue Js Vuejs Package

3 Comments

Ben Wertach says 5 years ago
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 ?
1. Asim says 5 years ago
  Rendering is easy,
  Just copy the example code from tiptap into a new vue component and register it globally cuz you are likely to use it all over the place,just remove all the icon tags and imports, and import the the css.
  However integrating the editor into the actual form is not something i have worked out yet.
  Apparently no one has a working example, not one i could find, not yet.
2. Eureka says 5 years ago
  That error message about classes not being valid functions means you have missed a “new” keyword. E.g. instead of Vue.component(‘editor’, Editor), try Vue.component(‘editor’, new Editor);