2023年7月3日发(作者：)
Tinymce编辑器添加⾃定义图⽚管理插件在使⽤Tinymce的过程中需要⽤到图⽚上传功能，⽽提供的上传插件在上传⽂件后是给了⼀个连接地址，就想⽤户需要什么图⽚，不能⽤最直观的⽅式表现出来么！然后就打算⾃⼰弄⼀个，其实实现效果起来很简单，就只是做了⼀个类型相册管理的功能，然后在点击图⽚的时候，将图⽚的地址信息插⼊到编辑器⾥就⾏了，由于后台⽤的是layui的框架，所以界⾯也就⽤了layui来实现，这⾥我只弄了上传，删除功能，也可⾃⼰添加检索等功能，实现效果如下1 、添加插件我们需要在tinymce的 Plugins ⽬录下新建⼀个filemanager⽂件夹，并添加⼀个名为 ，其中editor传参后再图⽚管理页⾯通过var editor = ams().editor; 获取编辑器对象，进⾏图⽚插⼊操作("filemanager", function (editor, url) { ton("filemanager", { title: "图⽚管理", icon: 'image', onclick: function () { ({ title: "图⽚管理", url: "/Administrator/Filemanager/Editor", width: idth * 0.9, height: eight * 0.8 }, { editor: editor // pointer to access editor from cshtml }) } })}); 2. 相册功能实现⽂件夹管理实体类public class FileManagerDirectoryEntity : BaseEntity { /// /// ⽗级Id /// public int ParentId { get; set; } /// /// ⽂件夹名称 /// public string Name { get; set; } /// /// 路径 /// public string FullPath { get; set; } /// /// ⼦⽂件数量 /// public int ChildrenCount { get; set; } } ⽂件管理实体类public class FileManagerDirectoryEntity : BaseEntity { /// /// ⽗级Id /// public int ParentId { get; set; } /// /// ⽂件夹名称 /// public string Name { get; set; } /// /// 路径 /// public string FullPath { get; set; } /// /// ⼦⽂件数量 /// public int ChildrenCount { get; set; } } 相册功能具体实现controllerpublic class FileManagerController : Controller { #region Core private readonly IRepository _fileManagerDirectoryRepository; private readonly IRepository _fileManagerFilesRepository; private const string smallImage = "_small"; public FileManagerController( IRepository fileManagerDirectoryRepository, IRepository fileManagerFilesRepository ) { this._fileManagerDirectoryRepository = fileManagerDirectoryRepository; this._fileManagerFilesRepository = fileManagerFilesRepository; } #endregion /// /// 编辑器插件 /// 获取⽂件数据 /// /// /// public ActionResult Editor(int dirId = 0) { List modelList = new List();
//加载该⽂件夹下的⽂件夹 var dirList = _ .Where(x=>Id==dirId) .OrderByDescending(x=>Time) .ToList(); foreach(var item in dirList) { FileManagerFileModel model = new FileManagerFileModel(); = ; = ; th = th; pe = 2; enCount = enCount; (model); } //加载该⽂件夹下的图⽚⽂件 var fileList = _ .Where(x => oryId == dirId) .OrderByDescending(x => Time) .ToList(); foreach (var item in fileList) { FileManagerFileModel model = new FileManagerFileModel(); = ; = ; th = th; ullPath = th + smallImage + t; pe = 1; (model); } return View(modelList); } /// /// 创建⽂件夹 /// /// /// public ActionResult _AddDirectory(int dirId) { public ActionResult _AddDirectory(int dirId) { return View(); } /// /// ⽂件夹信息保存 /// /// /// /// public ActionResult _AddDirectorySave(int dirId , string dirName) { var parentDirEntity = _d(dirId); if (!OrEmpty(dirName)) { var parentDirPath = parentDirEntity == null ? "/Content/FileManager/" : th; if(parentDirEntity != null) { enCount++; } FileManagerDirectoryEntity entity = new FileManagerDirectoryEntity(); Id = dirId; = dirName; th = ("{0}/{1}/", parentDirPath, d()); if (!(h(th))) { Directory(h(th)); } _(entity); _anges(); } return RedirectToAction("Editor",new { dirId = dirId}); } /// /// 上传图⽚ /// /// /// public JsonResult UploadImage(int dirId) { //路径地址 string fileUrl = ""; var parentDirEntity = _d(dirId); var parentDirPath = parentDirEntity == null ? "/Content/FileManager/" : th; HttpFileCollectionBase postfile = ; if (postfile == null) { return Json(new { code = 1, msg = "⽂件不能为空" }); } var file = postfile[0]; string extName = ension(me); using ( image = ream(tream)) { string fileName = d().ToString() + extName; string smallImgName = ("{0}{1}{2}", fileName, smallImage, extName); string route = h(parentDirPath); fileUrl = e(parentDirPath, fileName); string savePath = e(route, fileName); //缩略图路径 //缩略图路径 string smallImgPath = e(route, smallImgName); //⽣成缩略图 try { (image, 160, 160, , ).Save(smallImgPath); } catch (Exception) { return Json(new { flag = false, msg = "⽣成缩略图出错！" }); } (savePath); } #region 添加数据到素材表 FileManagerFilesEntity entity = new FileManagerFilesEntity(); t = extName; th = fileUrl; = eNameWithoutExtension(me); oryId = dirId; = tLength; _(entity); _anges(); #endregion if (parentDirEntity != null) { enCount++; } _anges(); return Json(new { code = 0 }); } public class DeleteFilesParams { public int Id { get; set; } public int Type { get; set; } } /// /// 删除选中⽂件夹及图⽚ /// /// public JsonResult CheckedFilesDelete(List checkeds) { var directoryList = _(); var fileList = _(); foreach(var item in checkeds) { //删除图⽚ if ( == 1) { var fileEntity = rDefault(x => == ); string path = h(th); if ((path)) { { (path); } var parentDir = (x => == oryId); if (parentDir != null) { enCount--; } _(fileEntity); } else { var dirEntity = rDefault(x => == ); DeleteChildDirFiles(, directoryList, fileList); string path = h(th); if ((path)) { (path, true); } var parentDir = (x => == Id); if (parentDir != null) { enCount--; } _(dirEntity); } } _anges(); _anges(); return Json(new { code = 0 }); } public void DeleteChildDirFiles(int pid,List dirList, List files) { var dirEntityList = (x => Id == pid); var fileEntityList = (x => oryId == pid); foreach (var item in dirEntityList) { DeleteChildDirFiles(, dirList, files); _(item); } foreach (var item in fileEntityList) { _(item); } _anges(); _anges(); } }
⽂件管理页⾯ @using @using @model List@{ Layout = null;} ⽂件管理 新建⽂件夹
新增⽂件夹页⾯ _@{ Layout = null;}
3. 将选中图⽚插⼊编辑器在图⽚列表的页⾯中，我们只需要在点击图⽚的事件中调⽤Tinymce编辑器的插⼊⽅法即可，以下为插⼊图⽚的代码
Ps: 还有很多的不⾜之处，希望能⼀起成长， 我的博客地址
发布者：admin，转转请注明出处：http://www.yc00.com/xiaochengxu/1688382114a129605.html
评论列表（0条）