有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue ueditor 在vue+element为editor富文编辑器添加token验证

vue 炮渣日记 4周前 (11-11) 67次浏览 已收录 0个评论 扫描二维码

前后端分离时,后端做了JWT验证,百度UEditor富文编辑器不带token参数;需要自定义添加token到HTTP请求头中的”Authorization”,下面进行token配置,这里重点讲述秀米编辑部分。

vue ueditor 在vue+element为editor富文编辑器添加token验证

首先引入UEditor,这里@before-init=”addCustomButton”是自定义秀米按钮,可以到秀米网站和百度Editor网站查看配置文档。

    <vue-ueditor-wrap
        v-model="msg"
        :config="editorConfig "
        @before-init="addCustomButton"
    ></vue-ueditor-wrap>

这里的自定义参数ueditorToken传入sessionStorage.token 或 this.$Storage.get(‘token’)的值,这两个值可以在登录时生成。下面初始化UEditor配置。

    created() {
        this.editorConfig = {
           
            autoHeightEnabled: false, // 编辑器不自动被内容撑高
            initialFrameHeight: 600, // 初始容器高度
            initialFrameWidth: "100%", // 初始容器宽度
            serverUrl:
                "/site/demo/ueditor",
            UEDITOR_HOME_URL: "/UEditor/",
            catchRemoteImageEnable: true, // 抓取远程图片
            maximumWords: "100000000",
            ueditorToken: sessionStorage.token || this.$Storage.get('token'),
        };
    },

在ueditor.config.js加入自定义参数ueditorToken。

vue ueditor 在vue+element为editor富文编辑器添加token验证
 // 服务器验证token
  , ueditorToken: "token"

在配置UEditor时,先把ueditor.all.js改成ueditor.all.min.js这样才能进行后续修改。现在是修改远程抓取内容部分,打开ueditor.all.min.js(原来的ueditor.all.js)进行修改。

vue ueditor 在vue+element为editor富文编辑器添加token验证

这里加入自定义参数,请注意右边的行数,只增加红框的一句。

vue ueditor 在vue+element为editor富文编辑器添加token验证
        function catchremoteimage(imgs, callbacks) {
            var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',
                url = utils.formatUrl(catcherActionUrl + (catcherActionUrl.indexOf('?') == -1 ? '?':'&') + params),
                isJsonp = utils.isCrossDomainUrl(url),
                opt = {
                    'method': 'POST',
                    'dataType': isJsonp ? 'jsonp':'',
                    'timeout': 60000, //单位:毫秒,回调请求超时设置。目标用户如果网速不是很快的话此处建议设置一个较大的数值
                    'onsuccess': callbacks["success"],
                    'onerror': callbacks["error"],
                    'options': me.options,//这里是增加的参数
                };
            opt[catcherFieldName] = imgs;
            ajax.request(url, opt);
        }

最后部分就是向后端中请求时增加验证的token

vue ueditor 在vue+element为editor富文编辑器添加token验证

红框部分是秀米的请求部分,也就是下面的第一个;第二个是UEditor上传图片的请求验证。

        if (method == "POST") {
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader("Authorization", ajaxOptions.options.ueditorToken);
            xhr.send(submitStr);
        } else {
            xhr.setRequestHeader("Authorization", ajaxOptions.options.ueditorToken);
            xhr.send(null);
        }
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址