sea-quasar-tiptap

Fork from quasar-tiptap, for upgrade dependencies (Quasar => 2.0+ ...).

Dependencies

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.

Install to your project

npm build

npm pack

npm install [tgz path]/quasar-tiptap-branch.tgz --save

or

npm install sea-quasar-tiptap --save

run locally

npm install

quasar dev

quasar.conf.js

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

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

Install plugin

create javascript file src/boot/tiptap.js

import Vue from 'vue'
import { QuasarTiptapPlugin } from 'sea-quasar-tiptap'
import { DEFAULT_LOCALE } from 'sea-quasar-tiptap/src/i18n'

Vue.use(QuasarTiptapPlugin, {
  language: DEFAULT_LOCALE,
  spellcheck: true
})

Import component

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

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

export default {
  data () {
    return {
      options: {
        content: 'content',
        editable: true,
        extensions: [
            ...RecommendedExtensions,
            new Placeholder({
              showOnlyCurrent: false,
              emptyNodeText: node => {
                if (node.type.name === 'title') {
                  return 'Title'
                }
                return 'Content'
              }
            })
          ],
        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)
    }
  }
}
</script>

Editor Properties And Others

The other details please see quasar-tiptap

Thanks

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

License

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