• 【富文本编辑器】简记功能：neditor上传操作时提交额外数据

    目录

    编辑器下载（本文使用版本v2.1.19）

    功能需求

    解决思路

    相关代码

    调用实例的html

    neditor.config.js（搜索修改内容：/* 设置额外请求参数 */）

     完成，如有其它方法，欢迎一起讨论

    编辑器下载（本文使用版本v2.1.19）

    Releases · notadd/neditor · GitHub

    功能需求

    上传图片时需要提交参数：存储文件名的前缀名、存放目录名称

    解决思路

    neditor基于ueditor再次封装，查询文档（UEditor Docs）可通过ue.execCommand来设置额外的请求参数，通过neditor服务端配置文件neditor.service.js来对每个上传操作中将额外的请求参数加入到formData中，完成添加额外请求参数的需求。

    相关代码

    调用实例的html

    1. <script type="text/javascript" charset="utf-8" src="/neditor-v2.1.19/neditor.config.js">script>
    2. <script type="text/javascript" charset="utf-8" src="/neditor-v2.1.19/neditor.api.js">script>
    3. <script type="text/javascript" charset="utf-8" src="/neditor-v2.1.19/neditor.service.js">script>
    4. <script type="text/javascript" charset="utf-8" src="/neditor-v2.1.19/neditor.parse.js">script>
    5. <form class="layui-form layui-form-pane" onsubmit="return false" lay-filter="FormFilter">
    6.     <div class="layui-form-item layui-form-item-130">
    7.         <div class="layui-inline input-label">产品描述1div>
    8.         <div class="layui-input-block">
    9.             <textarea name="goods1_textarea" id="goods_textarea_editor" placeholder="请输入产品描述" lay-verify=""
    10.                       autocomplete="off" class="layui-textarea">textarea>
    11.         div>
    12.     div>
    13. form>
    14. <script>
    15.     layui.use(['form', 'layer'], function () {
    16.         let form = layui.form, layer = layui.layer
    17.         let ue = UE.getEditor('goods_textarea_editor', {
    18.             initialFrameWidth: '100%'
    19.         })
    20.         // 设置额外请求参数
    21.         ue.ready(function() {
    22.            ue.execCommand('serverparam', {
    23.                 prefix: 'goods',
    24.                 dir: 'guangzhou'
    25.             });
    26.         });
    27.     })
    28. script>

    neditor.config.js（搜索修改内容：/* 设置额外请求参数 */）

    1. /**
    2.  * 自定义上传接口
    3.  * 由于所有Neditor请求都通过editor对象的getActionUrl方法获取上传接口，可以直接通过复写这个方法实现自定义上传接口
    4.  * @param {String} action 匹配neditor.config.js中配置的xxxActionName
    5.  * @returns 返回自定义的上传接口
    6.  */
    7. UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    8. UE.Editor.prototype.getActionUrl = function(action) {
    9.     /* 按config中的xxxActionName返回对应的接口地址 */
    10.     if (action == 'uploadimage' || action == 'uploadscrawl') {
    11.         return 'http://a.b.com/upload.php';
    12.     } else if (action == 'uploadvideo') {
    13.         return 'http://a.b.com/video.php';
    14.     } else {
    15.         return this._bkGetActionUrl.call(this, action);
    16.     }
    17. }
    18.  
    19. /**
    20.  * 图片上传service
    21.  * @param {Object} context UploadImage对象 图片上传上下文
    22.  * @param {Object} editor  编辑器对象
    23.  * @returns imageUploadService 对象
    24.  */
    25. window.UEDITOR_CONFIG['imageUploadService'] = function(context, editor) {
    26.     return {
    27.         /** 
    28.          * 触发fileQueued事件时执行
    29.          * 当文件被加入队列以后触发，用来设置上传相关的数据 (比如: url和自定义参数)
    30.          * @param {Object} file 当前选择的文件对象
    31.          */
    32.         setUploadData: function(file) {
    33.             return file;
    34.         },
    35.         /**
    36.          * 触发uploadBeforeSend事件时执行
    37.          * 在文件上传之前触发，用来添加附带参数
    38.          * @param {Object} object 当前上传对象
    39.          * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数
    40.          * @param {Object} headers 可以扩展此对象来控制上传头部
    41.          * @returns 上传参数对象
    42.          */
    43.         setFormData: function(object, data, headers) {
    44.             /* 设置额外请求参数 */
    45.             let serverparam = editor.queryCommandValue('serverparam')
    46.             if (JSON.stringify(serverparam) != "{}") {
    47.                 Object.assign(object, serverparam)
    48.                 Object.assign(data, serverparam)
    49.             }
    50.             return data;
    51.         },
    52.         /**
    53.          * 触发startUpload事件时执行
    54.          * 当开始上传流程时触发，用来设置Uploader配置项
    55.          * @param {Object} uploader
    56.          * @returns uploader
    57.          */
    58.         setUploaderOptions: function(uploader) {
    59.             return uploader;
    60.         },
    61.         /**
    62.          * 触发uploadSuccess事件时执行
    63.          * 当文件上传成功时触发，可以在这里修改上传接口返回的response对象
    64.          * @param {Object} res 上传接口返回的response
    65.          * @returns {Boolean} 上传接口返回的response成功状态条件 (比如: res.code == 200)
    66.          */
    67.         getResponseSuccess: function(res) {
    68.             return res.code == 200;
    69.         },
    70.         /* 指定上传接口返回的response中图片路径的字段，默认为 url
    71.          * 如果图片路径字段不是res的属性，可以写成 对象.属性 的方式，例如：data.url 
    72.          * */
    73.         imageSrcField: 'data.url'
    74.     }
    75. };
    76.  
    77. /**
    78.  * 视频上传service
    79.  * @param {Object} context UploadVideo对象 视频上传上下文
    80.  * @param {Object} editor  编辑器对象
    81.  * @returns videoUploadService 对象
    82.  */
    83. window.UEDITOR_CONFIG['videoUploadService'] = function(context, editor) {
    84.     return {
    85.         /** 
    86.          * 触发fileQueued事件时执行
    87.          * 当文件被加入队列以后触发，用来设置上传相关的数据 (比如: url和自定义参数)
    88.          * @param {Object} file 当前选择的文件对象
    89.          */
    90.         setUploadData: function(file) {
    91.             return file;
    92.         },
    93.         /**
    94.          * 触发uploadBeforeSend事件时执行
    95.          * 在文件上传之前触发，用来添加附带参数
    96.          * @param {Object} object 当前上传对象
    97.          * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数
    98.          * @param {Object} headers 可以扩展此对象来控制上传头部
    99.          * @returns 上传参数对象
    100.          */
    101.         setFormData: function(object, data, headers) {
    102.             /* 设置额外请求参数 */
    103.             let serverparam = editor.queryCommandValue('serverparam')
    104.             if (JSON.stringify(serverparam) != "{}") {
    105.                 Object.assign(object, serverparam)
    106.                 Object.assign(data, serverparam)
    107.             }
    108.             return data;
    109.         },
    110.         /**
    111.          * 触发startUpload事件时执行
    112.          * 当开始上传流程时触发，用来设置Uploader配置项
    113.          * @param {Object} uploader
    114.          * @returns uploader
    115.          */
    116.         setUploaderOptions: function(uploader) {
    117.             return uploader;
    118.         },
    119.         /**
    120.          * 触发uploadSuccess事件时执行
    121.          * 当文件上传成功时触发，可以在这里修改上传接口返回的response对象
    122.          * @param {Object} res 上传接口返回的response
    123.          * @returns {Boolean} 上传接口返回的response成功状态条件 (比如: res.code == 200)
    124.          */
    125.         getResponseSuccess: function(res) {
    126.             return res.code == 200;
    127.         },
    128.         /* 指定上传接口返回的response中视频路径的字段，默认为 url
    129.          * 如果视频路径字段不是res的属性，可以写成 对象.属性 的方式，例如：data.url 
    130.          * */
    131.         videoSrcField: 'data.url'
    132.     }
    133. };
    134.  
    135. /**
    136.  * 涂鸦上传service
    137.  * @param {Object} context scrawlObj对象
    138.  * @param {Object} editor  编辑器对象
    139.  * @returns scrawlUploadService 对象
    140.  */
    141. window.UEDITOR_CONFIG['scrawlUploadService'] = function(context, editor) {
    142.     return scrawlUploadService = {
    143.         /**
    144.          * 点击涂鸦模态框确认按钮时触发
    145.          * 上传涂鸦图片
    146.          * @param {Object} file 涂鸦canvas生成的图片
    147.          * @param {Object} base64 涂鸦canvas生成的base64
    148.          * @param {Function} success 上传成功回调函数,回传上传成功的response对象
    149.          * @param {Function} fail 上传失败回调函数,回传上传失败的response对象
    150.          */
    151.  
    152.         /**
    153.          * 上传成功的response对象必须为以下两个属性赋值
    154.          * 
    155.          * 上传接口返回的response成功状态条件 {Boolean} (比如: res.code == 200)
    156.          * res.responseSuccess = res.code == 200;
    157.          * 
    158.          * 指定上传接口返回的response中涂鸦图片路径的字段，默认为 url 
    159.          * res.videoSrcField = 'url';
    160.          */
    161.         uploadScraw: function(file, base64, success, fail) {
    162.             /* 模拟上传操作 */
    163.             var formData = new FormData();
    164.             formData.append('file', file, file.name);
    165.             /* 设置额外请求参数 */
    166.             let serverparam = editor.queryCommandValue('serverparam')
    167.             if (JSON.stringify(serverparam) != "{}") {
    168.                 for (let key in serverparam) {
    169.                     formData.append(key,serverparam[key])
    170.                 }
    171.             }
    172.             $.ajax({
    173.                 url: editor.getActionUrl(editor.getOpt('scrawlActionName')),
    174.                 type: 'POST',
    175.                 //ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
    176.                 contentType: false,
    177.                 //取消帮我们格式化数据，是什么就是什么
    178.                 processData: false,
    179.                 data: formData
    180.             }).done(function(res) {
    181.                 // var res = JSON.parse(res);
    182.                 
    183.                 /* 上传接口返回的response成功状态条件 (比如: res.code == 200) */
    184.                 res.responseSuccess = res.code == 200;
    185.  
    186.                 /* 指定上传接口返回的response中涂鸦图片路径的字段，默认为 url 
    187.                  * 如果涂鸦图片路径字段不是res的属性，可以写成 对象.属性 的方式，例如：data.url
    188.                  */
    189.                 res.scrawlSrcField = 'data.url';
    190.  
    191.                 /* 上传成功 */
    192.                 success.call(context, res);
    193.             }).fail(function(err) {
    194.                 /* 上传失败 */
    195.                 fail.call(context, err);
    196.             });
    197.         }
    198.     }
    199. }
    200.  
    201. /**
    202.  * 附件上传service
    203.  * @param {Object} context UploadFile对象 附件上传上下文
    204.  * @param {Object} editor  编辑器对象
    205.  * @returns fileUploadService 对象
    206.  */
    207. window.UEDITOR_CONFIG['fileUploadService'] = function(context, editor) {
    208.     return {
    209.         /** 
    210.          * 触发fileQueued事件时执行
    211.          * 当文件被加入队列以后触发，用来设置上传相关的数据 (比如: url和自定义参数)
    212.          * @param {Object} file 当前选择的文件对象
    213.          */
    214.         setUploadData: function(file) {
    215.             return file;
    216.         },
    217.         /**
    218.          * 触发uploadBeforeSend事件时执行
    219.          * 在文件上传之前触发，用来添加附带参数
    220.          * @param {Object} object 当前上传对象
    221.          * @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数
    222.          * @param {Object} headers 可以扩展此对象来控制上传头部
    223.          * @returns 上传参数对象
    224.          */
    225.         setFormData: function(object, data, headers) {
    226.             /* 设置额外请求参数 */
    227.             let serverparam = editor.queryCommandValue('serverparam')
    228.             if (JSON.stringify(serverparam) != "{}") {
    229.                 Object.assign(object, serverparam)
    230.                 Object.assign(data, serverparam)
    231.             }
    232.             return data;
    233.         },
    234.         /**
    235.          * 触发startUpload事件时执行
    236.          * 当开始上传流程时触发，用来设置Uploader配置项
    237.          * @param {Object} uploader
    238.          * @returns uploader
    239.          */
    240.         setUploaderOptions: function(uploader) {
    241.             return uploader;
    242.         },
    243.         /**
    244.          * 触发uploadSuccess事件时执行
    245.          * 当文件上传成功时触发，可以在这里修改上传接口返回的response对象
    246.          * @param {Object} res 上传接口返回的response
    247.          * @returns {Boolean} 上传接口返回的response成功状态条件 (比如: res.code == 200)
    248.          */
    249.         getResponseSuccess: function(res) {
    250.             return res.code == 200;
    251.         },
    252.         /* 指定上传接口返回的response中附件路径的字段，默认为 url
    253.          * 如果附件路径字段不是res的属性，可以写成 对象.属性 的方式，例如：data.url 
    254.          * */
    255.         fileSrcField: 'data.url'
    256.     }
    257. };

     完成，如有其它方法，欢迎一起讨论

  • 相关阅读:
    Windows11 环境安装Gradle
    Q-REG论文阅读
    Java如何遍历HashSet呢？
    开源好用的所见即所得(WYSIWYG)编辑器：Editor.js
    两横一纵 | 寅家科技发布10年新征程战略
    微信小程序实现数值监听（页面和组件属性）
    Redis存储结构之QuickList
    《golang设计模式》第二部分·结构型模式-06-享元模式（Flyweight）
    亚马逊API接口
    Web开发之JavaScript知识点总结
  • 原文地址：https://blog.csdn.net/qq_36436407/article/details/128191211