Quasar + SSR + Quill WYSIWYG Editor

透過 npm 安裝 quill editor

npm install vue-quill-editor

在 Quasar SSR 模式之下需要另外設定 boot file，首先在 boot 資料夾內新增 quill.js 檔案 :

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme

Vue.use(VueQuillEditor, /* { default global options } */)

export default ({ app, router, store, Vue }) => {
  //init axios setup

  //interceptors setup
  //...
  
}

設定 quasar.conf.js 新增 quill 設定 :

...

// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/cli-documentation/boot-files
boot: [

  'i18n',
  'axios',
  { path:'quill', server:false },
],

...

在 component 內使用 quill editor

<template>
  <q-page>
    <quill-editor v-model="html_content"></quill-editor>
  </q-page>
</template>

Read More