ckeditor添加日历控件

标签：style   blog   http   ar   io   color   sp   strong   on   

这里日历控件用的是开源的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.             //加载自定义窗口  
9.             CKEDITOR.dialog.add(‘datepicker‘,this.path + "dialogs/datepicker.js");    
10.                 
11.             //给自定义插件注册一个调用命令    
12.             editor.addCommand( pluginName, new CKEDITOR.dialogCommand( ‘datepicker‘ ) );    
13.                 
14.             //注册一个按钮，来调用自定义插件    
15.             editor.ui.addButton(‘DatePicker‘,    
16.                     {    
17.                         //editor.lang.mine是在zh-cn.js中定义的一个中文项，    
18.                         //这里可以直接写英文字符，不过要想显示中文就得修改zh-cn.js    
19.                         label : editor.lang.mine,    
20.                         command : pluginName    
21.                     });    
22.         }    
23.     }    
24. );  

上述第九行代码中的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

ckeditor添加日历控件

标签：style   blog   http   ar   io   color   sp   strong   on   

原文地址：http://www.cnblogs.com/superli0426/p/4173393.html