UEditor中为图片上传等添加自定义请求参数
微wx笑
2020-05-13【在线工具】
1218
8
0关键字：
UEditor
官方文档中的做法：参考：自定义请求参数，存在一个问题，就是参数是以Get方式传递的。自定义请求参数很多情境下，编辑器与后台通信需要有登录状态，很多时候后台需要额外的参数。 UEdi
目录
官方文档中的做法：
参考：自定义请求参数，存在一个问题，就是参数是以Get方式传递的。
自定义请求参数
很多情境下，编辑器与后台通信需要有登录状态，很多时候后台需要额外的参数。 UEditor 自1.4.0版本提供设置额外参数的命令serverparam命令，可动态设置自定义参数表。 在向后台发出请求时，会把参数表以GET方式加到请求里。
另外，编辑器上传使用webuploader插件，在低版本的ie下，浏览器使用Flash形式的上传。 flash发送的请求不带有cookie，这里也需要额外的参数，让后台判断是否登录。
设置自定义参数表
通过serverparam命令设置自定义参数表，有四种调用方式，看下面的例子（下文的ue指编辑器实例）：
1 | <span style="color: rgb(255, 255, 255);">/* 1.传入函数,命令里执行该函数得到参数表,添加到已有参数表里 */ue.ready(function() {<br> ue.execCommand('serverparam', function(editor) {<br> return {<br> 'key': 'value'<br> };<br> }<br> };});<br></span> |
1 | <span style="color: rgb(255, 255, 255);">/* 2.传入参数表,添加到已有参数表里 */ue.ready(function() {<br> ue.execCommand('serverparam', {<br> 'key': 'value'<br> });});<br></span> |
1 | <span style="color: rgb(255, 255, 255);">/* 3.按照键值添加参数 */ue.ready(function() {<br> ue.execCommand('serverparam', 'key', 'value');});</span><br> |
1 | <span style="color: rgb(255, 255, 255);">/* 4.清除参数表 */ue.ready(function() {<br> ue.execCommand('serverparam'<br> };});</span><br> |
查询自定义参数表
前端发出请求时，会通过queryCommandValue方法，查询当前自定义参数表，把参数表以GET方式加到请求里：
1 | <span style="color: rgb(255, 255, 255);">ue.ready(function() {<br> ue.queryCommandValue('serverparam'); //返回参数值键值对的对象});</span><br> |
使用例子
1 | <span style="color: rgb(255, 255, 255);">var ue = UE.getEditor('container');ue.ready(function() {<br> ue.execCommand('serverparam', {<br> 'key1': 'value1',<br> 'key2': 'value2',<br> });});</span><br> |
提交请求的时候会把key1和key2一起以GET的方式发送到后台。后台再通过$GET["key1"]和$GET["key2"]获取key1和key2的值。
网上的其它做法：
本例中用的是uEditor 1.3.6版本，以为图片上传添加动态自定义参数为例，后台用.Net
第一步：修改ueditor.config.js文件，为window.UEDITOR_CONFIG添加参数代码如下
1 2 3 4 5 6 7 | ................................... window.UEDITOR_CONFIG = { newsID: 0,//添加自定义参数newsID //为编辑器实例添加一个路径，这个不能被注释 UEDITOR_HOME_URL : URL..................................................} |
第二步：修改UEditor1.3.6\dialogs\image\image.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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"; };}); |
第三部：后台获取NewsID
1 | var newsID = cxt.Request.Form["NewsID"]; |
第四步：构造编辑器是传入参数
1 | baidu.editor.ui.Editor({ newsID: __newsID}).render('text'); |
1 2 3 4 5 6 7 8 9 10 | UE.getEditor('newstext').execCommand('serverparam', 'titleBase64', getTitle(30));//自定义请求参数newstext.ready(function(){newstext.execCommand('serverparam',{'filepass':'1341',//修改时候是信息ID'classid' :'30','qiantai':0});newstext.setContent("文章内容", false);}); |
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/toolbox/online/2020-05-13/439.html
