qusar 集成quasar-tiptap

安装依赖

# 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'
  ],
components: [
        'QLayout',
        'QHeader',
        'QDrawer',
        'QPageContainer',
        'QPage',
        'QToolbar',
        'QToolbarTitle',
        'QTooltip',
        'QBtn',
        'QBtnDropdown',
        'QBtnToggle',
        'QIcon',
        'QList',
        'QItem',
        'QExpansionItem',
        'QItemSection',
        'QItemLabel',
        'QScrollArea',
        'QScrollObserver',
        'QSeparator',
        'QMenu',
        'QAvatar',
        'QColor',
        'QInput',
        'QCheckbox',
        'QToggle',
        'QSpinner',
      ],
]

组件源码

<template>
  <div>
    <quasar-tiptap v-bind="options" @update="onUpdate" />
  </div>
</template>
<script>
import { QuasarTiptap } from 'quasar-tiptap';
import 'quasar-tiptap/lib/index.css';

export default {
  props: { context: String },
  name: 'cmsedit',
  components: {
    QuasarTiptap,
  },
  data() {
    return {
      options: {
        content: '',
        editable: true,
        showToolbar: true,
        showBubble: false,
        extensions: [
          // TipTap
          'Bold',
          'Italic',
          'Strike',
          'Underline',
          'Code',
          'CodeBlock',
          'CodeBlockHighlight',
          'BulletList',
          'OrderedList',
          'ListItem',
          'TodoList',
          'HorizontalRule',
          'Table',
          'Link',
          // QuasarTipTap
          // 'OTitle',
          // 'ODoc',
          'OParagraph',
          'OBlockquote',
          'OTodoItem',
          'OHeading',
          'OAlignment',
          'OIndent',
          'OLineHeight',
          'OForeColor',
          'OBackColor',
          'OFontFamily',
          'OIframe',
          'ODiagram',
          'OKatexBlock',
          'OKatexInline',
          'OFormatClear',
          'OPrint',
          'OImage',
          'OEmbed',
          // new Placeholder({
          //   showOnlyCurrent: false,
          //   emptyNodeText: node => {
          //     if (node.type.name === "title") {
          //       return "Title";
          //     }
          //     return "Content";
          //   }
          // })
        ],
        tableToolbar: [
          'bold',
          'italic',
          'table',
          'font-family',
          'fore-color',
          'back-color',
        ],
        toolbar: [
          // 1.name 2.object 3.component
          'bold',
          'italic',
          {
            name: 'text-format-dropdown',
            type: 'menu',
            options: {
              list: ['underline', 'strike', 'code'],
            },
          },
          'separator',
          'heading',
          'font-family',
          'fore-color',
          'back-color',
          'format_clear',
          'separator',
          'align-dropdown',
          'indent-dropdown',
          'line-height',
          'separator',
          'horizontal',
          'list-dropdown',
          'separator',
          'link',
          // OLinkBtn, // use custom component
          'photo',
          'table',
          'separator',
          'blockquote',
          'code_block',
          // 'print',
        ],
        bubble: [
          'bold',
          'italic',
          'separator',
          'font-family',
          'fore-color',
          'back-color',
          'separator',
          'link',
          'separator',
          'align-group',
        ],
      },
      json: '',
      html: '',
    };
  },

  methods: {
    onUpdate({ getJSON, getHTML }) {
      this.json = getJSON();
      this.html = getHTML();
      // console.log('html', this.html);
    },
  },
  watch: {
    context: {
      handler(newVal, oldVal) {
        this.options.content = newVal;
        // console.log(`value changed: ${newVal}`);
      },
      immediate: true,
    },
  },
  mounted() {
    this.$o.lang.set('zh-hans');
  },
};
</script>