经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » jQuery » 查看文章
Tinymce 编辑器添加自定义图片管理插件
来源：cnblogs　　作者：JioJun　　时间：2018/9/30 11:22:57　　对本文有异议

在使用Tinymce的过程中需要用到图片上传功能，而提供的上传插件在上传文件后是给了一个连接地址，就想用户需要什么图片，不能用最直观的方式表现出来么！

虽然官网上也有一个文件管理的插件moxiemanager，可奈何他是收费的！https://www.tiny.cloud/docs/plugins/moxiemanager/

然后就打算自己弄一个，其实实现效果起来很简单，就只是做了一个类型相册管理的功能，然后在点击图片的时候，将图片的地址信息插入到编辑器里就行了，由于后台用的是layui

的框架，所以界面也就用了layui来实现，这里我只弄了上传，删除功能，也可自己添加检索等功能，实现效果如下

1 、添加插件

我们需要在tinymce的 Plugins  目录下新建一个filemanager文件夹，并添加一个名为plugin.min.js ，其中editor传参后再图片管理页面通过

var editor = top.tinymce.activeEditor.windowManager.getParams().editor; 获取编辑器对象，进行图片插入操作

  1. tinymce.PluginManager.add("filemanager", function (editor, url) {
  2.     editor.addButton("filemanager", {
  3.         title: "图片管理",
  4.         icon: 'image',
  5.         onclick: function () {
  6.             editor.windowManager.open({
  7.                 title: "图片管理",
  8.                 url:  "/Administrator/Filemanager/Editor",
  9.                 width: window.innerWidth * 0.9,
  10.                 height: window.innerHeight * 0.8
  11.             }, {
  12.                     editor: editor // pointer to access editor from cshtml
  13.             })
  14.         }
  15.     })
  16. });

　　

2. 相册功能实现

文件夹管理实体类

  1. public class FileManagerDirectoryEntity : BaseEntity
  2.     {
  3.         /// <summary>
  4.         /// 父级Id
  5.         /// </summary>
  6.         public int ParentId { get; set; }
  7.  
  8.         /// <summary>
  9.         /// 文件夹名称
  10.         /// </summary>
  11.         public string Name { get; set; }
  12.  
  13.         /// <summary>
  14.         /// 路径
  15.         /// </summary>
  16.         public string FullPath { get; set; }
  17.  
  18.         /// <summary>
  19.         /// 子文件数量
  20.         /// </summary>
  21.         public int ChildrenCount { get; set; }
  22.     }

　　

文件管理实体类

  1. public class FileManagerDirectoryEntity : BaseEntity
  2.     {
  3.         /// <summary>
  4.         /// 父级Id
  5.         /// </summary>
  6.         public int ParentId { get; set; }
  7.  
  8.         /// <summary>
  9.         /// 文件夹名称
  10.         /// </summary>
  11.         public string Name { get; set; }
  12.  
  13.         /// <summary>
  14.         /// 路径
  15.         /// </summary>
  16.         public string FullPath { get; set; }
  17.  
  18.         /// <summary>
  19.         /// 子文件数量
  20.         /// </summary>
  21.         public int ChildrenCount { get; set; }
  22.     }

　　

