在线html5编辑器教程,Vue使用vue-html5-editor的 富文本编辑器

最近由于工作的需求，需要在后台管理界面中，添加一个富文本编辑器。

富文本编辑器，我们之前用过百度的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',//是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称