vue项目使用百度编辑器

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





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



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

你可能感兴趣的:(vue项目使用百度编辑器)