CKEditer实现插入图片的功能

本片博客主要参考了博客园lts8989的《CKeditor自定义上传图片功能》，由于这篇文章可能假定我们已经知道了很多的知识点，所有有些东西就没有提到。然而我又是一个小菜鸟，所以刚开始根据这篇文章去实现在CKEditer上传插入图片的时候搞了好久都没有倒腾出来，没办法，基础太差。所有就打算写一个更详细一点，让新手也能看懂实现的说明文档。

言归正传，我们知道CKEditer本身是没有上传图片的功能的，只能在文章中插入图片的url实现插入图片的功能。而本片文章要在CKEditer上稍作修改让他有从本地上传图片本插入到编辑器的光标位置的功能。实现步骤如下

1.配置CKEditer

这部分可以参考 在ASP.NET项目中使用CKEditor

2.配置CKEdier配置文件，将自定义插入图片的小图标添加到CKEditer的工具栏中

首先修改ckediter文件加下的config.js的文件，这个文件就是用来配置编辑器的工具栏的，参考代码和工具栏中的小图标相信大家很容易看懂，代码如下，其中addpic就是我们自定义的小图标的名字。

CKEDITOR.editorConfig  = function ( config  )
{
     // Define changes to default configuration here. For example:
     // config.language = 'fr';
     // config.uiColor = '#AADC6E';
     // 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' ],
          '/' ,
          [ 'Bold' ,  'Italic' ,  'Underline' ],
          [ 'NumberedList' ,  'BulletedList' ,  '-' ,  'Outdent' ,  'Indent' ],
          [ 'JustifyLeft' ,  'JustifyCenter' ,  'JustifyRight' ,  'JustifyBlock' ],
          [ 'Link' ,  'Unlink' ,  'Anchor' ],
          [ 'addpic' ,  'Flash' ,  'Table' ,  'HorizontalRule' ,  'Smiley' ,  'SpecialChar' ,  'PageBreak' ],  //此处的addpic为我们自定义的图标，非CKeditor提供。
          '/' ,
          [ 'Styles' ,  'Format' ,  'Font' ,  'FontSize' ],
          [ 'TextColor' ,  'BGColor' ],

      ];

    config.extraPlugins  =  'addpic' ;
};

然后在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 :  'upload img' ,
                 icon :  this.path  +  'addpic.png' ,
                 command : b
              });
          }
      });
  })();

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

这样我们就在CKEditer的工具栏中添加了我们自定义的addpic的小图标。