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.             //加载自定义窗口  
  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

posted @ 2014-12-19 10:46  螃蟹(itxxz)  阅读(533)  评论(0)  编辑  收藏  举报