1、安装vue-html5-editor
npm install vue-html5-editor --save2、安装完毕之后引入到项目中
这个是编辑的main.js，按照官方说明 vue-html5-editor: 一个vue的html5富文本编辑器插件 以全局引入的方式引入的
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor, {
// 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
name: 'vue-html5-editor',
// 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
showModuleName: false,
// 自定义各个图标的class，默认使用的是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'
},
// 配置图片模块
image: {
// 文件最大体积，单位字节 max file size
sizeLimit: 512 * 1024,
// 上传参数,默认把图片转为base64而不上传
upload: {
url: 'http://localhost:8080/files/upload',
headers: {},
params: {},
fieldName: 'file'
},
// 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
compress: null,
// 响应数据处理,最终返回图片链接
uploadHandler(responseText) {
var json = JSON.parse(responseText)
return json.data.fileurl
}
},
// 语言，内建的有英文（en-us）和中文（zh-cn）
language: 'zh-cn',
// 自定义语言
i18n: {
'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': '重置'
}
},
// 隐藏不想要显示出来的模块
hiddenModules: [
'info'
],
// 自定义要显示的模块，并控制顺序
visibleModules: [
'text',
'color',
'font',
'align',
'list',
'link',
'unlink',
'tabulation',
'image',
'hr',
'eraser',
'undo',
'full-screen',
'info'],
modules: {}
})2.5、没错当然还有另外一种方法
其实也不算另外一种方法，如果你觉得你觉得你的main.js太长的话也可以将他单独分离出来
（其实我也只是看他不爽而已）
新建文件夹VueHtml5Editor
在文件夹中新建文件 vue-html5-editor-config（取名自己规范点就行）
// vue-html5-editor-config.js
export default {
// 全局组件名称，使用new VueHtml5Editor(options)时该选项无效
name: 'vue-html5-editor',
// 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
showModuleName: false,
// 自定义各个图标的class，默认使用的是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'
},
// 配置图片模块
image: {
// 文件最大体积，单位字节 max file size
sizeLimit: 10 * 1024 * 1024,
// 上传参数,默认把图片转为base64而不上传
upload: {
url: 'http://localhost:8080/files/upload',
method: 'post', // 请求方式
data: {}
},
// 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩
compress: null,
// 响应数据处理,最终返回图片链接
uploadHandler(responseText) {
var json = JSON.parse(responseText)
return json.data
}
},
// 语言，内建的有英文（en-us）和中文（zh-cn）
language: 'zh-cn',
// 自定义语言
i18n: {
'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': '重置'
}
},
// 隐藏不想要显示出来的模块
hiddenModules: [
'info'
],
// 自定义要显示的模块，并控制顺序
visibleModules: [
'text',
'color',
'font',
'align',
'list',
'link',
'unlink',
'tabulation',
'image',
'hr',
'eraser',
'undo',
'full-screen',
'info'],
modules: {}
}
然后在main.js中将他引入
// 富文本编辑器
import VueHtml5EditorConfig from './vuehtml5editor/vue-html5-editor-config.js'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor, VueHtml5EditorConfig)3、在模块中引入
模块 contents.vue
<template>
<div id="contents">
<h1>添加内容</h1>
<br>
<vue-html5-editor :content="content" @change="updateData" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>
</div>
</template>
<script>
export default {
name: 'Contents',
data () {
return {
id: '',
content: ''
}
},
methods: {
updateData (e) {
this.content = e
}
}
}
</script>
<style scoped>
</style>4、最后一步
运行起来以后，会发现，有框，但按钮不在，因为这是个坑。
按钮是个开源组件 font-awesome
这个开源组件就是个图标库，有多种引入方式，我所采用是css全局引入的方式，
先下载了http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip
解压放入 src/assets（你的静态资源文件夹），再到App.vue的style引入
5、效果展示
