1、介绍
Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11
github地址：https://github.com/PeakTai/vue-html5-editor
github上有安装和使用说明，代码会贴在文档中，可复制粘贴使用
2、使用
demo是全局引入
npm install vue-html5-editor --save-dev
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);
也可作为局部组件使用，方便在不同的场景里使用不同的配置
const editor1 = new VueHtml5Editor(options1)
const app1 = new Vue({
components:{
editor1
}
})
const editor2 = new VueHtml5Editor(options2)
const app2 = new Vue({
components:{
editor2
}
})
demo使用
<vue-html5-editor @change="updateData" :content="content" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>
注：设置固定高度的时候要把:auto-height设为false，自适应高度的话设为true，设置的change事件可以拿到传给后端的内容
options基本配置
Vue.use(VueHtml5Editor, {
// 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
// global component name
name: "vue-html5-editor",
// 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
// if set true,will append module name to toolbar after icon
showModuleName: false,
// 自定义各个图标的class，默认使用的是font-awesome提供的图标
// custom icon class of built-in modules,default using font-awesome
icons: {
text: "fa fa-pencil",
color: "fa fa-paint-brush",
font: "fa fa-font",
align: "fa fa-align-justify",
list: "fa fa-list",
link: "fa fa-chain",
unlink: "fa fa-chain-broken",
tabulation: "fa fa-table",
image: "fa fa-file-image-o",
hr: "fa fa-minus",
eraser: "fa fa-eraser",
undo: "fa-undo fa",
"full-screen": "fa fa-arrows-alt",
info: "fa fa-info",
},
// 配置图片模块
// config image module
image: {
// 文件最大体积，单位字节 max file size
sizeLimit: 512 * 1024,
// 上传参数,默认把图片转为base64而不上传
// upload config,default null and convert image to base64
upload: {
url: null,
headers: {},
params: {},
fieldName: {}
},
// 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
// compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
// set null to disable compression
compress: {
width: 1600,
height: 1600,
quality: 80
},
// 响应数据处理,最终返回图片链接
// handle response data，return image url
uploadHandler(responseText){
//default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
var json = JSON.parse(responseText)
if (!json.ok) {
alert(json.msg)
} else {
return json.data
}
}
},
// 语言，内建的有英文（en-us）和中文（zh-cn）
//default en-us, en-us and zh-cn are built-in
language: "zh-cn",
// 自定义语言
i18n: {
//specify your language here
"zh-cn": {
"align": "对齐方式",
"image": "图片",
"list": "列表",
"link": "链接",
"unlink": "去除链接",
"table": "表格",
"font": "文字",
"full screen": "全屏",
"text": "排版",
"eraser": "格式清除",
"info": "关于",
"color": "颜色",
"please enter a url": "请输入地址",
"create link": "创建链接",
"bold": "加粗",
"italic": "倾斜",
"underline": "下划线",
"strike through": "删除线",
"subscript": "上标",
"superscript": "下标",
"heading": "标题",
"font name": "字体",
"font size": "文字大小",
"left justify": "左对齐",
"center justify": "居中",
"right justify": "右对齐",
"ordered list": "有序列表",
"unordered list": "无序列表",
"fore color": "前景色",
"background color": "背景色",
"row count": "行数",
"column count": "列数",
"save": "确定",
"upload": "上传",
"progress": "进度",
"unknown": "未知",
"please wait": "请稍等",
"error": "错误",
"abort": "中断",
"reset": "重置"
}
},
// 隐藏不想要显示出来的模块
// the modules you don't want
hiddenModules: [],
// 自定义要显示的模块，并控制顺序
// keep only the modules you want and customize the order.
// can be used with hiddenModules together
visibleModules: [
"text",
"color",
"font",
"align",
"list",
"link",
"unlink",
"tabulation",
"image",
"hr",
"eraser",
"undo",
"full-screen",
"info",
],
// 扩展模块，具体可以参考examples或查看源码
// extended modules
modules: {
//omit,reference to source code of build-in modules
}
})
注：图标里面使用的icon是取自https://fontawesome.dashgame.com/，font awesome库里面的图标，可用可不用，可自行替换为项目里下载的框架图标，由于demo中使用的是饿了么组件，就替换为饿了么icon图标
到此应该能打开基本的富文本框架了，如下所示：忽略随意匹配的icon
现在尝试功能实现以及返回数据
上传图片是上传链接，略有不便，拓展时需重新拓展新的图片上传组件
注：组件原始图片上传是需要链接，但是所有组件都可拓展，重新拓展一个image组件，隐藏掉之前原始组件image，如图（代码实现下面讲解）
下面看一下返回数据是否可用
前端用v-html完全可以渲染，传给后端数据跟常用编辑器传的数据格式一致，可用
下面进行拓展视频音频功能
拓展功能直接在modules拓展，文档说看源码或者源码中的examples示例，有不懂的可以去查看
拓展功能代码如下（拓展的视频和图片）：
modules: [
{
name: 'video',
icon: 'el-icon-video-camera',
i18n: 'video',
show: true,
init: function(editor) {
console.log('emoji module init')
},
//vue component
dashboard: {
template: '<el-upload style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;" class="avatar-uploader" action="" :http-request="uploadImg"> <i class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;"></i> </el-upload>',
data: function() {
return {
videoUrl: ''
}
},
methods: {
uploadImg(file) {
// 接口调用封装处
this.videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
this.$parent.execCommand('insertHTML', '<video class="rich-img" src="' + this.videoUrl + '" autoplay style="max-width:80%" controls x5-video-player-type="h5" x5-video-orientation="portraint">')
}
}
}
},
{
name: 'img',
icon: 'el-icon-picture',
i18n: 'img',
show: true,
init: function(editor) {
console.log('emoji module init')
},
//vue component
dashboard: {
template: '<el-upload class="upload-demo" action="" :http-request="uploadImg"><el-button size="small" type="primary">点击上传</el-button></el-upload>',
data: function() {
return {
imageUrl: ''
}
},
methods: {
uploadImg(file) {
// 接口调用封装处
this.imageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
this.$parent.execCommand('insertHTML', '<img src="' + this.imageUrl + '" style="max-width:80%">')
}
}
}
}
]
注：由于此处并没有调用接口，且也没有压缩图片，所以为了方便，demo展示了固定链接，接口调用按照具体业务调用，拓展中的dashboard中的内容就是你自己自定义的内容，template是选择标签或者上传的展示的样式，下面方法，按照js的模式去书写，execCommand是插入到编辑器内容内，也就是你想要的返回的数据，都是自己定义的，灵活性特别高
特别强调，拓展的组件要在visibleModules注册，不然不会显示
下面是返回的数据
注：由于是demo就没有过多的纠正命名问题，可按照命名规范命名
3、总结
vue-html5-editor是一款拓展性特别好，已经灵活性特别强的富文本编辑器，他不仅能实现pc端，以及移动端和钉钉方面的编辑工作，还能实现其他附加功能已实现产品方面各种各样的需求，如果你不想要编辑器中原本的功能或者显示什么功能，都有入口可以隐藏和显示，拓展功能也有入口去拓展，按照规定的格式插入，实现效果非常好，是一款不错的编辑器
注：附上整体配置文件
export default {
// 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
// global component name
name: 'vue-html5-editor',
// 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
// if set true,will append module name to toolbar after icon
showModuleName: false,
// 自定义各个图标的class，默认使用的是font-awesome提供的图标
// custom icon class of built-in modules,default using font-awesome
icons: {
text: 'el-icon-s-order',
color: 'el-icon-magic-stick',
font: 'el-icon-edit',
align: 'el-icon-s-operation',
list: 'el-icon-film',
link: 'el-icon-link',
unlink: 'el-icon-male',
tabulation: 'el-icon-connection',
image: 'el-icon-picture-outline',
hr: 'el-icon-thumb',
eraser: 'el-icon-present',
undo: 'el-icon-toilet-paper',
'full-screen': 'el-icon-film',
info: 'el-icon-mobile',
upload: 'el-icon-scissors'
},
// 配置图片模块
// config image module
image: {
// 文件最大体积，单位字节 max file size
sizeLimit: 512 * 1024,
// 上传参数,默认把图片转为base64而不上传
// upload config,default null and convert image to base64
upload: {
url: 'http://localhost:8080/files/upload',
headers: {},
params: {},
fieldName: 'file'
},
// 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
// compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
// set null to disable compression
compress: null,
// 响应数据处理,最终返回图片链接
// handle response data，return image url
uploadHandler(responseText) {
// default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
var json = JSON.parse(responseText)
return json.data.fileurl
}
},
// 语言，内建的有英文（en-us）和中文（zh-cn）
// default en-us, en-us and zh-cn are built-in
language: 'zh-cn',
date: {
format: 'YYYY-MM-DD'
},
// 自定义语言
i18n: {
// specify your language here
'zh-cn': {
align: '对齐方式',
image: '图片',
list: '列表',
link: '链接',
unlink: '去除链接',
table: '表格',
font: '文字',
'full screen': '全屏',
text: '排版',
eraser: '格式清除',
info: '关于',
color: '颜色',
'please enter a url': '请输入地址',
'create link': '创建链接',
bold: '加粗',
italic: '倾斜',
underline: '下划线',
'strike through': '删除线',
subscript: '上标',
superscript: '下标',
heading: '标题',
'font name': '字体',
'font size': '文字大小',
'left justify': '左对齐',
'center justify': '居中',
'right justify': '右对齐',
'ordered list': '有序列表',
'unordered list': '无序列表',
'fore color': '前景色',
'background color': '背景色',
'row count': '行数',
'column count': '列数',
save: '确定',
upload: '上传',
progress: '进度',
unknown: '未知',
'please wait': '请稍等',
error: '错误',
abort: '中断',
reset: '重置',
video: '视频',
img: '图片'
}
},
// 隐藏不想要显示出来的模块
// the modules you don't want
hiddenModules: ['image'],
// 自定义要显示的模块，并控制顺序
// keep only the modules you want and customize the order.
// can be used with hiddenModules together
visibleModules: ['text', 'color', 'font', 'align', 'list', 'link', 'unlink', 'tabulation', 'image', 'hr', 'eraser', 'undo', 'full-screen', 'info', 'emoji', 'video', 'upload', 'img'],
modules: [
{
name: 'emoji',
icon: 'el-icon-delete-solid',
i18n: 'emoji',
show: true,
init: function(editor) {
console.log('emoji module init')
},
//vue component
dashboard: {
template: '<div><button v-for="s in symbols" type="button" @click="insertSymbol(s)">{{s}}</button></div>',
data: function() {
return {
symbols: ['>_<|||', '^_^;', '⊙﹏⊙‖∣°', '^_^|||', '^_^"', '→_→', '..@_@|||||..', '…(⊙_⊙;)…', 'o_o ....', 'O__O', '///^_^.......', '?o?|||', '( ^_^ )? ', '(+_+)?', '（?ε?）? ', 'o_O???', '@_@a', '一 一+', '>"<||||', '‘(*>﹏<*)′']
}
},
methods: {
insertSymbol: function(symbol) {
console.log(symbol, 'symbol')
//$parent is editor component instance
this.$parent.execCommand('insertHTML', symbol)
}
}
}
},
{
name: 'video',
icon: 'el-icon-video-camera',
i18n: 'video',
show: true,
init: function(editor) {
console.log('emoji module init')
},
//vue component
dashboard: {
template: '<el-upload style="border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;" class="avatar-uploader" action="" :http-request="uploadImg"> <i class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;"></i> </el-upload>',
data: function() {
return {
videoUrl: ''
}
},
methods: {
uploadImg(file) {
// 接口调用封装处
this.videoUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
this.$parent.execCommand('insertHTML', '<video class="rich-img" src="' + this.videoUrl + '" autoplay style="max-width:80%" controls x5-video-player-type="h5" x5-video-orientation="portraint">')
}
}
}
},
{
name: 'img',
icon: 'el-icon-picture',
i18n: 'img',
show: true,
init: function(editor) {
console.log('emoji module init')
},
//vue component
dashboard: {
template: '<el-upload class="upload-demo" action="" :http-request="uploadImg"><el-button size="small" type="primary">点击上传</el-button></el-upload>',
data: function() {
return {
imageUrl: ''
}
},
methods: {
uploadImg(file) {
// 接口调用封装处
this.imageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
this.$parent.execCommand('insertHTML', '<img src="' + this.imageUrl + '" style="max-width:80%">')
}
}
}
}
]
}
8651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
