怎么给kindeditor编辑器添加引用(blockquote)标签,并选择css样式
web kindeditor 2018-07-03 2754 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6142723 2580 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)
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 = ['<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']

5,最后的效果图如下

from clipboard

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 = ['<div style="padding:10px 20px;">',
				'<div class="ke-dialog-row">',
				'<select class="ke-code-type">',
				'<option value="blue">蓝色</option>',
				'<option value="red">红色</option>',
				'</select>',
				'</div>',
				'<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 = K('.ke-code-type', dialog.div).val(),
							code = textarea.val(),
							cls = type === '' ? '' :  type,
							html = '<blockquote class="' + cls + '">\n' + K.escape(code) + '</blockquote> ';
						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','<br/>'),

把\n替换成<br/>,但是发现不行。

所以就修改了25行

html = '<blockquote class="' + cls + '">\n' + K.escape(code) + '</blockquote> ';

html = '<blockquote class="' + cls + '"><pre>\n' + K.escape(code) + '</pre></blockquote> ';

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

版权声明:本篇文章来源于网络。 来源链接

相关推荐
kindeditor批量图片上传,修改上传的数量和大小限制
kindeditor | 2017-08-03 4926
KindEditor批量图片上传,默认允许用户同时上传20张图片,单张图片容量不超过1MB。 有时不满足我们的需要,就需要修改KE批量上传图片的个数和单个图片大小限制。 KindEditor 4.1.11:  方法一:调用KE时配置好参数就行,代码如下: <link rel="stylesheet" h...
kindeditor编辑器插入程序代码后在<p>标签和<pre>标签间会多出一行<p><br></p>
kindeditor | 2020-04-26 4421
kindeditor编辑器插入程序代码后在<p>标签和<pre>标签间会多出一行<p><br></p> 导致前台显示的时候很难看。如下图: 我想实现的情况是1,但是出现的情况是2 而且初次提交代码没问题,当修改的时候用到“HTML代码”标签的时候,就会出现多...
评论:0条
评论加载中...
发表评论