博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ckeditor上传图片中的几个问题
阅读量:5938 次
发布时间:2019-06-19

本文共 2753 字,大约阅读时间需要 9 分钟。

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("");        context.Response.End();}

页面代码:

 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://www.cnblogs.com/fanluyao/p/5900063.html

你可能感兴趣的文章
我的友情链接
查看>>
centos搭建supervisor
查看>>
linux日志分割
查看>>
Samba再报安全漏洞
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
Spring学习资料之 依赖注入(一)
查看>>
安装win7提示安装程序无法创建新的系统分区和定位现有系统分区
查看>>
那些年,我跳过的坑(一)
查看>>
快递查询接口的调用与解析案例
查看>>
我的友情链接
查看>>
服务器性能优化配置建议
查看>>
GetWindowRect
查看>>
oracle sql语句实现累加、累减、累乘、累除
查看>>
SCNetworkReachabilityRef监测网络状态
查看>>
3D地图的定时高亮和点击事件(基于echarts)
查看>>
接口由40秒到200ms优化记录
查看>>
java 视频播放 多人及时弹幕技术 代码生成器 websocket springmvc mybatis SSM
查看>>
Activiti6.0,spring5,SSM,工作流引擎,OA
查看>>
第十三章:SpringCloud Config Client的配置
查看>>