CKEditor接触初了解

来源：互联网发布：苹果mac切换输入法编辑：程序博客网时间：2024/06/03 22:52

  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','-']       ]});  纯粹本人理解，有错误的地方，希望同学们指出，多多交流咯。

0 0