vue项目使用百度编辑器

1.下载ueditor包放入public static里面
2.创建一个ueditor.vue

<template>
  <div>
    <script id="editor" type="text/plain" ></script>
  </div>
</template>

<script>
  import '你的路径/static/UEditor/ueditor.config.js'
  import '你的路径/public/static/UEditor/ueditor.all.js'
  import '你的路径/public/static/UEditor/lang/zh-cn/zh-cn.js'
  import '你的路径/public/static/UEditor/jquery-2.2.3.min.js'

  export default {
    name: "UEditor",
    props: {
      id: {
          type: String
      },
      config: {
          type: Object
      }
    },
    data() {
      return {
        editor: null
      }
    },
    mounted() {
      //初始化UE
      const _this = this;
      this.editor = UE.delEditor("editor");
      this.editor = UE.getEditor('editor',this.config);
    },
    destoryed() {
      this.editor.destory();
    },
    methods:{
      getUEContent: function(){
       return this.editor.getContent();
      },
      getContentTxt: function(){
        return this.editor.getContentTxt();
      }
    }
  }
</script>

3.需要用到编辑的页面先引入ueditor.vue

<ueditor  :config='config' ref="ue"></ueditor>

this.$refs.ue.getUEContent()获取编辑器的内容。

4.图片上传配置

ueditor.config.js

window.UEDITOR_HOME_URL = "/static/UEditor/"; //引入包的位置 22行左右
//window.UEDITOR_CONFIG里的serverUrl:“服务器接口url”

如果需配置token，则需要在ueditor.all.js里，约8242行，加上token

xhr.setRequestHeader('Authorization', 'Bearer '+JSON.parse(window.sessionStorage.getItem("token")).token);
if (method == "POST") {
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(submitStr);
  } else {
      xhr.send(null);
  }

上传图片携带token,dialogs/image/image.js 大约704行

uploader.on('uploadBeforeSend', function (file, data, header) {
                //这里可以通过data对象添加POST参数
                header['X_Requested_With'] = 'XMLHttpRequest';
                header['Authorization'] = 'Bearer '+JSON.parse(window.sessionStorage.getItem("token")).token;
            });

视频携带token,dialogs/video/video.js,大约717行

uploader.on('uploadBeforeSend', function (file, data, header) {
                //这里可以通过data对象添加POST参数
                header['X_Requested_With'] = 'XMLHttpRequest';
                header['Authorization'] = 'Bearer '+JSON.parse(window.sessionStorage.getItem("token")).token;
            });

5.我是在弹框里加的编辑器，出现过工具栏和内容框分离的情况
解决方法是在ueditor.config.js里大约296行autoFloatEnabled改为false

最后编辑于：2020.10.23 17:12:22