ckeditor添加日历控件

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

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



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


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



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

首先将My97DatePicker的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.mine是在zh-cn.js中定义的一个中文项，
                        //这里可以直接写英文字符，不过要想显示中文就得修改zh-cn.js
                        label : editor.lang.mine,
                        command : pluginName
                    });
        }
    }
);

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

dialogs下的datepicker.js代码如下：

CKEDITOR.dialog.add( 'datepicker', function( editor )
{
    return {
        title : '日历控件',
        minWidth : 300,
        minHeight : 150,
        contents : [
            {
            id: 'tab1',
            label: '',
            title: '',
                elements :
                [
                    {
                        type: 'html',
                      html:'选择日期：
.Wdate{border: #999 1px solid;height: 20px;
background: #fff url('+CKEDITOR.plugins.get("datepicker").path+'/images/datePicker.gif)
no-repeat right;}


class="Wdate" style="width:150px"/>'
                    }
                ]
            }
        ],
         onOk: function(){
　　      editor.insertHtml('

.Wdate{border: #999 1px solid;height: 20px;
background: #fff url('+CKEDITOR.plugins.get("datepicker").path+'/images/datePicker.gif)
no-repeat right;}


 class="Wdate" style="width:150px"/>');
　　  },
    };
} );

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

 

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

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