kindeditor图片上传并且图片自动适应编辑器大小

使用kindeditor上传图片

使kindeditor中的图片适应编辑器大小

作者&＃xff1a;kiss小祥   QQ 244556979

语言&＃xff1a;java 在jsp里使用

版本&＃xff1a;4.1.7  2013年4月21发布的&＃xff0c;最新版哦

公司做博文发布系统&＃xff0c;需要一个在线所见即所得的编辑器&＃xff0c;找了好多 比如ckediter&＃xff0c;ewebediter&＃xff0c;kindeditor&＃xff0c;ueditor。。。

最后还是选择了kindeditor。只因为看它顺眼。恩。。就是顺眼。

关于kindeditor的使用我就不说了&＃xff0c;官网有详细的中文介绍&＃xff0c;主要说一下使用过程中的问题。

错误一

上传图片的时候按照官网的配置&＃xff0c;总是报上传错误。

当我满怀欣喜的下载下来&＃xff0c;并且按照配置配置好了。。。然后就伤了

以下为我的编辑器配置&＃xff1a;

KindEditor.ready(function(K) {

  window.editor &＃61; K.create("#content",{

//上传程序&＃xff08;是一段写在jsp里面的上传代码&＃xff09;

 uploadJson : &＃39;../editor/jsp/upload_json.jsp&＃39;,

//文件管理程序&＃xff08;获取文件、图片列表&＃xff0c;并显示&＃xff09;

 fileManagerJson : &＃39;../editor/jsp/file_manager_json.jsp&＃39;,

//可以设置是否显示图片空间按钮&＃xff08;不安全&＃xff0c;发布到互联网以后不建议显示&＃xff09;

 allowFileManager : false,

//按钮组

 items:[

           &＃39;forecolor&＃39;, &＃39;hilitecolor&＃39;, &＃39;bold&＃39;,&＃39;italic&＃39;, &＃39;underline&＃39;,  &＃39;removeformat&＃39;, 

           &＃39;undo&＃39;, &＃39;redo&＃39;, &＃39;|&＃39;,&＃39;justifyleft&＃39;, &＃39;justifycenter&＃39;, &＃39;justifyright&＃39;,

          &＃39;justifyfull&＃39;, &＃39;insertorderedlist&＃39;, &＃39;insertunorderedlist&＃39;, 

          &＃39;formatblock&＃39;, &＃39;fontname&＃39;, &＃39;fontsize&＃39;, &＃39;|&＃39;,  &＃39;image&＃39;, &＃39;multiimage&＃39;,&＃39;emoticons&＃39;, &＃39;link&＃39;

          ],

//是否可以拖动 0&＃xff1a;不可以

     resizeType:0,

themeType:"simple",

//这是关系到图片自动缩小的样式&＃xff0c;想让图片适应编辑器&＃xff0c;一定要写哦&＃xff0c;等会贴代码

    cssPath:"../tools/css/kindeditoriframe-user.css",

width:"650px",

height:"300px"

  });

});

Ok&＃xff0c;配置好了。然后兴奋的开始上传图片。。。。

    obj.put("message", message); 

    return obj.toJSONString(); 

} 

%> 

Ok 解决上传问题&＃xff0c;然后就看到可以上传了

错误二

上传的图片把编辑器撑开了&＃xff0c;影响视觉

好吧。。图片太宽&＃xff0c;滚动条破坏了我的视觉。我要改变这局面&＃xff0c;&＃xff0c;但是。。编辑器不是我写的&＃xff0c;我不知道哪里有这样的属性可以设置。。而且貌似没有。

在网上搜了好多 大多数都是更改上传程序 也就是upload_json.jsp  但是当使用程序缩小图片的时候会造成图片失真。而保存两份啰嗦不说而且浪费空间。。

茫茫然不知所以然的时候。。我就去看官方的说明文档去了。然后就看到这一个属性&＃xff1a;cssPath

指定编辑器iframe document的CSS文件&＃xff0c;用于设置可视化区域的样式。

· 数据类型: String或Array

· 默认值: 空

灵光一闪&＃xff0c;终于&＃xff0c;在本大侠的聪明才智下自己找到了一个解决办法&＃xff1a;

很简单&＃xff0c;第一步&＃xff1a;创建一个css文件 内容如下&＃xff1a;

&＃64;CHARSET "UTF-8";

img {

max-width: 770px;

width: expression(this.width>770?"770px":this.width&＃43;"px");

overflow: hidden;

}

然后在编辑器配置文件里引入这个css文件。就像这样 

然后开启编辑器 上传&＃xff0c;哈哈。。效果出来了~~而且缩小不失真。

特此分享。希望大家使用的时候多看看官方文档。祝大家使用愉快。

转载请注明出处&＃xff0c;thanks。