首页 > 原创作品

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

发布时间:2013-12-25 11:25:09 来源:星知苑 作者:星之宇

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

这个是测试引用blockquote标签

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

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

 

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']

 

相关合集

  • 爆率最高的免费捕鱼游戏
爆率最高的免费捕鱼游戏

简介:这里是捕鱼能手的世界超多的不同的鱼类让你捕到手酸都是可以的,精彩火爆的真实玩家线上的对抗看谁的手速更快更加的可以驾驭各种不同的大炮,有的还有多种武器可以进行装备也有丰富好看的皮肤在这里让玩家可以进行更换,还有属性各种加成,爆率是超级的高,想不要金币都是很难的那种哦。