Vue2-Editor 使用
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
