最近由于工作的需求，需要在后台管理界面中，添加一个富文本编辑器。
富文本编辑器，我们之前用过百度的ueditor，在传统模式开发的时候还是很方便的，可以很便利的进行内容编辑，然后获取到编辑内容的信息
百度的ueditor地址：
https://ueditor.baidu.com/website/
但是这次是要整合一个vue的，还没有这么搞过，就试试吧。
富文本编辑器的核心原理其实蛮简单的，但是自己写还是很麻烦，没有那个时间。
1.考虑方式
有两种方式，一种是把ueditor进行vue的移植改造。把传统模式改成webpack可用的模式就可以了。
但是，我觉得ueditor已经很久没有维护了，界面也太丑了，所以试试别的能用的。
2.踩坑 froala editor...
搞了很久，按这位老兄说的
https://www.jianshu.com/p/cb782b957a13
也许是因为这个本身是收费的，也许是我哪个地方有问题，没搞出来。
3.改换用vue-html5-editor
改换了以后就成功了，上图看看
先安装
npm install vue-html5-editor --save
安装完毕之后引入到项目中
这个是编辑的main.js，按照官方说明 https://gitee.com/tai/vue-html5-editor 以全局引入的方式引入的
import VueHtml5Editor from \'vue-html5-editor\' 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: \'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\', // 自定义语言 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: [ \'info\' ], // 自定义要显示的模块，并控制顺序 // 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 } })
在模块中引入
模块 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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
嘿嘿，运行起来以后，你会发现，有框，但按钮不在，因为这是个坑。 按钮是个开源组件 font-awesome
这个开源组件就是个图标库，有多种引入方式，我采用的是css全局引入的方式，
先下载了http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip
解压放入 src/assets，再到App.vue的style引入
<style> @import \'assets/font-awesome-4.7.0/css/font-awesome.min.css\'; </style>
到此，引入就告一段落。
添加文件上传的部分。
文件上传我有两个部分
图片文件上传: http://localhost:8080/files/upload
这个上传要求请求方式为POST，form表单的文件部分字段名为file
返回如下
{ status: 200, data:{ filename: "2019072935563.png", fileurl: "http://localhost:8080/files/2019072935563.png" }, message: null }
图片文件获取: http://localhost:8080/files/{imgname}
这样就完成了所有功能