Vue-Editor底層采取的是quill.js，而quill.js采用的是html5的新屬性classList，所以版本低於ie10會報錯“無法獲取未定義或 null 引用的屬性‘confirm’”,而作者寫該組件時似乎把ie10也舍棄了,直接支持ie11+，因此需要兼容ie9,ie10的建議更換編輯器。
1.安裝
npm install --save vue2-editor
2.在需要用得組件里面引入
import { VueEditor } from 'vue2-editor'
components:{
VueEditor
}
3.使用
<template>
<div v-loading="loading"><!--上傳圖片時得加載畫面-->
<VueEditor style="width: 80%"<!--寬度-->
useCustomImageHandler<!--處理圖像上傳，而不是使用默認轉換為Base64 默認圖片為base64路徑 加上此屬性后顯示為正常路徑-->
@imageAdded="handleImageAdded"<!--上傳圖片函數-->
:editorToolbar="customToolbar"<!--自定義工具欄-->
v-model="content"></VueEditor>
</div>
</template>
<script>
export default {
data(){
return{
content:'',
loading:false，
customToolbar：:[
['bold', 'italic', 'underline'],
[{'align':''},{'align':'center'},{'align':'right'}],
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
[{'background':[]},{'color':[]}],
['image','link'],
['strike'],
['clean'],
],//更多工具欄選項在下面
}
}
methods:{
handleImageAdded:function(file,Editor,cursorLocation){
//上傳圖片操作
//把獲取到的圖片url 插入到鼠標所在位置 回顯圖片
Editor.insertEmbed(cursorLocation, 'image', url);
}
}
}
</script>
4.工具欄選項
* align:{”,’center’,’right’} 文本對齊方式 * background 背景色 * blockquote 引用 * bold 加粗 * clean 清楚格式 * code 代碼 * code-block 代碼塊 * color 字體顏色 * direction:{”,’rtl’} 方向 * float：{‘center’,’full’,’left’,’right’} 浮動 * formula 公式 * header 標題 * italic 斜體 * image 圖片 * indent 縮進 * link 鏈接 * list :{‘ordered’,’bullet’,’check’} 列表 有序 多選列別 * script :{‘sub’,’super’} 腳本 * strike 作廢 * underline 下划線 * video 視頻
參考文檔：
https://www.vue2editor.com/examples/#how-to-use-custom-quill-modules