在线工具您现在的位置是:首页 > 工具箱 > 在线工具

UEditor中为图片上传等添加自定义请求参数

<a href='mailto:'>微wx笑</a>的头像微wx笑2020-05-13 20:27:04在线工具人已围观关键字: UEditor  

官方文档中的做法:参考:自定义请求参数,存在一个问题,就是参数是以Get方式传递的。自定义请求参数很多情境下,编辑器与后台通信需要有登录状态,很多时候后台需要额外的参数。 UEdi

官方文档中的做法:

参考:自定义请求参数,存在一个问题,就是参数是以Get方式传递的。aLF编程技术_踩坑日志_进阶指南_无知人生

自定义请求参数

很多情境下,编辑器与后台通信需要有登录状态,很多时候后台需要额外的参数。 UEditor 自1.4.0版本提供设置额外参数的命令serverparam命令,可动态设置自定义参数表。 在向后台发出请求时,会把参数表以GET方式加到请求里。aLF编程技术_踩坑日志_进阶指南_无知人生

另外,编辑器上传使用webuploader插件,在低版本的ie下,浏览器使用Flash形式的上传。 flash发送的请求不带有cookie,这里也需要额外的参数,让后台判断是否登录。aLF编程技术_踩坑日志_进阶指南_无知人生

设置自定义参数表

通过serverparam命令设置自定义参数表,有四种调用方式,看下面的例子(下文的ue指编辑器实例):aLF编程技术_踩坑日志_进阶指南_无知人生

/* 1.传入函数,命令里执行该函数得到参数表,添加到已有参数表里 */ue.ready(function() {
   ue.execCommand('serverparam', function(editor) {
           return {
               'key': 'value'
           };
       }
   };});
/* 2.传入参数表,添加到已有参数表里 */ue.ready(function() {
   ue.execCommand('serverparam', {
       'key': 'value'
   });});
/* 3.按照键值添加参数 */ue.ready(function() {
   ue.execCommand('serverparam', 'key', 'value');});

/* 4.清除参数表 */ue.ready(function() {
   ue.execCommand('serverparam'
   };});


aLF编程技术_踩坑日志_进阶指南_无知人生

查询自定义参数表

前端发出请求时,会通过queryCommandValue方法,查询当前自定义参数表,把参数表以GET方式加到请求里:aLF编程技术_踩坑日志_进阶指南_无知人生

ue.ready(function() {
   ue.queryCommandValue('serverparam'); //返回参数值键值对的对象});


aLF编程技术_踩坑日志_进阶指南_无知人生

使用例子


aLF编程技术_踩坑日志_进阶指南_无知人生

var ue = UE.getEditor('container');ue.ready(function() {
   ue.execCommand('serverparam', {
       'key1': 'value1',
       'key2': 'value2',
   });});

提交请求的时候会把key1和key2一起以GET的方式发送到后台。后台再通过$GET["key1"]和$GET["key2"]获取key1和key2的值。aLF编程技术_踩坑日志_进阶指南_无知人生


aLF编程技术_踩坑日志_进阶指南_无知人生

网上的其它做法:

UEditor中为图片上传等添加自定义参数aLF编程技术_踩坑日志_进阶指南_无知人生

    本例中用的是uEditor 1.3.6版本,以为图片上传添加动态自定义参数为例,后台用.NetaLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    第一步:修改ueditor.config.js文件,为window.UEDITOR_CONFIG添加参数代码如下aLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    ................................... 
    window.UEDITOR_CONFIG = {
            newsID: 0,//添加自定义参数newsID
            //为编辑器实例添加一个路径,这个不能被注释
            UEDITOR_HOME_URL : URL
    ..................................................
    }


    aLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    第二步:修改UEditor1.3.6\dialogs\image\image.htmlaLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    imageUploader.init(flashOptions, callbacks);
        $G("upload").onclick = function() {
    
            if (!savePathComplete) {
                alert('请等待保存目录就绪!')
                return;
            }
            /**
            * 接口imageUploader.setPostParams()可以在提交时设置本次上传提交的参数(包括所有图片)
            * 参数为json对象{"key1":"value1","key2":"value2"},其中key即为向后台post提交的name,value即为值。
            * 其中有一个特殊的保留key值为action,若设置,可以更改本次提交的处理地址
            */
            var postParams = {
                "dir": baidu.g("savePath").value,
                "NewsID": editor.options.newsID //添加参数“NewsID”
            };
            imageUploader.setPostParams(postParams);
            flashObj.upload();
            this.style.display = "none";
            $G("savePath").parentNode.style.display = "none";
        };
    
    });


    aLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    第三部:后台获取NewsIDaLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    var newsID = cxt.Request.Form["NewsID"];


    aLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    第四步:构造编辑器是传入参数aLF编程技术_踩坑日志_进阶指南_无知人生


    aLF编程技术_踩坑日志_进阶指南_无知人生

    baidu.editor.ui.Editor({ newsID: __newsID}).render('text');


    aLF编程技术_踩坑日志_进阶指南_无知人生

    本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

    很赞哦! () 有话说 ()