vue+element ui实现富文本编辑器并将内容传给后台，后台生成word保存

在vue+element ui开发项目过程中需要实现富文本编辑器功能

第一种方法：vue-quill-editor（参考了https://www.jianshu.com/p/a6cba69d6e49这篇文章）

      vue-quill-editor github地址： https://github.com/surmon-china/vue-quill-editor
      官方文档地址： https://www.npmjs.com/package/vue-quill-editor

      参考官方文档和 RealHumans的文章之后成功显示出编辑器

 

　   效果如图：

 

　 那么接下来就是给后台传值的问题了，当我点击提交按钮，获取编辑器文本中的内容时发现不对劲了

　 我在编辑中设置的样式，比如文字居中，文字大小等通通不显示了，这是怎么回事？

 

 

 

 

　 我发现获取的内容多了几个class，类似“ql-align-center”，“ql-size-huge”的class，打开控制台看一下，好嘛~ 这些class就是控制字体居中、字体大小的样式，这样样式在main.js中进行了引入

　　

 

　　因为不是行内样式，传给后台并不能显示样式，没有办法我只好舍弃此方法，然后对比了一些其他编辑器，最后选用了百度的富文本编辑器，百度的富文本功能更强大，而且更大众一些

　　

 

 第二种方法：vue-cli 使用百度富文本编辑器插件【Editor】（参考了这篇文章https://blog.csdn.net/qq_39005315/article/details/86570709，很详细的讲解了开发流程）

　　npm安装： npm i vue-ueditor-wrap


　　yarn安装：yarn add vue-ueditor-wrap

　　github地址：https://github.com/HaoChuan9421/vue-ueditor-wrap.git

　　显示效果如下图：

 

 

 　 看起来很不错的样子哦！赶紧测试一下获取到的内容是什么样子的！！！！

　   　　

　　　哇哦~ 成功了，是行内样式，传给后台，生成word样式也没丢，ok！完成

 

　　注：百度的富文本编辑器有个bug，需要后台配置图片、文件上传接口，大家可以参考这篇文章哦（https://www.cnblogs.com/lwh0206/p/7084714.html）