kindeditor编辑器自己没有带引用(blockquote)标签的，如果你需要增加是需要自己修改一些东西的，下面我来给大家介绍在eblog中给kindeditor编辑器添加引用(blockquote)标签具体步骤有需要了解的同学可参考。
blockquote标签应该对于很多人来说是一个很常用的功能，用起来也是比较方便的。废话不多说了，下面开始改造之旅。
kindeditor添加自定义插件，添加“blockquote”插件
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']
5,最后的效果图如下
6,前端页面引用标签的css举例如下：
blockquote{
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
padding-left: 15px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-left: 3px solid #ccc;
background-color:#f1f1f1
}
效果：
这里是引用标签效果
这里是引用标签效果
0109
使用的过程中，想到如果能选择引用框的样式比较好，所以就改了下，实现了这个功能，(稍微改了下code/code.js代码，借用过来)
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 = K('.ke-code-type', dialog.div).val(),
code = textarea.val(),
cls = type === '' ? '' : type,
html = '
\n' + K.escape(code) + '';
if (K.trim(code) === '') {
alert(lang.pleaseInput);
textarea[0].focus();
return;
}
self.insertHtml(html).hideDialog().focus();
}
}
}),
textarea = K('textarea', dialog.div);
textarea[0].focus();
});
});
2，改之后前台css样式
blockquote,blockquote.blue{
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
padding-left: 15px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-left: 3px solid #5bc0de;
background-color:#f4f8fa;
color:#27b0d9;
}
blockquote.red{
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
padding-left: 15px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-left: 3px solid #d9534f;
background-color:#fdf7f7;
color:#d9534f;
}
3，改之后效果
这里是蓝色样式效果
这里是蓝色样式效果
这里是红色样式效果
这里是红色样式效果
0327
在使用引用功能时，前台不能识别回车换行，导致文字都堆到一行去了。
本来想修改23行
code = textarea.val(),
为
code = textarea.val().replace('\n','
'),
把\n替换成
，但是发现不行。
所以就修改了25行
html = '
\n' + K.escape(code) + '';
为
html = '
';\n' + K.escape(code) + '
在blockquote标签中加上pre标签，成功解决问题
