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