ckeditor 自定義上傳圖片，丟棄原來的上傳 示例代碼

之前一直是Fckeditor 在線編輯器，最近發現對Chorme 支持不是很友好，所以決定采用最新版本ckeditor 4.01版本。

為了保持和之前上傳風格，我決定對ckeditor 進行再次改造。

和網上任何一個上傳都不一樣。純自己想出來的。送給需要的同學。

首先是調用方式：

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.replace('FContent');//FContent：這個對應文本域
    };   
 
 //插入圖片 並插入編輯器
      function InsertHTML(s) {
          var editor = CKEDITOR.instances.FContent; //FContent：這個對應文本域
          if (editor.mode == 'wysiwyg') {
              editor.insertHtml(s);
          }
          CKEDITOR.dialog.getCurrent().hide();//隱藏彈出層
      }

注冊JS：

    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'UploadPic' }
    ];
config.extraPlugins = 'UploadPic';

定義插件：

 

(function () {
 CKEDITOR.plugins.add('UploadPic',
{    init: function(editor)
    {
        var pluginName = 'UploadPic';
        CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/UploadPic.js');
        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
        editor.ui.addButton('UploadPic',
            {
                label: '上傳圖片',
                command: pluginName,
                icon: CKEDITOR.plugins.getPath('UploadPic') + 'uploadpic.png'
            });
    }
}); 

 })();

定義彈出層：

CKEDITOR.dialog.add("UploadPic", function (a) { a = a.lang.UploadPic; return { title: '上傳圖片', minWidth: 390, minHeight: 150, contents: [{ id: "tab1", label: "", title: "", expand: !0, padding: 0, elements: [{ type: "html", html: "<form action='/ckeditor/plugins/UploadPic/dialogs/upload.aspx' method='post' enctype='multipart/form-data' target='myiframe' style='margin-top:10px;'><input name='uploadimg'  style='background: #fbfbfb;url(http://static.zcool.com.cn/images/txtBg.png) repeat-x left top;height: 36px;line-height: 36px;border: 1px solid #abadb3;font-size: 14px;padding: 0 5px;width:360px;' id='uploadimg'  type='file' /><br><input name='submit' onclick='return check();'  id='sumit' value='上傳' type='submit'style='background: #fbfbfb;url(http://static.zcool.com.cn/images/txtBg.png) repeat-x left top;height: 36px; line-height: 36px; text-align:center; margin-top:10px; border: 1px solid #abadb3;font-size: 14px;padding: 0 5px;width:70px;' /></form><iframe name='myiframe' id='myiframe' width='100' height='100'frameborder='0' scrolling='yes' marginheight='0' marginwidth='0' ></iframe>"}]}], buttons: [CKEDITOR.dialog.cancelButton]} });

剩余一個是 上傳接受頁面，就隨別接受下，同學可以根據的需求進行改動。

運行最好用IIS托管運行下

示例代碼下載：ckeditor_upload.zip