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）