2020-06-03

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>

0 意見 :

張貼留言