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:'选择日期:
  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. class="Wdate" style="width:150px"/>'    
  21.                     }    
  22.                 ]    
  23.             }    
  24.         ],  
  25.          onOk: function(){  
  26.         editor.insertHtml('
  27. .Wdate{border: #999 1px solid;height: 20px;
  28. background: #fff url('+CKEDITOR.plugins.get("datepicker").path+'/images/datePicker.gif) 
  29. no-repeat right;}
  30.  class="Wdate" style="width:150px"/>');  
  31.     },  
  32.     };    
  33. } );    



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

 

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

转载于:https://www.cnblogs.com/superli0426/p/4173393.html

你可能感兴趣的:(ckeditor添加日历控件)