为kindeditor编辑器添加“引用”(blockquote)标签

相信引用<blockquote>标签定义块引用,这个功能大家不陌生吧,很多用过论坛,用其他的编辑器的人很多时候多用过引用<blockquote>这个功能。而且所有主流的浏览器均支持 <blockquote> 标签。但是kindeditor编辑器不知道为什么就是不加入这个功能,其实kindeditor要加入这个功能还是很简单的,写入插件即可。

这个是测试引用blockquote标签

blockquote标签应该对于很多人来说是一个很常用的功能,用起来也是比较方便的。

PS:其实这个我是为了emlog中kindeditor编辑器写的,方便博客写文章的人士。

 

kindeditor添加自定义插件,添加“blockquote”插件。

修改好的源码下载地址:百度网盘(editor/kindeditor.js文件没有修改需要自己修改)

 

by 2013-12-25 更新支持kindeditor 4.1.10版本(升级到1.1版本)

1、更新引用内容为空时插入提示;

2、更新引用插入后在编辑器中显示效果;

 

修改步骤:

1、添加plugins/bockquote/bockquote.js文件。(你没看错,文件夹名称少了个L,稍微做个广告不介意吧!)

/*******************************************************************************
* bockquote - KindEditor二次开发
*
* @author Star Yu <vip@myxzy.com>
* @site http://www.myxzy.com/
*******************************************************************************/

KindEditor.plugin('bockquote', function(K) {
	var self = this, name = 'bockquote';
	self.clickToolbar(name, function() {
		var lang = self.lang(name + '.'),
			html = ['<div style="padding:10px 20px;">','<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>','</div>'].join(''),
			dialog = self.createDialog({
				name : name,
				width : 450,
				title : self.lang(name),
				body : html,
				yesBtn : {
					name : self.lang('yes'),
					click : function(e) {
						var type = textarea.val();
						html ='<blockquote>' + K.escape(type) + '</blockquote> ';
					if (K.trim(type) === '') {
							alert(lang.pleaseInput);
							textarea[0].focus();
							return;
						}
						self.insertHtml(html).hideDialog().focus();
						}
				}
			}),
			textarea = K('textarea', dialog.div);
		textarea[0].focus();
	});
});

2、添加plugins/bockquote/bockquote.css文件,用于编辑器显示效果。

blockquote {
	border: 0;
	background-color:rgb(245,245,245);
	border-left: 3px solid rgb(0, 225, 225);
	margin-left: 2em;
	padding: 0.5em;
	font-size: 110%;
	display: block;
	font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	margin: 1em 0px;
	white-space: pre;
}
blockquote {
	width: 630px;
	margin: 1em auto;
	padding: 1em;
	white-space: pre-wrap;
}


3、定义语言,修改lang/zh_CN.js文件。添加以下代码。

	bockquote : '插入引用',
	'bockquote.pleaseInput' : '请输入引用文本。',


4、修改themes/default/default.png图片和default.css文件

这个图片我已经修改好了,会的人可以自己用photoshop修改,是图片的最后一个图标。

default.css文件添加如下代码

.ke-icon-bockquote {
	background-position: 0px -1248px;
	width: 16px;
	height: 16px;
}

5、添加调用编辑器时items数组里添加bockquote插件

items : ['bockquote'],

cssPath :[ './editor/plugins/bockquote/bockquote.css'],

 

by 2013-05-10(发布1.0版本)

1、添加plugins/bockquote/bockquote.js文件。

KindEditor.plugin('bockquote', function(K) {
	var self = this, name = 'bockquote';
	self.clickToolbar(name, function() {
		var lang = self.lang(name + '.'),
			html = ['<div style="padding:10px 20px;">',
				'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
				'</div>'].join(''),
			dialog = self.createDialog({
				name : name,
				width : 450,
				title : self.lang(name),
				body : html,
				yesBtn : {
					name : self.lang('yes'),
					click : function(e) {
						var type = textarea.val();
						html = '<blockquote>' + K.escape(type) + '</blockquote>';
						self.insertHtml(html).hideDialog().focus();
						}
				}
			}),
			textarea = K('textarea', dialog.div);
		textarea[0].focus();
	});
});
2、定义语言,修改lang/zh_CN.js文件。添加以下代码。
	bockquote:'插入引用',

3、修改themes/default/default.png图片和default.css文件

这个图片我已经修改好了,会的人可以自己用photoshop修改,是图片的最后一个图标。

default.css文件添加如下代码

.ke-icon-bockquote {
	background-position: 0px -1248px;
	width: 16px;
	height: 16px;
}
4、添加调用编辑器时items数组里添加bockquote插件
items : ['bockquote']

 

  • 下载列表

目前有 3 条评论

avatar

xhq  2016-01-11 00:22 2楼

不错,公司做项目用的是kindeditor,要加入video标签,折腾了不少时间,我决定写篇博客,怕忘了,多多交流,http://wp.iyouths.org/224.html 回复
avatar

蓝色优化  2013-05-13 22:06 1楼

你好,我是蓝色优化论坛的站长,现在论坛正处于发展阶段,我们的目标就是聚合一群热爱seo的朋友,可否做个友情链接,并且诚挚的邀请你加入 蓝色优化! www.blueseo.org 回复
avatar

星之宇  2013-05-13 22:09

@蓝色优化:可以做友情链接的,支持下新站,已添加友链,请在24小时内填上本站连接。 回复
昵称
邮箱
主页
提交
订阅