uediter单独的配置上传图片，视频和文件

最新推荐文章于 2025-05-19 12:36:50 发布

原创最新推荐文章于 2025-05-19 12:36:50 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器 #控件 #upload

本文介绍如何配置UEditor的上传组件以实现图片、文件及视频的上传功能。通过修改特定文件，可以定制上传路径，并利用JavaScript监听上传事件，实现预览和路径赋值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用过多的编辑器，现在应百度开发的uediter，这款编辑器对表格比较友好，也可以单独使用上传的控件，总体来说是比较方便的。但是有一个缺点，就是首行缩进，有时候会缩进的不对，这个很是讨厌。

这次主要是说一下怎么单独使用uediter的上传控件，之前一直是用着图片上传，这次因为需要有做了视频上传和文件上传。

在上传文件时想要修改上传文件路径的，修改的地址在：upload_json.ashx和file_manager_json.ashx文件中

最基本的配置这个就不说了，在配置图片上传时

html代码为：

加载编辑器
<script type="text/plain" id="upload_ue1"></script>
<asp:TextBox ID="txtpic" CssClass="titlepic1" runat="server" Width="50%"></asp:TextBox>
按钮，弹出选择框
<input type="button" id="image1" value="选择图片" style="cursor: pointer;" />
预览图片
<div id="preview1" style="display: none;"></div>

js代码：

//上传图片
if ($("#upload_ue1").length > 0) {
   upue1 = UE.getEditor('upload_ue1');
   upue1.ready(function () {
   upue1.execCommand('serverparam', 'thumbnail', '1');
   upue1.setDisabled('insertimage');
   upue1.hide();
   //加载监听图片上传事件
   upue1.addListener('beforeInsertImage ', function (t, arg) {
     //将地址赋值给相应的input,只去第一张图片的路径
     var imgpath = arg[0].src
     var imghtml = "<a href=\"" + imgpath + "\" target=\"_blank\" title=\"点击查看原图\"><img src=\"" + imgpath + "\" width=\"50px\" /></a>";
     $(".titlepic1").attr("value", imgpath);
     //图片预览
     $("#preview1").html(imghtml);
     $("#preview1").show();
     })
    });
  //上传图片
  $("#image1").click(function () {
     var myImage1 = upue1.getDialog("insertimage");
     myImage1.open();
  });
  //修改时显示图片
  if ($(".titlepic1").val().length > 0) {
     var imgstr = $(".titlepic1").val().split('|');
     var imghtml = "";
     for (var i = 0; i < imgstr.length; i++) {
         imghtml += "<a href=\"" + imgstr[i] + "\" target=\"_blank\" title=\"点击查看原图\"><img src=\"" + imgstr[i] + "\" width=\"50px\" /></a>";
         }
      //图片预览
     $("#preview1").html(imghtml);
     $("#preview1").show();
    }
}

配置图片上传的这个比较简单，不用修改太多的配置，在上传文件和视频时比较麻烦。

配置文件上传：
在ueditor/dialogs/attachment/attachment.js文件中定位
editor.execCommand，在这之前新增代码代码：

editor.fireEvent('afterUpfile', list);//新增
editor.execCommand('insertfile', list);//原内容

html代码：

<asp:TextBox ID="mov" CssClass="file1" runat="server" Width="50%">
<input type="button" id="file1" value="选择文件" style="cursor: pointer;" />
<script type="text/plain" id="upload_file"></script>

js代码：

if ($("#upload_file").length > 0) {
    upfile = UE.getEditor('upload_file');
    upfile.ready(function () {
      upfile.hide();
      //监听文件上传事件
      upfile.addListener('afterUpfile', function (t, arg) {
         var path = arg[0].title;
         $(".file1").attr("value", path);
       })
     });
     //上传文件
     $("#file1").click(function () {
       var myFile1 = upfile.getDialog("attachment");
       myFile1.open();
     });
}

配置视频上传：
一、在ueditor/dialogs/attachment/video.js文件中定位
editor.execCommand，在这之前新增代码代码：

editor.fireEvent('afterUpVideo', videoObjs);//新增
editor.execCommand('insertfile', videoObjs);//原内容

二、在ueditor.all.js中找到me.execCommand(“inserthtml”,html.join(“”),true);在这句后面加上
me.fireEvent(‘afterUpVideo’,videoObjs);

html代码：

<asp:TextBox ID="mov" CssClass="video1" runat="server" Width="50%">
<input type="button" id="btn" value="选择文件" style="cursor: pointer;" />
<script type="text/plain" id="upload_video"></script>

js代码：

if ($("#upload_video").length > 0) {
    upvideo = UE.getEditor('upload_video');
    upvideo.ready(function () {
      upvideo.hide();
      //监听视频上传事件
      upvideo.addListener('afterUpVideo', function (t, arg) {
         var path = arg[0].title;
         $(".video1").attr("value", path);
       })
     });
     //上传文件
     $("#btn").click(function () {
       var myVideo1 = upvideo.getDialog("insertvideo");
       myVideo1.open();
     });
}