1、安装vue-html5-editor
npm install vue-html5-editor --save
2、安装完毕之后引入到项目中
这个是编辑的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、效果展示
