安装wangEditor

npm install wangeditor

使用说明

• html部分

  <div>
       <div id="editor" class="editor"></div>
       <button class="btn btn-royal" @click="postfillContent()">保存</button>
  </div>
  

• js引入文件

  import E from 'wangeditor'
  

• 方法使用
  官网使用方法

    name: 'editor',
    mounted () {
      var editor = new E('#editor')
            editor.customConfig.onchange = (html) => {
              this.formArticle = html
            }
            editor.customConfig.uploadImgServer = '<%=path%>/Img/upload'; //上传URL
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
            editor.customConfig.uploadImgMaxLength = 5;    
            editor.customConfig.uploadFileName = 'myFileName';
            editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                 
                        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                        var url =result.data;
                        insertImg(url);
                 
                        // result 必须是一个 JSON 格式字符串！！！否则报错
                    }
                }
                editor.create();
    }
  

遇到的问题和解决办法
(问题)——官网推荐的这种方法是在新增或者是创建文章这种方法不错，但是如果在查看文章和修改文章的时候那么就在富文本编辑器里显示不出来。
(原因)——官网上的方法是在富文本编辑器创建完页面后再请求接口，那么在往其中方文章，完全是不可行的，我用了官网写的两个方法都是不可行的，这个都是预先写在页面里的，说以说实际并不适用

editor.txt.html('<p>用 JS 设置的内容</p>')
editor.txt.append('<p>追加的内容</p>')

(解决办法)——在请求完接口后再创建富文本编辑器（就莫问题啦，嘤嘤嘤）

	name: 'editor',
  	mounted () {},
  	activated () {
  			//请求文章
	      this.aa()
	  },
  	methods:{
  		aa(){
  			当接口请求成功在执行方法创建富文本编辑器
  			this.bb()
		},
		bb(){
      var editor = new E('#editor')
      editor.customConfig.onchange = (html) => {
        this.formArticle = html
      }
      editor.customConfig.uploadImgServer = '<%=path%>/Img/upload'; //上传URL
      editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
      editor.customConfig.uploadImgMaxLength = 5;    
      editor.customConfig.uploadFileName = 'myFileName';
      editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
                  // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                  // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
           
                  // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                  var url =result.data;
                  insertImg(url);
           
                  // result 必须是一个 JSON 格式字符串！！！否则报错
              }
          }
          editor.create();
    },
	}