本组件是针对wangeditor在vue2.0上封装的组件,为方便使用vue2.0的开发者封装。
npm install --save vue-wangeditor
在项目中直接引入即可:
<template>
<vue-wangeditor id="editor" v-model="text></vue-wangeditor>
</template>
import vueWangeditor from 'vue-wangeditor'
export default {
...
components: {
vueWangeditor
}
}
菜单数组:
[
'source', // 源码模式
'|',
'bold', // 粗体
'underline', // 下划线
'italic', // 斜体
'strikethrough', // 中线
'eraser', // 清空格式
'forecolor', // 文字颜色
'bgcolor', // 背景颜色
'|',
'quote', // 引用
'fontfamily', // 字体
'fontsize', // 字号
'head', // 标题
'unorderlist', // 无序列表
'orderlist', // 有序列表
'alignleft', // 左对齐
'aligncenter', // 居中
'alignright', // 右对齐
'|',
'link', // 链接
'unlink', // 取消链接
'table', // 表格
'emotion', // 表情
'|',
'img', // 图片
'video', // 视频
'location', // 位置
'insertcode', // 插入代码
'|',
'undo', // 撤销
'redo', // 重做
'fullscreen' // 全屏
];
代码类型:
apache/bash/coffeescript/cpp/cs/css/diff/http/ini/java/javascript/json/makefile/html/markdown/nginx/objectivec/perl/php/python/ruby/sql
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
id | 创建编辑器的唯一标识 | String | 无 | 无 |
value | 富文本编辑器绑定的内容 | String | 无 | 无 |
width | 富文本编辑器宽度 | String | 无 | 600 |
height | 富文本编辑器高度 | String | 无 | 400 |
uploadImgUrl | 图片上传地址 | String | 无 | 无 |
uploadParams | 图片上传附带参数 | String | 无 | 无 |
uploadHeader | 图片上传附带头部 | String | 无 | 无 |
pasteFilter | 是否开启粘贴样式过滤 | boolean | true/false | false |
mapKey | 百度地图key | String | 无 | 无 |
menus | 编辑器菜单 | String | 无 | 全部 |
disabledMenus | 禁用菜单(优先级在menus后) | String | 无 | 无 |
codeDefaultLang | 默认插入代码类型 | String | 参照上方代码类型 | javascript |
hideLinkImg | 是否隐藏添加网络图片功能(需配置uploadImgUrl方可生效) | String | true/false | false |
menuFixed | 是否开启菜单栏吸顶 | String | true/false | true |
disabled | 是否禁用编辑器 | boolean | true/false | true |
isRealtime | 是否实时对绑定值进行更新 | boolean | true/fasle | false |
jsFilter | 是否过滤js代码 | boolean | true/false | true |
方法名 | 说明 | 参数 | 返回值说明 | 返回值类型 |
---|---|---|---|---|
getHtml | 获取编辑器当前内容的html代码片段 | 无 | 内容的html代码片段 | String |
getText | 获取编辑器当前内容的文本格式 | 无 | 内容的纯文本 | String |
insertImg | 上传图片后手动插入图片 | url | 无 | 无 |
setHtml | 设置编辑器内容 | text | 无 | 无 |
appendHtml | 追加编辑器内容 | text | 无 | 无 |
clear | 清空编辑器内容 | 无 | 无 | 无 |
enable | 启用编辑器 | 无 | 无 | 无 |
disable | 禁用编辑器 | 无 | 无 | 无 |
destroy | 销毁编辑器 | 无 | 无 | 无 |
undestroy | 恢复编辑器 | 无 | 无 | 无 |
事件名 | 说明 | 参数 | 返回值说明 | 返回值类型 |
---|---|---|---|---|
change | 编辑器内容变化时触发的事件 | 无 | 无 | 无 |
load | 图片上传完成出发的事件 | originalName, resultText | originalName:文件原名resultText:返回的数据 | OriginalName:String resultText:String |
timeout | 图片上传超时触发的事件 | 无 | 无 | 无 |
error | 图片上传出错触发的事件 | 无 | 无 | 无 |
1.3.8 增加了insertImg方法,在上传图片后可自行处理图片url再插入编辑器中。