在html编辑器中插入css,怎么给kindeditor编辑器添加引用（blockquote）标签，并选择css样式...

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

}

效果：

这里是引用标签效果

这里是引用标签效果

20190109

使用的过程中，想到如果能选择引用框的样式比较好，所以就改了下，实现了这个功能，(稍微改了下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，改之后效果

这里是蓝色样式效果

这里是蓝色样式效果

这里是红色样式效果

这里是红色样式效果

20190327

在使用引用功能时，前台不能识别回车换行，导致文字都堆到一行去了。

本来想修改23行

code = textarea.val(),

为

code = textarea.val().replace('\n','
'),

把\n替换成
，但是发现不行。

所以就修改了25行

html = '

\n' + K.escape(code) + '

';

为

html = '

\n' + K.escape(code) + '

';

在blockquote标签中加上pre标签，成功解决问题