ckeditor添加日历控件

这里日历控件用的是开源的My97DatePicker，先看下效果图：

1、点击左侧自定义的日历控件按钮，弹出日历控件对话框。

2、点击确定，日历控件添加的表单设计器中，同时保留日历的控件样式

3、点击ckeditor的预览控件，查看是否可以进行日历的选择。

下面就说一下实现，关于如何在ckeditor中添加自定义控件，可参考《ckeditor_4.4.5 自定义工具栏》一文。

首先将My97DatePicker的js文件添加到插件目录下：

plugin.js的代码如下：

1. CKEDITOR.plugins.add(‘datepicker‘,
2. {
3. requires : [‘dialog‘],
4. init : function (editor)
5. {
6. var pluginName = ‘datepicker‘;
7. //加载自定义窗口
8. CKEDITOR.dialog.add(‘datepicker‘,this.path + "dialogs/datepicker.js");
9. //给自定义插件注册一个调用命令
10. editor.addCommand( pluginName, new CKEDITOR.dialogCommand( ‘datepicker‘ ) );
11. //注册一个按钮，来调用自定义插件
12. editor.ui.addButton(‘DatePicker‘,
13. {
14. //editor.lang.mine是在zh-cn.js中定义的一个中文项，
15. //这里可以直接写英文字符，不过要想显示中文就得修改zh-cn.js
16. label : editor.lang.mine,
17. command : pluginName
18. });
19. }
20. }
21. );

上述第九行代码中的this.path可获取当前文件所在的路径。

dialogs下的datepicker.js代码如下：

1. CKEDITOR.dialog.add( ‘datepicker‘, function( editor )
2. {
3. return {
4. title : ‘日历控件‘,
5. minWidth : 300,
6. minHeight : 150,
7. contents : [
8. {
9. id: ‘tab1‘,
10. label: ‘‘,
11. title: ‘‘,
12. elements :
13. [
14. {
15. type: ‘html‘,
16. html:‘选择日期：<style type="text/css">
17. .Wdate{border: #999 1px solid;height: 20px;
18. background: #fff url(‘+CKEDITOR.plugins.get("datepicker").path+‘/images/datePicker.gif)
19. no-repeat right;}
20. </style>
21. <input type="text" id="d241" onfocus="WdatePicker({dateFmt:\‘yyyy-MM-dd HH:mm:ss\‘})"
22. class="Wdate" style="width:150px"/>‘
23. }
24. ]
25. }
26. ],
27. onOk: function(){
28. 　　      editor.insertHtml(‘
29. <style type="text/css">
30. .Wdate{border: #999 1px solid;height: 20px;
31. background: #fff url(‘+CKEDITOR.plugins.get("datepicker").path+‘/images/datePicker.gif)
32. no-repeat right;}
33. </style>
34. <input type="text" id="d241" onfocus="WdatePicker({dateFmt:\‘yyyy-MM-dd HH:mm:ss\‘})"
35. class="Wdate" style="width:150px"/>‘);
36. 　　  },
37. };
38. } );

日历控件的样式需要在上述js文件中自己加上，否则在引用的时候很容易出现引用路径不对导致样式丢失的bug。

转自：http://itxxz.com/a/gaoji/2014/1127/ckeditor_my97DatePicker.html