CKeditor自界说上传图片成果

　　CKeditor可以共同CKfinder实现文件的上传及打点。可是往往我们上传的图片需要某些自界说的操纵，好比将图片路径写入数据库，图片加水印等等操纵。

　　实现道理：设置CKeditor的自界说图标，单击弹出一个子窗口，在在子窗口中上传图片实现我们的本身的成果，然后自动封锁子窗口将图片插入到CKeditor的当前光标位置。

　　实现步调：

1、设置CKeditor。网上许多资料，各人本身查。

2、设置config.js文件。此文件为CKeditor的设置文件。设置需要显示的图标。

 CKEDITOR.editorConfig = function( config )
 {
     // Define changes to default configuration here. For example:
     config.language = 'zh-cn';
     config.skin = 'v2';
     // config.uiColor = '#AADC6E';
     config.toolbar =
     [
        ['Source', '-', 'Preview', '-'],
         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
         ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],        
         'http://down.chinaz.com/',
         ['Bold', 'Italic', 'Underline'],
         ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
         ['Link', 'Unlink', 'Anchor'],
         ['addpic','Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],//此处的addpic为我们自界说的图标，非CKeditor提供。
         'http://down.chinaz.com/',
         ['Styles', 'Format', 'Font', 'FontSize'],
         ['TextColor', 'BGColor'],
     ];
     config.extraPlugins = 'addpic';
};

3、在CKeditor\plugins文件夹下新建addpic文件夹，文件夹下添加addpic.JPG图标文件，发起尺寸14*13。addpic.JPG图标文件即为显示在CKeditor上的addpic的图标。在图标文件同目次下添加文件plugin.js，内容如下。

(function () {
    //Section 1 : 按下自界说按钮时执行的代码
    var a = {
        exec: function (editor) {
            show();
        }
    },
    b = 'addpic';
    CKEDITOR.plugins.add(b, {
        init: function (editor) {
            editor.addCommand(b, a);
            editor.ui.addButton('addpic', {
                label: '添加图片',
                icon: this.path + 'addpic.JPG',
                command: b
            });
        }
    });
})();

文件中的show函数为显示子页面利用，我将它写在CKeditor地址的页面中。

4、edit.aspx页面利用的js

edit.aspx页面就是利用CKeditor的页面。

function show() {
   $("#ele6")[0].click();
}
function upimg(str) {
    if (str == "undefined" || str == "") {
      return;
    }
    str = "<img src='/html/images/" + str+"'</img>";
    CKEDITOR.instances.TB_Content.insertHtml(str);
    close();
}
function close() {
 $("#close6")[0].click();
}
$(document).ready(function () {
    new PopupLayer({ trigger: "#ele6", popupBlk: "#blk6", closeBtn: "#close6", useOverlay: true, offsets: { x: 50, y: 0} });
});