ckeditor的简单使用以及多张图片上传插件的制作

来源：互联网发布：机器人离线编程软件编辑：程序博客网时间：2024/05/16 01:19

效果图

一、网上下载 ckeditor_4.7.3_full 。

二、用VS2015新建MVC空白项目，将ckeditor_4.7.3_full 文件放入，并添加一个控制器DefaultController，加入以下上传图片的代码。

public class DefaultController : Controller{    [HttpPost]    public string SaveDetailImg(HttpPostedFileBase files)     {        string returnStr = "";        if (files == null)        {            returnStr = "false,请先选择要上传的图片！";        }        else        {            string fileName = Path.GetFileName(files.FileName);            string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower(); /* 获取后缀名并转为小写：jpg */            if (suffix != "jpg" && suffix != "jpeg" && suffix != "bmp" && suffix != "png")            {                returnStr = "false,只支持上传后缀为jpg、jpeg、png或bmp的图片！";            }            else            {                string file = "/Image/"; //图片将要保存的文件夹                string filePhysicalPath = Server.MapPath("~/" + file);                if (!Directory.Exists(filePhysicalPath))                {                    Directory.CreateDirectory(filePhysicalPath);                }                string ImgName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + suffix;                files.SaveAs(filePhysicalPath + ImgName);                string url = file + ImgName;                returnStr = "true," + url;            }        }        return returnStr;    }}

三、此时项目文件结构如下图。

四、index.html内的代码。

<!Doctype html><html><head>    <title>jin_Test</title>    <meta charset="utf-8">    <script src="ckeditor.js"></script></head><body><div id=""><textarea id="Product_Detail" name="">123</textarea></div> <script>var imgs = [];var SaveDetailImgUrl = "@Url.Action("SaveDetailImg")";CKEDITOR.replace('Product_Detail', {  //编辑器设置language: 'zh-cn', // 语言: 中文，默认是英文allowedContent: true, //关闭标签过滤removePlugins: 'elementspath', // 编辑器下面不显示元素路径resize_enabled: true, // 是否允许拖动改变编辑器的大小height: '300px', // CKEditor 中编辑区的高度，不算工具栏的高度width: '710px',removeDialogTabs: 'image:advanced;image:Link;', filebrowserImageUploadUrl: SaveDetailImgUrl, //上传图片Actionimage_previewText: ' ' //图像属性对话框里的图像信息下的预览为空//CKEDITOR.config.readOnly = true;});</script></body></html>

上面的代码中有个上传单张图片的方法，如下。

[HttpPost]public ActionResult SaveDetailImg(HttpPostedFileBase upload) //上传商品详情里的单张图片，参数名称是upload。{    string returnStr = "";    if (upload == null)    {        returnStr = "alert('请先选择要上传的图片！');";    }    else    {        string fileName = Path.GetFileName(upload.FileName);        string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower(); /* 获取后缀名并转为小写：jpg */        if (suffix != "jpg" && suffix != "jpeg" && suffix != "bmp" && suffix != "png")        {            returnStr = "alert('只支持上传后缀为jpg、jpeg、png或bmp的图片！');";        }        else        {            string file = "/Image/"; //图片将要保存的文件夹            string filePhysicalPath = Server.MapPath("~/" + file);            if (!Directory.Exists(filePhysicalPath))            {                Directory.CreateDirectory(filePhysicalPath);            }            string ImgName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + suffix;            upload.SaveAs(filePhysicalPath + ImgName);            string url = file + ImgName;            string CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];            //上传成功后，我们还需要通过以下的一个脚本把图片返回到第一个tab选项            returnStr = "window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",\"" + url + "\");";        }    }    return Content("<script>" + returnStr + "</script>");}

五、在路径ckeditor_4.7.3_full\ckeditor\plugins下添加文件夹multiimg，并加入以下文件。

六、plugin.js内的代码。

(function() {      CKEDITOR.plugins.add("multiimg", {          requires: ["dialog"],          init: function(a) {              a.addCommand("multiimg", new CKEDITOR.dialogCommand("multiimg"));              a.ui.addButton("Multiimg", {                  label: "批量上传图片",//调用dialog时显示的名称                  command: "multiimg",                  icon: this.path + "images/upload.png"//在toolbar中的图标              });              CKEDITOR.dialog.add("multiimg", this.path + "dialogs/multiimg.js")          }      })   })();

七、其它内容略。

demo已上传：http://download.csdn.net/download/a851656458/10014397。

阅读全文

0 0