CKEditor接触初了解

  ckeditor有了初步的了解。关于这个富文本编辑器，功能还是挺强大的，在这几天的学习中就大致的对它进行了添加了部分功能。那么接下来就说说吧。
  下面做的是添加一个日历的插件功能。
  首先看下文件的结构，有个plugin文件夹，这里肯定就是要外部添加的地方了。由于是结合easyui,其中的具体效果就没用my97DatePicker了。
  先在plugin下新建一个名为datepicker的文件夹。其中文件夹的具体分类如图。!!
 - 包结构（图片上传不了，就只有自己来写哈了）
     - ckeditor
         - plugins
             - datepicker
                 - dailogs
                     - datepicker.js
                 - images
                    - date.png(大小为16*16) 
                 - plugin.js

    其中plugin.js的代码如下

CKEDITOR.plugins.add('datepicker',    
    {           
        requires : ['dialog'],    
        init : function (editor)    
        {    
            var pluginName = 'datepicker';    
            //加载自定义窗口  
            CKEDITOR.dialog.add('datepicker',this.path + "dialogs/datepicker.js");    

            //给自定义插件注册一个调用命令    
            editor.addCommand( pluginName, new CKEDITOR.dialogCommand( 'datepicker' ) );    

            //注册一个按钮，来调用自定义插件    
            editor.ui.addButton('datepicker',    
                    {    
                        //editor.lang.date.toolbar是在zh-cn.js中定义的一个中文项，    
                        //这里可以直接写英文字符，不过要想显示中文就得修改zh-cn.js    
                        label : editor.lang.date.toolbar,    
                        command : pluginName, 
                        icon: this.path  + 'images/date.png'   
                    });    
        }    
    }    
);  

    而datepicker.js的代码是参考它的源代码修改的

/*
 wangxizhu
 2015/04/11
*/
CKEDITOR.dialog.add("datepicker",function(b){
    function d(a){
        var b=this.getValue();
        b?(a.attributes[this.id]=b,
            "name"==this.id&&(a.attributes["data-cke-saved-name"]=b)):(
                delete a.attributes[this.id],
                "name"==this.id&&delete a.attributes["data-cke-saved-name"])
        }
        return{
            title:b.lang.date.title,
            minWidth:300,
            minHeight:125,
            onShow:function(){
                delete this.button;
                var a=this.getParentEditor().getSelection().getSelectedElement();
                a&&a.is("input")&&a.getAttribute("type")in{easyui_calendar:1,easyui_datebox:1,easyui_datetimebox:1}&&(this.date=a,this.setupContent(a))},
            onOk:function(){
                var a=this.getParentEditor(),
                b=this.button,
                d=!b,
                c=b?CKEDITOR.htmlParser.fragment.fromHtml(
                    b.getOuterHtml()
                ).children[0]:new CKEDITOR.htmlParser.element("input");
                this.commitContent(c);
                var e=new CKEDITOR.htmlParser.basicWriter;
                c.writeHtml(e);
                c=CKEDITOR.dom.element.createFromHtml(e.getHtml(),a.document);d?a.insertElement(c):(c.replace(b),a.getSelection().selectElement(c))
            },
            contents:[{
                id:"info",
                label:b.lang.date.title,
                title:b.lang.date.title,
                elements:[
                //配置name属性
                {
                    id:"name",
                    type:"text",
                    label:b.lang.common.name,
                    style:"width:150px;",
                    "default":"", //默认显示的内容
                    setup:function(a){
                        this.setValue(a.data("cke-saved-name")||a.getAttribute("name")||"")
                    },
                    commit:d
                },
                //配置class属性，添加了easyui的3种时间类型
                {
                    id:"class",
                    type:"select",
                    label:b.lang.date.class,
                    style:"width:150px;",
                    "default":"easyui-datetimebox",
                    accessKey:"C",
                    items:[
                        [b.lang.date.easyui_calendar,"easyui-calendar"],
                        [b.lang.date.easyui_datebox,"easyui-datebox"],
                        [b.lang.date.easyui_datetimebox,"easyui-datetimebox"]
                    ],
                    setup:function(a){
                        this.setValue(a.getAttribute("class")||"")
                    },
                    commit:d
                },
                //验证是否必填
                {   
                    id:"required",
                    type:"checkbox",
                    label:b.lang.date.required,
                    "default":"",
                    accessKey:"R",
                    value:"required",
                    setup:function(a){
                        this.setValue(a.getAttribute("required"))
                    },
                    commit:d
                }
            ]}
        ]
    }
});

    而而关于代码中用名称，如b.lang.date.class则写在具体的配置文件中。打开lang中的zh-cn.js,找到about,即“关于”，在花括号后添加配置信息。

"date":{"title":"时间属性","toolbar":"日历控件","id":"日历ID","text":"日历名称","class":"时间类型","type":"类型","required":"是否必须输入","easyui_calendar":"日历","easyui_datebox":"日期","easyui_datetimebox":"日期和时间"},

    基本快要接近尾声了，datepicker算是创建好了，那么要添加到toolbar中，则需要在config.js中添加以下代码。

    config.extraPlugins = 'datepicker'; //添加插件
    config.allowedContent= true;    //允许添加所有的内容，从而不会过滤掉css或js的代码

    其他部分：
        1.在通过easyui的form方法提交表单数据时，却不能获取到editor的内容，那么这时就需要用到`

var chartCode=parent.CKEDITOR.instances.theadEditor.getData();

    注：由于是在弹框中用到的编辑器，所以就在index.jsp中调用的ckeditor.js然后这里就需要“parent”了。
    在前台像后台传送数据时，就需要自己封装了。

$.post("stuController/save.do",stu{name:"zc",chartCode:parent.CKEDITOR.instances.theadEditor.getData()},function(data){
    if(data){
        $.prompt();    
    }else{
        alert('添加配置信息失败！');
    }
 });

后台的话就直接接受接可以了,因为前台通过json字串传递，已经封装为一个对象了。
    public String save(Student stu){
        return service.save(stu)==1? "true" : "false";
    }

    2.ckeditor的toolbar中的内容可能有点多，有些没有必要，那么在页面中通过js也可以来控制的（是不是挺好的:）

 CKEDITOR.replace('searEditor',{
        toolbar :[
            ['Source','-','Save','NewPage','Preview','-','Templates'],
            ['Cut','Copy','Paste'],['Undo','Redo','-'],
            ['Form', 'Checkbox', 'Radio','-', 'TextField', 'Textarea', 'Select','-', 'Button', 'ImageButton','datepicker'],
            '/',
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            ['Link','Unlink','Anchor','Table'],
            '/',
            ['Styles','Format','Font','FontSize'],
            ['TextColor','BGColor','-']
       ]
});

  纯粹本人理解，有错误的地方，希望同学们指出，多多交流咯。