quasar-tiptap

A modern WYSIWYG rich-text editor built on top of tiptap and Quasar Framework for Vue.js.

Examples & Demos

• Examples
• Live Demo
• Code Sandbox

Features

• Extensions: tiptap official extensions, and dozens of great extensions
• Markdown
• Diagram and LaTex Math formula
• I18n support (en-us, zh-hans, pl, pt-br)
• Fully extensible for editor extensions, menubar

I18n

• en-us default
• zh-hans
• pl by @qyloxe
• pt-br by @fal-pasa

Installation

Dependencies

quasar-tiptap is built on top of Quasar Framework and tiptap, therefore it should be used in Quasar App and depends on several packages.

# required
yarn add tiptap
yarn add tiptap-extensions

# optional (required if diagram and latex formula enabled)
yarn add vue-codemirror
yarn add mermaid
yarn add katex

quasar-tiptap

yarn add quasar-tiptap

quasar.conf.js

Use mdi-v5 icon set and v-close-popup directive.

extras: [
  'mdi-v5'
],
framework: [
  directives: [
    'ClosePopup'
  ]
]

Usage

Register quasar-tiptap globally by installing plugin, or import QuasarTiptap component as needed.

Install plugin

import Vue from 'vue'
import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'

Vue.use(QuasarTiptapPlugin, {
  language: 'zh-hans',
  spellcheck: true
})

Import component

<template>
  <div>
    <quasar-tiptap v-bind="options" @update="onUpdate" />
  </div>
</template>

<script>
import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'
import 'quasar-tiptap/lib/index.css'

export default {
  data () {
    return {
      options: {
        content: 'content',
        editable: true,
        extensions: [
          ...RecommendedExtensions,
          // other extenstions
          // name string, or custom extension
        ],
        toolbar: [
          'add-more',
          'separator',
          'bold',
          'italic',
          'underline',
          // other toolbar buttons
          // name string
        ]
      },
      json: '',
      html: ''
    }
  },
  components: {
    QuasarTiptap,
  },
  methods: {
    onUpdate ({ getJSON, getHTML }) {
      this.json = getJSON()
      this.html = getHTML()
      console.log('html', this.html)
    }
  },
  mounted () {
    // set language dynamically
    this.$o.lang.set('en-us')
  }
}
</script>

Editor Properties

| Property | Type | Default | Description | | --- | :---: | :---: | --- | | content | Object\|String | null | The editor content | | editable | Boolean | true | When set to false the editor is read-only. | | extensions | Array | [] | A list of extensions used, by the editor. This can be String, Nodes, Marks or Plugins. | | toolbar | Array | [] | A list of toolbar button used, by the editor. This can be String, Vue components | | tableToolbar | Array | [] | A list of toolbar button used, by the table. This can be String, Vue components |

Extensions

Available Extensions

Extensions provided by tiptap official and quasar-tip:

export const TipTapExtensions = [
  'Bold',
  'Italic',
  'Strike',
  'Underline',
  'Code',
  'CodeBlock',
  'CodeBlockHighlight',
  'BulletList',
  'OrderedList',
  'ListItem',
  'TodoList',
  'HorizontalRule',
  'Table',
  'Link',
  'Image',
]

export const QuasarTipTapExtensions = [
  'OTitle',
  'ODoc',
  'OParagraph',
  'OBlockquote',
  'OTodoItem',
  'OHeading',
  'OAlignment',
  'OLineHeight',
  'OForeColor',
  'OBackColor',
  'OFontFamily',
  'OIframe',
  'ODiagram',
  'OKatexBlock',
  'OKatexInline',
  'OFormatClear',
]

export const RecommendedExtensions = [
  ...TipTapExtensions,
  ...QuasarTipTapExtensions
]

extensions and toolbar in options

|extension |toolbar |Remarks | |:------|:------------|:--------| |'Bold' |'bold' | | |'Italic' |'italic' | | |'Strike' |'strike' | | |'Underline' |'underline' | | |'Code' |'code' | | |'CodeBlock' |'code_blok' | | |'CodeBlockHighlight' | | | |'BulletList' |'bullet_list' | | |'OrderedList' |'ordered_list' | | |'ListItem' | | | |'TodoList' |'todo_list' | | |'HorizontalRule' |'horizontal' | | |'Table' |'table' | | |'Link' | | | |'Image' |'photo' | | |'OTitle' | | | |'ODoc' | | | |'OParagraph' | | | |'OBlockquote' |'blockquote' | | |'OTodoItem' | | | |'OHeading' |'heading' | | |'OIndent' |'indent', 'outdent' | | |'OAlignment' |'align-dropdown', 'align-group' | | |'OLineHeight' |'line-height' | | |'OForeColor' |'fore-color' | | |'OBackColor' |'back-color' | | |'OFontFamily' |'font-family' | | |'OIframe' | |'add-more' | |'ODiagram' | |'add-more' | |'OKatexBlock' | |'add-more' | |'OKatexInline' | |'add-more' | |'OFormatClear' |'format_clear' | |

🏗 Contributing

1. 🍴Fork it
2. 🔀Create your branch: git checkout -b your-branch
3. 🎨Make your changes
4. 📝Commit your changes with Semantic Commit Messages (recommended)
5. 🚀Push to the branch: git push origin your-branch
6. 🎉Submit a PR to dev branch

Roadmap

A todo list will be shown in QuasarTiptap Project kanban.

Thanks

• Authors of Quasar Framework
• Authors of tiptap
• Leecason for element-tiptap

License

The MIT License (MIT). Please see License File for more information.