Vue2-Editor 使用
1.安装npm install --save vue2-editor2.在需要用得组件里面引入import { VueEditor } from 'vue2-editor'components:{VueEditor}3.也可以全局注册4.使用<template>&lt
·
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.也可以全局注册
4.使用
<template>
<div v-loading="loading"><!--上传图片时得加载画面-->
<VueEditor style="width: 80%"<!--宽度-->
useCustomImageHandler<!--处理图像上传,而不是使用默认转换为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>
5.工具栏选项
/*
* 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 视频
* */
更多推荐
已为社区贡献2条内容
所有评论(0)