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