富文本編輯器vue-quill-editor的使用

最開始用的是大名鼎鼎的百度富文本編輯器UEditor 挺麻煩 要下載包 要引入 要封裝

完了之後還上傳不了圖片 老是報錯 要用php配置後臺 比較麻煩

於是 就開啓了vue-quill-editor的篇章 簡單 輕量級 使用步驟如下：

1.安裝依賴包 執行如下命令

cnpm install vue-quill-editor --save

2.在main.js中全局引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);

3.在頁面中使用

<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>

三步搞定 就是這麼簡單 給你們看一張我的美圖吧

寫在後面：上傳圖片默認是將圖片轉爲base64編碼的 如果需要上傳到自己特定的服務器 需要進行配置

// 上傳圖片參數配置
const uploadConfig = {
    action:  '',  // 必填參數 圖片上傳地址
    methods: 'POST',  // 必填參數 圖片上傳方式
    token: '',  // 可選參數 如果需要token驗證，假設你的token有存放在sessionStorage
    name: 'img',  // 必填參數 文件的參數名
    size: 500,  // 可選參數   圖片大小，單位爲Kb, 1M = 1024Kb
    accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'  // 可選 可上傳的圖片格式
};

// toolbar工具欄選項配置（默認展示全部）
const toolOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{'header': 1}, {'header': 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'],
    ['link', 'image', 'video']
];