相册功能具体实现controller

  1. public class FileManagerController : Controller
  2.     {
  3.  
  4.         #region Core
  5.         private readonly IRepository<FileManagerDirectoryEntity> _fileManagerDirectoryRepository;
  6.         private readonly IRepository<FileManagerFilesEntity> _fileManagerFilesRepository;
  7.         private const string smallImage = "_small";
  8.  
  9.         public FileManagerController(
  10.              IRepository<FileManagerDirectoryEntity> fileManagerDirectoryRepository,
  11.              IRepository<FileManagerFilesEntity> fileManagerFilesRepository
  12.             )
  13.         {
  14.             this._fileManagerDirectoryRepository = fileManagerDirectoryRepository;
  15.             this._fileManagerFilesRepository = fileManagerFilesRepository;
  16.         }
  17.  
  18.         #endregion
  19.  
  20.  
  21.         /// <summary>
  22.         /// 编辑器插件
  23.         /// 获取文件数据
  24.         /// </summary>
  25.         /// <param name="dirId"></param>
  26.         /// <returns></returns>
  27.         public ActionResult Editor(int dirId = 0) {
  28.  
  29.             List<FileManagerFileModel> modelList = new List<FileManagerFileModel>();
  30.             
  31.             //加载该文件夹下的文件夹
  32.             var dirList = _fileManagerDirectoryRepository.Table
  33.                 .Where(x=>x.ParentId==dirId)
  34.                 .OrderByDescending(x=>x.CreateTime)
  35.                 .ToList();
  36.             foreach(var item in dirList)
  37.             {
  38.  
  39.                 FileManagerFileModel model = new FileManagerFileModel();
  40.                 model.Id = item.Id;
  41.                 model.Name = item.Name;
  42.                 model.FullPath = item.FullPath;
  43.                 model.FileType = 2;
  44.                 model.ChildrenCount = item.ChildrenCount;
  45.                 modelList.Add(model);
  46.             }
  47.  
  48.             //加载该文件夹下的图片文件
  49.             var fileList = _fileManagerFilesRepository.Table
  50.                 .Where(x => x.DirectoryId == dirId)
  51.                 .OrderByDescending(x => x.CreateTime)
  52.                 .ToList();
  53.             foreach (var item in fileList)
  54.             {
  55.  
  56.                 FileManagerFileModel model = new FileManagerFileModel();
  57.                 model.Id = item.Id;
  58.                 model.Name = item.Name;
  59.                 model.FullPath = item.FullPath;
  60.                 model.SmallFullPath = item.FullPath + smallImage + item.FileExt;
  61.                 model.FileType = 1;
  62.                 modelList.Add(model);
  63.             }
  64.  
  65.             return View(modelList);
  66.         }
  67.  
  68.         /// <summary>
  69.         /// 创建文件夹
  70.         /// </summary>
  71.         /// <param name="dirId"></param>
  72.         /// <returns></returns>
  73.         public ActionResult _AddDirectory(int dirId) {
  74.             return View();
  75.         }
  76.  
  77.         /// <summary>
  78.         /// 文件夹信息保存
  79.         /// </summary>
  80.         /// <param name="dirId"></param>
  81.         /// <param name="dirName"></param>
  82.         /// <returns></returns>
  83.         public ActionResult _AddDirectorySave(int dirId , string dirName) {
  84.             var parentDirEntity = _fileManagerDirectoryRepository.GetById(dirId);
  85.             if (!string.IsNullOrEmpty(dirName))
  86.             {
  87.                 var parentDirPath = parentDirEntity == null ? "/Content/FileManager/" : parentDirEntity.FullPath;
  88.                 if(parentDirEntity != null)
  89.                 {
  90.                     parentDirEntity.ChildrenCount++;
  91.                 }
  92.  
  93.                 FileManagerDirectoryEntity entity = new FileManagerDirectoryEntity();
  94.                 entity.ParentId = dirId;
  95.                 entity.Name = dirName;
  96.                 entity.FullPath = string.Format("{0}/{1}/", parentDirPath, Guid.NewGuid());
  97.                 if (!Directory.Exists(Server.MapPath(entity.FullPath)))
  98.                 {
  99.                     Directory.CreateDirectory(Server.MapPath(entity.FullPath));
  100.                 }
  101.  
  102.                 _fileManagerDirectoryRepository.Insert(entity);
  103.                 _fileManagerDirectoryRepository.SaveChanges();
  104.             }
  105.             return RedirectToAction("Editor",new { dirId = dirId});
  106.         }
  107.  
  108.         /// <summary>
  109.         /// 上传图片
  110.         /// </summary>
  111.         /// <param name="dirId"></param>
  112.         /// <returns></returns>
  113.         public JsonResult UploadImage(int dirId)
  114.         {
  115.             //路径地址
  116.             string fileUrl = "";
  117.             var parentDirEntity = _fileManagerDirectoryRepository.GetById(dirId);
  118.             var parentDirPath = parentDirEntity == null ? "/Content/FileManager/" : parentDirEntity.FullPath;
  119.  
  120.             HttpFileCollectionBase postfile = HttpContext.Request.Files;
  121.             if (postfile == null)
  122.             {
  123.                 return Json(new { code = 1, msg = "文件不能为空" });
  124.             }
  125.  
  126.             var file = postfile[0];
  127.             string extName = Path.GetExtension(file.FileName);
  128.  
  129.             using (System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream))
  130.             {
  131.  
  132.                 string fileName = Guid.NewGuid().ToString() + extName;
  133.                 string smallImgName = string.Format("{0}{1}{2}", fileName, smallImage, extName);
  134.  
  135.                 string route = Server.MapPath(parentDirPath);
  136.                 fileUrl = Path.Combine(parentDirPath, fileName);
  137.                 string savePath = Path.Combine(route, fileName);
  138.                 //缩略图路径
  139.                 string smallImgPath = Path.Combine(route, smallImgName);
  140.  
  141.                 //生成缩略图
  142.                 try
  143.                 {
  144.                     ImageResizer.Fit(image, 160, 160, ImageResizeMode.Crop, ImageResizeScale.Down).Save(smallImgPath);
  145.                 }
  146.                 catch (Exception)
  147.                 {
  148.                     return Json(new { flag = false, msg = "生成缩略图出错！" });
  149.                 }
  150.  
  151.                 file.SaveAs(savePath);
  152.             }
  153.  
  154.             #region 添加数据到素材表
  155.             FileManagerFilesEntity entity = new FileManagerFilesEntity();
  156.             entity.FileExt = extName;
  157.             entity.FullPath = fileUrl;
  158.             entity.Name = Path.GetFileNameWithoutExtension(file.FileName);
  159.             entity.DirectoryId = dirId;
  160.             entity.Size = file.ContentLength;
  161.  
  162.             _fileManagerFilesRepository.Insert(entity);
  163.             _fileManagerFilesRepository.SaveChanges();
  164.             #endregion
  165.  
  166.  
  167.             if (parentDirEntity != null)
  168.             {
  169.                 parentDirEntity.ChildrenCount++;
  170.             }
  171.             _fileManagerDirectoryRepository.SaveChanges();
  172.  
  173.             return Json(new { code = 0 });
  174.         }
  175.  
  176.  
  177.  
  178.         public class DeleteFilesParams
  179.         {
  180.             public int Id { get; set; }
  181.  
  182.             public int Type { get; set; }
  183.         }
  184.  
  185.         /// <summary>
  186.         /// 删除选中文件夹及图片
  187.         /// </summary>
  188.         /// <returns></returns>
  189.         public JsonResult CheckedFilesDelete(List<DeleteFilesParams> checkeds)
  190.         {
  191.             var directoryList = _fileManagerDirectoryRepository.Table.ToList();
  192.             var fileList = _fileManagerFilesRepository.Table.ToList();
  193.  
  194.  
  195.             foreach(var item in checkeds)
  196.             {
  197.                 //删除图片
  198.                 if (item.Type == 1)
  199.                 {
  200.                     var fileEntity = fileList.FirstOrDefault(x => x.Id == item.Id);
  201.                     string path = Server.MapPath(fileEntity.FullPath);
  202.                     if (System.IO.File.Exists(path))
  203.                     {
  204.                         System.IO.File.Delete(path);
  205.                     }
  206.  
  207.  
  208.                     var parentDir = directoryList.Find(x => x.Id == fileEntity.DirectoryId);
  209.                     if (parentDir != null)
  210.                     {
  211.                         parentDir.ChildrenCount--;
  212.                     }
  213.  
  214.                     _fileManagerFilesRepository.Delete(fileEntity);
  215.                 }
  216.                 else
  217.                 {
  218.                     var dirEntity = directoryList.FirstOrDefault(x => x.Id == item.Id);
  219.                     DeleteChildDirFiles(dirEntity.Id, directoryList, fileList);
  220.                     string path = Server.MapPath(dirEntity.FullPath);
  221.                     if (Directory.Exists(path))
  222.                     {
  223.                         Directory.Delete(path, true);
  224.                     }
  225.  
  226.  
  227.                     var parentDir = directoryList.Find(x => x.Id == dirEntity.ParentId);
  228.                     if (parentDir != null)
  229.                     {
  230.                         parentDir.ChildrenCount--;
  231.                     }
  232.  
  233.                     _fileManagerDirectoryRepository.Delete(dirEntity);
  234.                 }
  235.             }
  236.             _fileManagerFilesRepository.SaveChanges();
  237.             _fileManagerDirectoryRepository.SaveChanges();
  238.  
  239.             return Json(new { code = 0 });
  240.         }
  241.  
  242.         public void DeleteChildDirFiles(int pid,List<FileManagerDirectoryEntity> dirList, List<FileManagerFilesEntity> files) {
  243.             var dirEntityList = dirList.Where(x => x.ParentId == pid);
  244.             var fileEntityList = files.Where(x => x.DirectoryId == pid);
  245.             foreach (var item in dirEntityList)
  246.             {
  247.                 DeleteChildDirFiles(item.Id, dirList, files);
  248.                 _fileManagerDirectoryRepository.Delete(item);
  249.             }
  250.  
  251.             foreach (var item in fileEntityList)
  252.             {
  253.                 _fileManagerFilesRepository.Delete(item);
  254.             }
  255.             _fileManagerDirectoryRepository.SaveChanges();
  256.             _fileManagerFilesRepository.SaveChanges();
  257.  
  258.         }
  259.     }

 

