织梦dedecms文章编辑器ckeditor在内容页插入图片时用JS快速修改图片宽高尺寸样式的方法

织梦dedecms文章编辑器在内容页插入图片时用,控制图片尺寸的方法有很多。

方法一:

用CSS样式,在前端页中整体控制全部图片。

img{width:800px;}

注意:只设置宽,高不设,这样图片不会变形。

但,这样有个坏处,没有800宽的图片就会被拉大,像素就不清晰了!


方法二:

还是CSS样式,改一下形式:

img{max-width:800px;}

设置最大值宽度,即,大于这个宽度的图片就被控制重设了。

但,它还是有点小问题,在响应式网站时会与img{max-width:100%;}冲充。


综合方式是,方法一+方法二:

img{width:800px;max-width:100%;}

当用小于宽800px尺寸的时候,单独给图片加width样式。

============

补充===本例 ckeditor版本为 v3.6.2 ,其它版本不清楚。

今天要讲的是,给dedecms文章编辑器ckeditor,加一个按钮,

达到:点一下,就可以填入预先设好的值,如图:

1.jpg

看图,做了个“红勾”小按钮,点一下,就帮我填上预设的800宽度,高度被清空。

方法简记:

1、添加按钮

找到ckeditor插件中的image.js。(路径:\include\ckeditor\plugins\image\dialogs\)

因为JS被压缩了,参考并查找它原有的“原始尺寸”按钮位置,在它后面加上我们的按钮代码:

image.js.jpg

加的代码:

+'<a href="javascript:void(0)" tabindex="-1" title="设宽500" class="cke_btn_reset800" id="btnResetSize800" role="button800" onclick="qoogle()"><span class="cke_label">设宽500</span></a>'

注意,这里我们用了个点击事件函数onclick="qoogle()",等下要添加这个JS函数。


2、添加键钮的css图片

找到ckeditor的皮肤样式dialog.css文件。(路径:\include\ckeditor\skins\kama\)

css一样被压缩了,同样,参考并查它原有的“原始尺寸”按钮的class样式“.cke_skin_kama .cke_dialog a.cke_btn_reset”,

换成我们的class名称“.cke_skin_kama .cke_dialog a.cke_btn_reset800”,加载的图片名称也改一下(下一步要做个图)。

当然,它的“background-position”定位值也删掉。


3、添加图标

做个你喜欢的16X16的图片,放在\include\ckeditor\skins\kama\images\下面。(图片名称要和上面的CSS对应哦)

这个时候,你清缓存或重清加载image.js、dialog.css和你的测试页面,就可以看到添加的按钮了!   ^_^


4、添加函数

哪里调用ckeditor编辑器,我们就在哪里加JS函数。

找到article_add.htm和article_edit.htm这两个文件分别是“添加文章”和“修改文章”的,(路径:\dede\templets\)

添加JS:

function qoogle(){
    document.getElementById("cke_97_textInput").value="800";
    document.getElementById("cke_100_textInput").value="";
}

JS中value的这个预设值,你可以在这里自定义修改它。

OK,全重新加载所有(记得清缓存),就可以实现我们想要的功能了。


=========

插入的图片如果被CSS控制缩小了,它的清楚度一样会的折扣!

怎么解决最好呢?

方法一,用PS修好图片尺寸为要使用的宽度是非常理想的!就是麻烦。


方法二,用类似colorbox.js这样的插件来放大图片也是棒棒的。

colorbox的用法很简单:

1、在要用的模板文件里,引入jquery.js、colorbox.js、colorbox.css三个文件(jquery要先引入)

2、页面加上JS代码:

我用的是这样的:

<script>
jQuery.extend(jQuery.colorbox.settings, {
	current: "当前图像 {current} 总共 {total}",
	previous: "前一页",
	next: "后一页",
	close: "关闭",
	xhrError: "此内容无法加载",
	imgError: "此图片无法加载",
	slideshowStart: "开始播放幻灯片",
	slideshowStop: "停止播放幻灯片",
});
$(document).ready(function(){
	$(".tc img").each(function(){
			var ourl=$(this)[0].src;
			$(this).attr("href",ourl).addClass("qoogleimg");
	});
	$(".qoogleimg").colorbox({rel:'group1',title:"qoogle个人网站",maxWidth:"1800px",closeQoogle:"退出方式:1,按Ese键;2,点击图片外区;3,——>"});
});
</script>

解读一下代码:

上面部分是colorbox的设置,设置了中文显示。

下面部分是用JQ查找出内容区的img标签,并加加上class="qoogleimg"样式名以及加上了href的图片超链接地址,

这些基本属性是colorbox必须用到的,我们用js来批量生成,就不用手动给每张图加上这些东东了。

然后$(".qoogleimg").colorbox({…… 这是核心部分,rel这个值是浏览图片分组用的,只在组内循环浏览,

其它的可要可不要,maxWidth是最大宽度,否而来个4000px的图,那用户体验不是很爽,我是根据大部分都到了1920px的显示器来设的。

closeQoogle值是我自己添加的属性,用于关闭说明的,是修改colorbox.js添加的,这个你必须删除!

OK了,这个插件也就这样成功了。


PS,本qoogle.cn站没有添加colorbox插件,不用去看效果!  ^_^





如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=76

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。