kindeditor 加载 html,为kindeditor编辑器添加“引用”（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

* @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 = ['

','','

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

' + K.escape(type) + '

';

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 = ['

',

'',

'

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

' + K.escape(type) + '

';

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