文件管理页面 Editor.chtml

　

  1. @using Web.Areas.Administrator.Models
  2. @model List<FileManagerFileModel>
  3. @{
  4.     Layout = null;
  5. }
  6.  
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10.     <meta name="viewport" content="width=device-width" />
  11.     <title>文件管理</title>
  12.     <link href="/Assets/iconfont/iconfont.css" rel="stylesheet" />
  13.     <link href="/Scripts/layui/css/layui.css" rel="stylesheet" />
  14.     <style>
  15.         body { background: #f6f6f6; }
  16.         .toolbar { padding: 10px; background: #fff; }
  17.         .toolbar i.iconfont{margin-right:10px;}
  18.         .file-list{margin:20px;}
  19.         .file-list li { float: left; background:#fff; margin-bottom:20px; margin-right:20px; }
  20.         .file-list li .img-wapper { width:160px;  }
  21.         .file-list li .img-wapper img{width:100%; height:160px;}
  22.         .file-list li .file-name { padding: 0 10px; width: 100%; overflow:hidden; line-height: 30px; height:30px; color: #666; font-size: 12px; background: #fafafa; }
  23.         .file-list li .file-name .layui-form-checkbox{width:140px !important; overflow:hidden !important; }
  24.         .file-list li:hover { box-shadow: 0 0 10px rgba(0,0,0,.1); }
  25.         .file-list li:hover .file-name { background: #f5f5f5;}
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="toolbar">
  30.         <a class="layui-btn layui-btn-small" href="javascript:;" data-toggle="modal" data-title="新建文件夹" data-url="@Url.Action("_AddDirectory",new { dirId = Request["dirId"] == null ? 0 : int.Parse(Request["dirId"])})">
  31.             <i class="iconfont icon-directory"></i>
  32.             新建文件夹
  33.         </a>
  34.         <button id="upload-img-btn" type="button" class="layui-btn"><i class="iconfont icon-photo"></i>上传图片</button>
  35.         <button id="delete-img-btn" type="button" class="layui-btn layui-btn-danger"><i class="iconfont icon-photo"></i>删除图片</button>
  36.     </div>
  37.     <div class="layui-form">
  38.         <ul class="file-list">
  39.             @if (!string.IsNullOrWhiteSpace(Request["dirId"]))
  40.             {
  41.                 <li class="file-item">
  42.                     <div class="img-wapper">
  43.                         <a href="javascript:history.back(-1);">
  44.                             <img src="/Assets/images/default/admin_directory_back.png" alt="返回上级" title="返回上级" />
  45.                         </a>
  46.                     </div>
  47.                     <div class="file-name">
  48.                         ...
  49.                     </div>
  50.                 </li>
  51.             }
  52.             @if (Model.Any())
  53.             {
  54.                 foreach (var item in Model)
  55.                 {
  56.                     <li class="file-item">
  57.                         @if (item.FileType == 1)
  58.                         {
  59.                             <div class="img-wapper">
  60.                                 <a href="javascript:;" class="file-img" data-url="@item.FullPath" data-title="@item.Name">
  61.                                     <img src="@item.SmallFullPath" title="@item.Name" />
  62.                                 </a>
  63.                             </div>
  64.                             <div class="file-name">
  65.                                 <input type="checkbox" name="file-id" lay-skin="primary" title="@item.Name" data-id="@item.Id" data-type="1">
  66.                             </div>
  67.                         }
  68.                         else
  69.                         {
  70.                             <div class="img-wapper">
  71.                                 <a href="@Url.Action("Editor",new { dirId=item.Id})">
  72.                                     @if (item.ChildrenCount > 0)
  73.                                     {
  74.                                         <img src="/Assets/images/default/admin_directory_files.png" title="@item.Name" />
  75.                                     }
  76.                                     else
  77.                                     {
  78.                                         <img src="/Assets/images/default/admin_directory.png" title="@item.Name" />
  79.                                     }
  80.                                 </a>
  81.                             </div>
  82.                             <div class="file-name">
  83.                                 <input type="checkbox" name="file-id" lay-skin="primary" title="@item.Name" data-id="@item.Id" data-type="2">
  84.                             </div>
  85.                         }
  86.                     </li>
  87.                 }
  88.             }
  89.         </ul>
  90.     </div>
  91.     <input id="dirId" value="@Request["dirId"]" hidden>
  92.     <script src="~/Scripts/jquery-3.2.1.min.js"></script>
  93.     <script src="/Scripts/layui/layui.js"></script>
  94.     <script>
  95.         //获取tinymce编辑器
  96.         var editor = top.tinymce.activeEditor.windowManager.getParams().editor;
  97.  
  98.         layui.use(['upload'], function () {
  99.             var upload = layui.upload;
  100.             var dirId = $("#dirId").val() == "" ? 0 : $("#dirId").val();
  101.             upload.render({ //允许上传的文件后缀
  102.                 elem: '#upload-img-btn'
  103.                 , url: 'UploadImage?dirId=' + dirId
  104.                 , accept: 'file' //普通文件
  105.                 , multiple: true
  106.                 , size: 1024 * 2 //限制文件大小，单位 KB
  107.                 , exts: 'jpg|jpeg|png|gif' //只允许上传压缩文件
  108.                 , done: function (res) {
  109.                     if (res.code == 0) {
  110.                         window.location.reload();
  111.                     }
  112.                 }
  113.             });
  114.  
  115.             //删除图片
  116.             $("#delete-img-btn").click(function () {
  117.                 var checkeds = [];
  118.                 $("input[name='file-id']:checkbox").each(function () {
  119.                     if (true == $(this).is(':checked')) {
  120.                         checkeds.push({
  121.                             id: $(this).data('id'),
  122.                             type: $(this).data('type')
  123.                         });
  124.                     }
  125.                 });
  126.                 if (checkeds.length == 0) {
  127.                     layer.alert('请先选择需要删除的文件！');
  128.                 }
  129.                 else {
  130.                     layer.confirm('删除后将无法恢复，请确认是否要删除所选文件？', {
  131.                         btn: ['确定删除', '我在想想'] //按钮
  132.                     }, function () {
  133.                         $.ajax({
  134.                             type: 'post',
  135.                             url: 'CheckedFilesDelete',
  136.                             data: { checkeds : checkeds },
  137.                             success: function (result) {
  138.                                 if (result.code == 0) {
  139.                                     window.location.reload();
  140.                                 }
  141.                                 else {
  142.                                     showMsg(result.msg);
  143.                                 }
  144.                             }
  145.                         })
  146.                     }, function () {
  147.                     });
  148.                 }
  149.             })
  150.         })
  151.  
  152.         //添加图片至编辑器
  153.         $(".file-img").click(function () {
  154.             var url = $(this).data("url"),
  155.                 title = $(this).data("title");
  156.  
  157.             //添加确认
  158.             layer.confirm('是否需要添加此图片？', {
  159.                 btn: ['确认添加', '我在想想'] //按钮
  160.             }, function () {
  161.                 editor.execCommand('mceInsertContent', false, '<img alt="' + title + '" src="' + url + '"/>');
  162.                 editor.windowManager.close();
  163.             }, function () {});
  164.         })
  165.         
  166.     </script>
  167.     <script>
  168.         //layui基本代码
  169.         $(function () {
  170.             layui.use(['element', 'form', "layer"], function () {
  171.                 var element = layui.element;
  172.  
  173.                 //表单渲染
  174.                 var form = layui.form;
  175.                 form.on('submit(formDemo)', function (data) {
  176.                     layer.msg(JSON.stringify(data.field));
  177.                     return false;
  178.                 });
  179.                 form.render();
  180.  
  181.                 //异步加载modal
  182.                 $(document).on("click", '[data-toggle="modal"]', function (e) {
  183.                     var $this = $(this),
  184.                         url = $(this).data('url'),
  185.                         title = $(this).data("title")
  186.                     if (url) {
  187.                         $.ajax({
  188.                             url: url,
  189.                             data: { rnd: Math.random() },
  190.                             //dataType: 'html',
  191.                             success: function (data) {
  192.                                 //示范一个公告层
  193.                                 layer.open({
  194.                                     type: 1
  195.                                     , title: title //不显示标题栏
  196.                                     , shade: 0.8
  197.                                     , shadeClose: true
  198.                                     , fixed: false
  199.                                     , area: ["900px"]
  200.                                     , offset: '40px'
  201.                                     , id: 'ajax-modal-wapper' //设定一个id，防止重复弹出
  202.                                     , move: false //禁止拖拽
  203.                                     , content: data
  204.                                 });
  205.                             },
  206.                             error: function (XMLHttpRequest, textStatus, errorThrown) {
  207.                                 alert('加载出错。' + textStatus + '. ' + XMLHttpRequest.status);
  208.                             },
  209.                             complete: function () {
  210.                             }
  211.                         });
  212.                     }
  213.                 });
  214.             });
  215.         })
  216.     </script>
  217. </body>
  218. </html>

　　

新增文件夹页面 _AddDirectory.chtml

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <div class="modal-content" style="padding-top:20px;">
  6.     <form class="layui-form" action="_AddDirectorySave" method="post" enctype="multipart/form-data">
  7.         <input name="dirId" value="@Request["dirId"]" hidden>
  8.         <div class="layui-form-item">
  9.             <label class="layui-form-label" for="dirName">文件夹名称</label>
  10.             <div class="layui-input-block">
  11.                 <input class="layui-input" id="dirName" lay-verify="required" name="dirName" placeholder="请输入文件夹名称" type="text" value="">
  12.             </div>
  13.         </div>
  14.         <div class="layui-form-item">
  15.             <div class="layui-input-block">
  16.                 <button class="layui-btn" lay-submit lay-filter="account-form" type="submit">保存信息</button>
  17.             </div>
  18.         </div>
  19.     </form>
  20. </div>

　　

 

3. 将选中图片插入编辑器

在图片列表的页面中，我们只需要在点击图片的事件中调用Tinymce编辑器的插入方法即可，以下为插入图片的代码

  1. <script>
  2.         //获取tinymce编辑器
  3.         var editor = top.tinymce.activeEditor.windowManager.getParams().editor;
  4.  
  5.         layui.use(['upload'], function () {
  6.             var upload = layui.upload;
  7.             var dirId = $("#dirId").val() == "" ? 0 : $("#dirId").val();
  8.             upload.render({ //允许上传的文件后缀
  9.                 elem: '#upload-img-btn'
  10.                 , url: 'UploadImage?dirId=' + dirId
  11.                 , accept: 'file' //普通文件
  12.                 , multiple: true
  13.                 , size: 1024 * 2 //限制文件大小，单位 KB
  14.                 , exts: 'jpg|jpeg|png|gif' //只允许上传压缩文件
  15.                 , done: function (res) {
  16.                     if (res.code == 0) {
  17.                         window.location.reload();
  18.                     }
  19.                 }
  20.             });
  21.  
  22.             //删除图片
  23.             $("#delete-img-btn").click(function () {
  24.                 var checkeds = [];
  25.                 $("input[name='file-id']:checkbox").each(function () {
  26.                     if (true == $(this).is(':checked')) {
  27.                         checkeds.push({
  28.                             id: $(this).data('id'),
  29.                             type: $(this).data('type')
  30.                         });
  31.                     }
  32.                 });
  33.                 if (checkeds.length == 0) {
  34.                     layer.alert('请先选择需要删除的文件！');
  35.                 }
  36.                 else {
  37.                     layer.confirm('删除后将无法恢复，请确认是否要删除所选文件？', {
  38.                         btn: ['确定删除', '我在想想'] //按钮
  39.                     }, function () {
  40.                         $.ajax({
  41.                             type: 'post',
  42.                             url: 'CheckedFilesDelete',
  43.                             data: { checkeds : checkeds },
  44.                             success: function (result) {
  45.                                 if (result.code == 0) {
  46.                                     window.location.reload();
  47.                                 }
  48.                                 else {
  49.                                     showMsg(result.msg);
  50.                                 }
  51.                             }
  52.                         })
  53.                     }, function () {
  54.                     });
  55.                 }
  56.             })
  57.         })
  58.  
  59.         //添加图片至编辑器
  60.         $(".file-img").click(function () {
  61.             var url = $(this).data("url"),
  62.                 title = $(this).data("title");
  63.  
  64.             //添加确认
  65.             layer.confirm('是否需要添加此图片？', {
  66.                 btn: ['确认添加', '我在想想'] //按钮
  67.             }, function () {
  68.                 editor.execCommand('mceInsertContent', false, '<img alt="' + title + '" src="' + url + '"/>');
  69.                 editor.windowManager.close();
  70.             }, function () {});
  71.         })
  72.         
  73.     </script>
  74.

　Ps:　还有很多的不足之处，希望能一起成长， 我的博客地址 jiojun.com 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号