ckeditor上传图片中的几个问题

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