1.ckeditor安装上默认是没有上传图片功能的,需要加上 config.filebrowserUploadUrl = '/CKUploadPic.ashx'; 这句话指定上传的程序,底部会有全部代码贴出。
2.客户有新需求 图片上传默认最大宽度500px,但也允许用户修改更大的宽度,即如果上传时图片宽度大于500px,则默认宽度样式500px,高度按比例。如用户再次修改成800px,保存也要保存成800px。
无奈找了好多资料未发现有此代码可拿来主义。自己动手吧.
找到/ckeditor/plugins/image/dialogs/image.js这个js,全都是压缩过的js。
解决代码如下:
搜索 g;b?c=g=0:(g=c.$.width,c=c.$.height); 处 后加上标黄2句话,搞定 g=g>550?550:g; ;CKEDITOR.document.getById(t).fire("click");
CKUploadPic.ashx代码
public void ProcessRequest(HttpContext context) { //获取图片 HttpPostedFile uploads = context.Request.Files["upload"]; string CKEditorFuncNum = context.Request["CKEditorFuncNum"]; //获取文件名 //string file = System.IO.Path.GetFileName(uploads.FileName); string file = System.IO.Path.GetExtension(uploads.FileName); //当前时间 var now = DateTime.Now; //随机数 Random ran = new Random(); int RandKey = ran.Next(1000, 9999); //图片存放的大路径 string path = string.Format("\\upload\\{0}", now.ToString("yyyyMMdd")); //图片存放的服务器本地路径 string localPath = context.Server.MapPath(path); //图片存放的服务器本地路径 如果不存在 则新建文件夹 if (!System.IO.Directory.Exists(localPath)) System.IO.Directory.CreateDirectory(localPath); //图片路径 var PicPath = string.Format("{0}\\{1}{2}{3}", path, now.ToString("hhmmss"), RandKey, file); //保存图片 uploads.SaveAs(context.Server.MapPath(PicPath)); //给编辑器返回路径 string url = PicPath.Replace("\\", "/"); //输出 context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>"); context.Response.End(); }
页面代码:
<!--CKEDITOR--> <textarea name="TxtContent" runat="server" id="TxtContent" rows="10" cols="80"> <%=content %> </textarea> <input type="hidden" runat="server" id="hidcontent" /> <script type="text/javascript"> // Replace the <textarea id="editor1"> with a CKEditor // instance, using default configuration. var editor = CKEDITOR.replace('TxtContent', { customConfig: '/config/ContentConfig.js' }); editor.on('change', function (evt) { var data = CKEDITOR.instances.TxtContent.getData(); $("#hidcontent").val(data); }); </script>
ContentConfig.js
CKEDITOR.editorConfig = function (config) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.language = 'zh-cn'; config.uiColor = '#9AB8F3'; config.skin = 'office2013'; config.extraPlugins = 'image'; config.filebrowserUploadUrl = '/CKUploadPic.ashx'; config.toolbar = [ { name: 'document', items: ['Source', '-', 'Preview', 'Print', '-'] }, { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] }, { name: 'editing', items: ['Find', 'Replace', '-', 'Styles'] }, '/', { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] }, { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }, { name: 'links', items: ['Link', 'Unlink'] }, { name: 'insert', items: ['Image', 'Flash', 'Table'] }, { name: 'tools', items: ['Maximize', 'ShowBlocks'] } ]; config.toolbarCanCollapse = true; };
转载请说明出处:第六感博客 原文链接:https://6blog.cn/backEnd/54