最近，由于工作需要，需要在后台管理界面中添加富文本编辑器。
富格文本编辑器，我们以前使用过百度的ueditor，但是在传统的模型开发中很有用，可以很容易地进行内容编辑，获得编辑内容的信息
百度的ueditor地址：
但是，这次要整合vue。 我还没做过，试试吧。
富格文本编辑器的核心原理其实相当简单，但自己写起来还是很麻烦，没有那个时间。
1 .想法
有两种方式。 一个是对ueditor进行vue的移植改造。 将传统模式更改为可以使用webpack的模式即可。
但是，我觉得ueditor已经很久没有维护了，界面也很丑，所以我会尝试别的可以使用的东西。
2 .踩坑froala editor .
做了很久，这个男人说得对
可能是因为这本身就是收费的，可能是我的某个地方有问题。 没能做到。
切换到vue-html5-editor
切换后成功了。 请看上面的图
先安装
npminstallvue-html5- editor-- save
安装完成后导入项目
importvuehtml5editor from ' vue-html5- editor ' vue.use (vue html5editor，//全局组件名称，newvue html5editor (可选)
//全局组件名称
选中此选项后，是否显示name: 'vue-html5-editor '，//模块名称将直接显示在工具栏图标的背景中
//if set true，willappendmodulenametotoolbaraftericon
自定义showModuleName: false，//每个图标的类，默认情况下使用font-awesome提供的图标
//customiconclassofbuilt-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 '，'全屏幕' : ' fafa-arrows-alt '，
配置info:'fa fa-info'}，//图像模块
//config image模块
image: {//文件的最大大小，单位字节最大文件大小
大小限制： 512 * 1024，
上传//参数，默认情况下不上传图像而转换为base64
//upload config，defaultnullandconvertimagetobase 64
upload: {
URL : ' http://本地主机：8080/files/upload '，
headers: {}，
params: {}，
默认情况下，fieldName:'file'} '、//压缩参数在localResizeIMG中压缩，如果设置为null，则禁止压缩
//compression config，defaultresizeimagebylocalresizeimg (https://github.com/think 2011/localresizeimg )。
//set null to disable compression
响应compress: null，//数据处理，最终返回图像链接
//handle响应数据，返回图像URL
上载处理程序(responsetext )//defaultacceptJSONdatalike ) ok:false，msg3360'unexpected'}or ) ok3360true，dok3360
var JSON=JSON.parse (responsetext ) return json.data.fileurl
}
、//语言，内置的是英语(en-us )和中文(zh-cn )
>//default en-us, en-us and zh-cn are built-inlanguage: '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
添加内容
name:'Contents',
data () {return{
id:'',
content:''}
},methods: {
updateData (e) {this.content =e
}
}
}
嘿嘿，运行起来以后，你会发现，有框，但按钮不在，因为这是个坑。 按钮是个开源组件 font-awesome
这个开源组件就是个图标库，有多种引入方式，我采用的是css全局引入的方式，
解压放入 src/assets，再到App.vue的style引入
@import 'assets/font-awesome-4.7.0/css/font-awesome.min.css';
到此，引入就告一段落。
添加文件上传的部分。
文件上传我有两个部分
图片文件上传: 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}
这样就完成了所有功能