使用 wangEditor 富文本编辑器

wangEditor富文本编辑器：

文档地址：https://www.kancloud.cn/wangfupeng/wangeditor3/332599

使用步骤：

1. npm安装：npm install wangeditor ；
2. 新建editor.vue组件；

   <template>
     <div>
       <!-- 富文本编辑器容器 -->
       <div:id="id"></div>
     </div>
   </template>
   
   <script>
     import E from 'wangeditor'
     export default {
       name: 'ueditor',
       data () {
         return {
           editor: null
         }
       },
       props: {
         id: {
           type: String
         },
         content: {
           type: String
         }	   
       },
       mounted () {
         this.init()
       },
       methods: {
         init () {
         	// 初始化
           this.editor = new E(`#${this.id}`)
            // 开启上传本地图片tab，上传图片到服务器
       	this.editor.customConfig.uploadFileName = 'file' // 设置文件名
       	this.editor.customConfig.uploadImgServer = 'http://192.168.100/believe-back/news/uploadImage'   // 设置上传地址
           this.editor.customConfig.uploadImgHeaders = { // 设置请求头
             token: token
           }
           this.editor.customConfig.uploadImgHooks = { //上传图片的监听函数
             // 自定义插入图片事件
             // insertImg是插入图片的函数
             customInsert: function (insertImg, result, editor) {
               const url = result.data
               insertImg(url)
             },
             before: function (xhr, editor, files) {},
             success: function (xhr, editor, result) {},
             fail: function (xhr, editor, result) {},
             error: function (xhr, editor) {},
             timeout: function (xhr, editor) {},
           }
      		this.editor.create()
   		
   		//回填内容
           setTimeout(() => {
             this.editor.txt.html(this.content)
           }, 500)
         },
         //获取内容
         getContent() {
           return this.editor.txt.html()
         }
       }	   
     }
   </script>
   

3. 在父组件中引入；

   <Editor :id="ueditorId" :content="ueditorContent"  ref="editorRef"></Editor >
   
   import Editor  from '@/components/editor/editor.vue'
   components: {
       Editor 
    }
   
   //父组件获取内容
   this.$refs.editorRef.getContent()
   

上传图片：

网络图片：

默认只显示网络图片tab。可以通过设置editor.customConfig.showLinkImg = false来隐藏。

上传本地图片：

1. 设置editor.customConfig.uploadImgShowBase64 = true：使用 base64 保存图片；

   设置editor.customConfig.uploadImgShowBase64 = true可以使用base64编码直接将图片插入到内容中，配置简单；但是如果上传图片过大或上传多张图片，字段可能会由于被截断导致保存失败。

2. 设置editor.customConfig.uploadImgServer = ‘/upload’：上传图片到服务器，

可以通过这两种设置来显示上传图片tab，但这两个配置不可同时使用。

可以使用this.editor.txt.html().split(‘img’).length - 1来获取上传的图片数量。

Vue解析富文本内容：

富文本内容被直接保存为HTML，因此Vue中要使用v-html加载富文本显示。

富文本中独占一行的图片尺寸过大，而导致出现横向滚动条：

解决方法：设置图片的最大宽度为100%，确保不超出屏幕宽度。

let regex = new RegExp('<img', 'gi');
let  content.replace(regex, `<img style="max-width: 100%; height: auto;"`); //content为富文本的内容

富文本中独占一行的图片的下方出现一段空白：

解决方法：p标签包裹img标签，下面会出现一些空白，可以通过设置图片的vertical-align不为baseline来解决。

let regex = new RegExp('<img', 'gi');
let  content.replace(regex, `<img style="vertical-align:middle;"`); //content为富文本的内容