ckeditor插件开发主要分为3个步骤
1.在ckeditor的plugins目录下新建一个目录,该目录的名称为插件的名称
2.在新建的目录下面新建plugin.js文件
3.通过config.extraPlugins将插件引入工具栏
以下代码创建个简单下拉插件
1.pluing.js
/**
* @author lsj
* @date 2014/2/20
*/
CKEDITOR.plugins.add( 'wfpromt',
{
requires : [ 'richcombo', 'styles' ],
init : function( editor )
{
var config = editor.config,
lang = editor.lang.format;
//下拉数据源
var tags = [];
tags[0]=["同意", "同意", "同意"];
tags[1]=["不同意", "不同意", "不同意"];
tags[2]=["批准1", "批准1", "批准1"];
tags[3]=["批准2", "批准2", "批准2"];
tags[4]=["批准3", "批准3", "批准3"];
tags[5]=["批准4", "批准4", "批准4"];
tags[6]=["批准5", "批准5", "批准5"];
tags[7]=["批准6", "批准6", "批准6"];
tags[8]=["批准7", "批准7", "批准7"];
//添加下拉框
editor.ui.addRichCombo( 'wfpromt',
{
label : '常用提示语',
title : '常用提示语',
className : 'cke_format',
panel :
{
css : editor.skin.editor.css.concat( config.contentsCss ),
multiSelect : false,
attributes : { 'aria-label' : lang.panelTitle
}
},
init : function()
{
this.startGroup( '常用提示语' );
for (var this_tag in tags){
//function add( 值, html,文本 )
this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
}
},
onClick : function( value )
{
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml(value);
editor.fire( 'saveSnapshot' );
}
});
}
});
2.添加插件到ckeditor工具栏
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'wfpromt',
toolbar :
[
[ 'Source','Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'wfpromt' ]
]
});
(*** 注:默认生成的下拉框高度和宽度固定的,可通过以下属性设置****)
div.cke_panel.cke_ltr.cke_rcombopanel { width: 300px !important;height: 100px !important; }
span.cke_rcombo span.cke_styles a span span.cke_text { width: 150px; }
分享到:
相关推荐
CKEditor插件开发
CKEditor插件开发文档,内容丰富,包括插件的完整流程
CKeditor 自定义插件 需求:我需要在编辑文本的时候,选择一段文字,点击自定义的按钮,就能够在这段文字后面增加一个图标,图标超链接去一个地址,以选中的文字作为参数。
ckeditor插件工具,ckeditor插件工具,ckeditor插件工具,ckeditor插件工具,
本插件源码来自互联网,由于源代码基于ckeditor3.6.61,故对源码进行过简单修改,以求适应ckeditor4.4.7
ckeditor 自动排版插件 本插件下载解压后直接放plugins目录下,怎么添加到ckeditor的按钮里就不用我说的吧
用于最新CKEditor4.0的行距插件,不能用于CKEditor3.X.X及以前版本
CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件 1:把video文件复制到ckeditor/plugins/下面 2:ckeditor/config.js 中添加如下: a:在toolbar中['Image','Flash','Video'],配置加入“Video” 项。 b:配置 ...
ckeditor 行间距插件
ckeditor onchange 事件插件
CKEditor5-plugins基于ckeditor5的,适用于自定义构建的插件包。要使用此插件包,则不建议直接使用官方的classic、document、inline、balloon等构建,建议自定义构建features 包含功能├── src│ ├── clear-...
FLV视频格式具有本身占有率低、视频质量良好、体积小等特点,非常适合在网络上传播。国内的视频站几乎都是采用FLV格式作为解决方案...于是我自己动手开发CKEditor的FLV视频播放插件现在上传。PS:这个版本是.net版的。
二次开发手册完整版,有大量实例,如果有不明白请加我QQ。
ckeditor 4 代码插件安装 主页:wudimei.com 安装 把plugins复制到ckeditor目录中,注意是ckeditor4. 修改ckeditor/config.js,加入如下代码: CKEDITOR.editorConfig = function( config ) { // Define changes ...
ckeditor设置行间距资源包 1.下载ckeditor的行距插件包 lineheight 2.解压到ckeditor/plugins目录下 3.修改ckeditor目录下的 config.js文件
ckeditor4添加上传视频插件 后端java配置看下面的链接 https://blog.csdn.net/sxz13145/article/details/124410416
CKEditor二次开发手册 CKEditor 是目前市场上比较灵活的在线WYSIWYG编辑器之一. 它灵活的设计, 开放的API和详细的文档使得用户扩展功能... 本文尝试勾勒出 CKEditor插件开发的基础,包含了增加按钮,对话框和执行命令.
NULL 博文链接:https://kingj.iteye.com/blog/1700931
适用于ckeditor4.0以上,使用方法: 1.将lineheight文件夹拷入plugins文件夹下 2.修改config文件加入config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight'); 语句用来加载插件
ckeditor行间距插件包,解决ckeditor没有行间距的问题