think-tiptap

Getting started

yarn add @vt7/think-tiptap

Basic Usage

In main.ts

import ThinkTiptap from '@vt7/think-tiptap'
import '@vt7/think-tiptap/dist/think-tiptap.css'

Vue.use(ThinkTiptap)

<template>
  <ThinkTiptap v-model="content" :config="config" :menuSettings="menuSettings" />
</template>

<script>
export default {
  data() {
    return {
      content: '',
      config: {
        baseURL: '',
        imageBaseURL: '',
        imageUploadURL: '',
        imageUploadFolder: '',
        editable: true,
        menuBubble: true,
        menuBar: true,
      },

      menuSettings: [
        'Bold',
        'Italic',
        'Strike',
        'Underline',
        'Heading 1',
        'Heading 2',
        'Heading 3',
        'Paragraph',
        'Font Size',
        'Text Left',
        'Text Center',
        'Text Right',
        'Text Justify',
        'Bullet List',
        'Ordered List',
        'Image',
        'Image Album',
        'Image Comparison',
        'Video',
        'Link',
        'Rich Link',
        'Collapse',
        'SKU',
        'Blockquote',
        'Horizontal Rule',
        'Code Block',
        'Code',
        'Hard Break',
        'Clear Format',
        'Undo',
        'Redo',
        'Highlight',
      ],
    }
  },
}
</script>