Vue項目中使用quill富文本編輯器

最近新起了一個項目,棄用之前的UE富文本編輯器,通過調研決定使用quill,一個很簡單的小插件哈,以下是我的使用經驗

1. 安裝

npm install vue-quill-edito
           

2. 引用注冊

//引用
import 'quill/dist/quill.core.css';

import 'quill/dist/quill.snow.css';

import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor';



.......

//注冊(當然 也可以注冊在全局裡面)
export default {
  name: 'quillEditorDemo',
  components: {
    quillEditor: quillEditor,
  },
           

3. 使用

<quill-editor
  id="myQuillEditor"
  ref="myQuillEditor"
  v-model="optNote.content.html"
  :options="editorOption"
  class="my-quill-editor"
  @focus="onEditorFocus"
  @change="onEditorChange($event)" />

.......
//富文本編輯器的配置項 optNote與editorOption
data(){
    optNote: {
        visible: false,
        title: this.$t('livePlayback.announceSet.announce'),
        maxLength: 300,
        noteId: '',
        content: {
          text: '',
          html: '',
          textLen: 0,
          hsahTtml: '',
        },
      },
      editorOption: {
        scrollingContainer: '#editorcontainer',
        placeholder: '',
        // or 'bubble'
        theme: 'snow',
        modules: {
          toolbar: {
            // 自定義工具欄 如果使用預設的話 直接toolbar為空就好
            container: [
              ['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下劃線，删除線
              ['blockquote', 'code-block'], //引用，代碼塊
              [{ 'header': 1 }, { 'header': 2 }], // 标題，鍵值對的形式；1、2表示字型大小
              [{ 'list': 'ordered'}, { 'list': 'bullet' }], //清單
              [{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
              [{ 'indent': '-1'}, { 'indent': '+1' }], // 縮進
              [{ 'direction': 'rtl' }], // 文本方向
              [{ 'size': ['small', false, 'large', 'huge'] }], // 字型大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //幾級标題
              [{ 'color': [] }, { 'background': [] }], // 字型顔色，字型背景顔色
              [{ 'font': [] }], //字型
              [{ 'align': [] }], //對齊方式
              ['clean'], //清除字型樣式
              ['image'] //上傳圖檔、上傳視訊
            ],
          }
        }
      },
}
......
methods:{
    onEditorChange({ quill, html, text }){
        //可以在這裡進行對應的操作 quill為富文本對象,html為富文本對象内内容由html标簽組                    成,text為quill内容裡面的所有文本内容

    }
}
           

大緻使用情況就這些了,靈活運用,如果想操作富文本的内容也可以從監聽函數onEditorChange内 進行對應的增删改查.部落客的項目中有一條就是針對上傳圖檔 做客寬高和體積的限制,也是當時思路卡了一段時間,關于解題思路 我準備再開一篇文章說.

 哦對~插播一條廣告 招人招人招人!!!

誠邀各位有意向找工作和年後跳槽的朋友們

關于學曆：大學及以上（學信網可查 嚴格）

關于薪資：最低14薪(普遍能拿到16薪)

關于福利：公積金繳納全額基數的12%；轉正後六險一金（試用期五險一金）；早餐茶水間提供免費牛奶面包，午餐公司提供，每天下午四點派發零食，每個月額外500餐補；雙休,每個月不定期團建；公司内設有健身房和沐浴室滿足同學們的健身要求。

關于職位:前端(vue為主), 後端(php),産品經理,UI設計,測試.......  誠邀各位大佬私信哈