织梦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，加一个按钮，

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

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

方法简记：

1、添加按钮

找到ckeditor插件中的image.js。（路径：\include\ckeditor\plugins\image\dialogs\）

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

加的代码：

+'<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插件，不用去看效果！  ^_^