织梦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插件,不用去看效果! ^_^
发表评论(不用注册哟!)