`
baiyuxiong
  • 浏览: 178298 次
  • 性别: 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
分享到:
评论

相关推荐

    KindEditor 4.1.10 (2013-11-23)

    KindEditor ASP.NET 本ASP.NET程序是演示程序,建议不要直接在实际项目中使用。 如果您确定直接使用本程序,使用之前请仔细确认相关安全设置。 使用方法: 1. 解压zip文件,将所有文件复制到IIS的wwwroot/...

    kindeditor-4.1.11-zh-CN

    KindEditor-4.1.11-zh-CN是一款流行的开源富文本编辑器,专为中国用户设计,提供了全中文的支持。富文本编辑器是网页应用程序中常见的组件,它允许用户以类似Word的方式创建、编辑和格式化文本内容,适用于论坛、...

    KindEditor 4.1.11 (2016-03-31) [1143KB]

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...

    KindEditor 4.1.11网站实例

    一怒之下,我自己进行了修改和配置,搞成了一个网站示例.下载解压后,可以直接运行!!完全无问题.! Kindeditor版本好像官方2012年之后就不更新了,官方最新的为 KindEditor 4.1.1 (2012-06-10), ,我这个网站里的是从qq群...

    富文本 文章在线编辑器kindeditor4x---加上layui版

    4. **组件丰富**:layui 包含了大量的前端组件,如日期选择器、弹出层、分页、树形结构等,与KindEditor 结合可以实现更多功能。 5. **易于使用**:layui 的API和文档清晰易懂,上手速度快,开发者可以快速集成和...

    KindEditor富本编辑器-jsp版

    KindEditor富本编辑器-jsp版 直接复制到项目里直接可以用,本地路径 http://127.0.0.1:8080/KindEditor/kindeditor-4.1.10/examples/default.html

    kindeditor-form-editor

    然而,"kindeditor-form-editor"插件则进一步增强了这些功能,使用户能够创建包含输入框、选择框、复选框、下拉菜单等在内的各种表单元素,从而在文本内容中集成数据收集或交互性元素。 在工作流程设计中,表单编辑...

    kindeditor-4.1.11-zh-CN插件及api文档

    2. **可定制化插件**:KindEditor提供了一系列插件,如图片上传、视频插入、表格编辑等,开发者可以根据需求选择启用或禁用这些插件,也可以开发自定义插件来扩展编辑器的功能。 3. **API文档**:API(Application ...

    编辑器 kindeditor_v3.5.5-zh_CN

    3. **kindeditor-min.js**:这是经过压缩和优化的版本,用于减少页面加载时间。相比于未压缩的kindeditor.js,它体积更小,但功能相同。 4. **chinaz.com.txt**:这个文件可能是某个网站(chinaz.com)的示例数据...

    kindeditor-4.1.11-zh-中文.zip

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript ...

    kindeditor_v3.5.5-zh_CN 内含图片服务器故障解决方案

    KindEditor通过内置的上传插件与服务器进行交互。当用户选择图片上传时,编辑器会将图片数据发送到预设的服务器地址,服务器接收到请求后处理图片(如重命名、存储等),然后返回一个表示图片URL的响应。如果服务器...

    kindeditor添加网络视频插件

    1. **安装与引入KindEditor**: 首先,你需要将`kindeditor-all.js`或压缩包中的`kindeditor-all-min.js`文件引入到你的网页中。这两个文件分别是KindEditor的完整版和压缩版,选择其中一个根据实际需求加载。在HTML...

    kindeditor--自定义添加网络视频插件,修改批量图片上传方式flash为h5

    3. 插件函数:当用户点击按钮时,弹出一个对话框让用户输入视频URL,然后插入相应的视频HTML代码到编辑器中。 其次,修改批量图片上传方式从Flash转为H5。由于Flash技术逐渐被淘汰,HTML5提供了更好的跨平台支持,...

    kindeditor_2011-07-19

    2. **跨平台支持**:KindEditor是基于JavaScript开发的,这意味着它可以在任何支持JavaScript的浏览器上运行,包括Windows、Mac、Linux等操作系统上的各种浏览器,如Chrome、Firefox、Safari、IE等。 3. **自定义...

    Kindeditor-3.5-project java

    Kindeditor-3.5 是一个基于Java开发的开源富文本编辑器项目,它为Web应用提供了功能丰富的文本编辑解决方案。这个项目的实用性与简洁性是其主要特点,使得开发者能够快速集成到自己的应用中,为用户提供类似桌面应用...

    kindeditor文本编辑插件

    在`kindeditor-master`压缩包中,可能包含了源码、示例、文档等相关资源,方便开发者理解和学习。 8. **响应式设计**: 虽然KindEditor的主要目标是桌面端应用,但通过适当的CSS调整,也可以使其适应移动设备,...

    kindeditor-3.5.5-zh_CN编辑器

    KindEditor-3.5.5-zh_CN编辑器是一款强大的富文本在线编辑工具,专为中文用户设计。这款编辑器提供了丰富的功能,旨在为网站内容创作提供便捷的文本编辑体验。下面将详细介绍这款编辑器的核心特点和使用方法。 1. *...

    kindeditor v4.1.13(2017-08-22版)

    ver 4.1.13 * 改善:修改服务端代码的后缀名,避免直接上传到服务器后出现安全漏洞。 ver 4.1.12 * Bugfix:使用 use strict 时 JS 报错。 * Bugfix:自动高度的时候,全屏模式下还是执行自动高度。...

    KindEditor使用说明书-整理后

    下载完成后,解压`kindeditor-x.x.x.zip`文件包。 ##### 2. 部署编辑器 将解压后的所有文件上传到您的网站程序目录里。例如,您可能会将它们放置在类似`http://您的域名/editor/`这样的路径下。 **注意**:根据您...

Global site tag (gtag.js) - Google Analytics