`
baiyuxiong
  • 浏览: 177910 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

kindeditor插件开发之-弹出下拉列表

    博客分类:
  • java
阅读更多
第一步,先定义下拉列表要显示的内容
例如:
plugins.code = {
	code:{
		php : 'php',
		csharp : 'csharp',
		java : 'java',
		css : 'css',
		javascript : 'javascript'
	}
};

与plugins.fontname、plugins.advtable等放在同一级内。

第二步:添加语言
KE.lang里加入一句:
code:'插入代码',
如:
KE.lang = {
	source : 'HTML代码',
	code:'插入代码',
	undo : '后退(Ctrl+Z)',
//.....

这个语言是当鼠标放在插件的图标上时,显示的提示。
第三步,插件加入工具栏
在KE.setting的items里加入code,如:
items : [
		'source', '|',  'code','image',
		'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'
	]

第四步,填写插件实现:
KE.plugin['code'] = {
	//插件图标被点击的处理函数,要弹出下拉列表
	click : function(id) {
		var codeList = KE.lang.plugins.code.code;
		var cmd = 'code';
		KE.util.selection(id);
		//创建一个menu
		var menu = new KE.menu({
			id : id,
			cmd : cmd,
			width : 150
		});
		KE.each(codeList, function(key, value) {
			//产生列表里每一项的html
			var html = '<span class="ke-reset">' + value + '</span>';
			//添加每一项到menu里,当menu点击时调用code插件的exec方法,并把点击了的id和key传给exec
			menu.add(
				html,
				function() { KE.plugin[cmd].exec(id, key); }
			);
		});
		menu.show();
		this.menu = menu;
	},
	//点了下拉列表的某一项后,在文本域插入一些代码
	exec : function(id, value) {
		var html = '
<br/><br/>
';
KE.util.insertHtml(id, html);
this.menu.hide();
KE.util.focus(id);
}
};

放在与其实插件代码如KE.plugin['source'] 等的旁边。
为了防止不必要的层级错误,最好的办法就是跟在正确的边上
换句话说,如果你不知道怎么走,就跟着人家知道怎么走的走。这是个真理。
0
5
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics