最近由于工作的需求,需要在后台管理界面中,添加一个富文本编辑器。
富文本编辑器,我们之前用过百度的ueditor,在传统模式开发的时候还是很方便的,可以很便利的进行内容编辑,然后获取到编辑内容的信息
百度的ueditor地址:
但是这次是要整合一个vue的,还没有这么搞过,就试试吧。
富文本编辑器的核心原理其实蛮简单的,但是自己写还是很麻烦,没有那个时间。
1.考虑方式
有两种方式,一种是把ueditor进行vue的移植改造。把传统模式改成webpack可用的模式就可以了。
但是,我觉得ueditor已经很久没有维护了,界面也太丑了,所以试试别的能用的。
2.踩坑 froala editor...
搞了很久,按这位老兄说的
也许是因为这个本身是收费的,也许是我哪个地方有问题,没搞出来。
3.改换用vue-html5-editor
改换了以后就成功了,上图看看
先安装
npm install vue-html5-editor --save
安装完毕之后引入到项目中
import VueHtml5Editor from 'vue-html5-editor'Vue.use(VueHtml5Editor, {//全局组件名称,使用new VueHtml5Editor(options)时该选项无效
//global component name
name: 'vue-html5-editor',//是否显示模块名称,开启的话会在工具栏的图标后台直接显示名称