幸运蛋蛋pc开奖
CKEditor固有的一些文件被组织到_source目录里. 核心的功能,诸如DOM元素操作,事件处理,初始化脚本和一些环境设置被包含在_source\core文件?#24515;? 而其它的一些功能, 比如格式化,拷贝和?#31243;? 图片和链接, 都被实现为插件形式放在_source\plugins文件?#24515;?/div>

在开始之前,感性的?#29616;?#19968;下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能,诸如DOM元素操作,事件处理,初始化脚本和一些环境设置被包含在ckeditor\_source\core文件?#24515;? 而其它的一些功能, 比如格式化,拷贝和?#31243;? 图片和链接, 都被实现为插件形式放在ckeditor\_source\plugins文件?#24515;? 每个文件夹表示一个插件. 并且在每个文件?#24515;? 有一个plugin.js的文件包含了该插件需要用到的代码.

你可以看到源代码被组织成不同的文件. 为了HTTP请求, CKEditor把不同的文件压缩并打包到ckeditor.js和ckeditor_basic.js里。

创建一个日期插件(date)

1、在"ckeditor\plugins\"目录下新建一个"date"目录,然后在"date"目录下新建一个"plugin.js",输入以下代码:

CKEDITOR.plugins.add('date', {
  requires: ['dialog'],
  init: function (a) {
    var b = a.addCommand('date', new CKEDITOR.dialogCommand('date'));
    a.ui.addButton('date', {
      label: a.lang.date.toolbar,
      command: 'date',
      icon: this.path + 'images/date.jpg'
    });
    CKEDITOR.dialog.add('date', this.path + 'dialogs/date.js');
  }
});

2、增加"images"目录,放入一个"date.jpg"的图片,?#27604;?#22270;片可?#28304;觛oogle找一个,16*16大小的正好。

3、增加"dialogs"目录,新建一个"date.js",输入如下代码:

CKEDITOR.dialog.add('date', function(editor){
  var escape = function(value){
    return value;
  };
  return {
    title: '日历控件',
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    minWidth: 300,
    minHeight: 80,
    contents: [{
      id: 'cb',
      name: 'cb',
      label: 'cb',
      title: 'cb',
      elements: [{
        type: 'text',
        label: '请输入日期控件名称',
        id: 'lang',
        required: true,
      },{
        type:'html',
        html:'<span>说明:日历控件选择的日期、时间将回填到该输入框?#23567;?lt;/span>'
      }]
    }],
    onOk: function(){
      lang = this.getValueOf('cb', 'lang');
      editor.insertHtml("<p>" + lang + "</p>");
    },
    onLoad: function(){
    }
  };
});

4、接下来就?#21069;?#25554;件加入到CKEditor里了,我是直?#26377;?#25913;CKEditor插件的核心文件。

找到ckeditor目录下的"ckeditor.js",这里的代码是经过压缩的,我们用CKEditor原来的about插件做参考。查找"about",找到

fullPage:false,height:200,plugins:'about,basicstyles

然后在"about"后面增加"date",这里就变成

plugins:'about,date,basicstyles

继续查找"about",找到

j.add('about',{init:function(l){var m=l.addCommand('about',new a.dialogCommand('about'));m.modes={wysiwyg:1,source:1};m.canUndo=false;l.ui.addButton('About',{label:l.lang.about.title,command:'about'});a.dialog.add('about',this.path+'dialogs/about.js');}});

在这个 j 前面增加

j.add('date', {requires: ['dialog'],init: function(l){l.addCommand('date', new a.dialogCommand('date'));l.ui.addButton('date', {label: l.lang.date.toolbar,command: 'date',icon: this.path + 'images/code.jpg'});a.dialog.add('date', this.path + 'dialogs/date.js');}});

接下来查找"i.toolbar_Basic=",这就是CKEditor默认的工具栏了,我们在这里加上"date",你可以加在你想要的位置,例如

['Maximize','ShowBlocks','-','date']

5、进入"ckeditor\lang",在"zh-cn.js"?#24615;?#21152;"date:'日期插件'"。

,date:{toolbar: '日期控件'}, link: { toolbar: '插入/编辑超链接', other: '<其他>', 

6、对CKEditor的修改已经OK了。

?#27604;?#20102;,显示ckeditor的工具栏时,也可以配置:打开config.js

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
  // Define changes to default configuration here. For example:
  // config.language = 'fr';
  // config.uiColor = '#AADC6E';

  config.toolbar =
  [
    ['Source'],
    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'Link', 'Unlink', 'Anchor'],
    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'ImageButton', 'Image'],
    ['Styles', 'Format', 'Font', 'FontSize'],
    ['TextColor', 'BGColor'],
    ['date'] //刚创建的日期插件(date)
  ];


};

实例图片:

    无相关信息
最新资讯
全通教育重组巴九灵不"灵"了?巴九灵:重组进度正常

全通教育重组巴九灵不

?#33041;?#20197;来,全通教育股价呈下行趋势。
谷歌实现的是“量子霸权?#34987;?#26159;“量子乌龙”?

谷歌实现的是“量子霸

谷歌研究人员宣布实现“量子霸权”,更多的是噱头。
Snap“伏地魔项目”曝光 揭Facebook攻击性竞争策略

Snap“伏地魔项目”曝

据国外?#25945;?#25253;道,照片分享应用Snapchat母公司Snap正与美
WeWork部分董事成员计划罢免CEO 从外部寻求继任者

WeWork部分董事成员计

9月23日,外媒援引知情人士的话,WeWork的部分董事成员计

口碑饿了么:“三个100

阿里巴巴2019年全球投资者大会上,口碑饿了么透露,年初启
最新文章
自动刷新从BrowserSync开始

自动刷新从BrowserSyn

Browsersync能让浏览器实时、快速响应您的文件更?#27169;╤tm
详解React中的todo-list

详解React中的todo-li

这篇文章主要介绍了React中的todo-list的相关知识,非常
使用 CodeMirror 打造属于自己的带高亮显示的在线代码编辑器

使用 CodeMirror 打造

写这个的目的是因为之前项目里用到过 CodeMirror,觉得
百度UEditor编辑器使用教程与使用方法(图文)

百度UEditor编辑器使

今天笔者就给大家推荐一款百度UEditor编辑器。关于这
Ueditor和CKeditor 两款编辑器的使用与配置方法

Ueditor和CKeditor 两

这篇文章主要介绍了Ueditor和CKeditor 两款编辑器的使
Prism 代码高亮修改不包含 Code 标签的支持

Prism 代码高亮修改不

在 WordPress 中加入了百度的 UEditor 编辑器后,由于自
幸运蛋蛋pc开奖 一码必中特特 辽宁十一选五开奖结果 太湖一句定三码牛材网 河南体彩快赢481开奖 老款86版经典跑马机 极速时时是哪里的 扫码下载app 北京pk拾送彩金送28 海南体彩免费下载 快乐双彩票开奖结果