Tiptap - Vue Js Rich Text Editor

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

Comments (3)

Ben Wertach 5 years

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 ?
- Asim 5 years
  
  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.
- Eureka 5 years
  
  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);

Tiptap – Vue Js Rich Text Editor

Tiptap – Vue Js Rich Text Editor

Related Posts