关于kindeditor-4.1.7的上传图片使用

基于jfinal框架的kindeditor+freemarker前端编辑器开发

需要注意的是由于用到freemarker反馈地址,所以必须把初始化kindeditor代码写入到html页面,否则上传图片路径取不到当前系统地址。

上传图片可右击选择图片属性,更改图片的大小和在文章中的样式。

html的代码(关键代码):

<script type="text/javascript" charset="utf-8" src="${base}/resources/kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="${base}/resources/kindeditor-4.1.7/lang/zh_CN.js"></script>

<form class="form-horizontal" id="addInfor" action="${base!}/show/editBussInfor" method="post" >

<textarea enctype="multipart/form-data" class="TextBox Required" style="width: 300px;height:300px;"  name="veVenue.venue_brief" id="venue_brief" >${infor.informationContent!}</textarea>

</form>

<script type="text/javascript">
$(function () {
  $(‘[data-toggle="popover"]‘).popover();
});
var options = {
  filterMode : false,
  items : [‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘,‘cut‘, ‘copy‘, ‘paste‘,
  ‘plainpaste‘, ‘wordpaste‘, ‘|‘,‘justifyleft‘, ‘justifycenter‘,‘justifyright‘,‘justifyfull‘, ‘|‘,
  ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘,
  ‘superscript‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘|‘,
  ‘formatblock‘, ‘fontname‘, ‘fontsize‘, ‘|‘,‘forecolor‘, ‘hilitecolor‘ ,‘|‘,
  ‘bold‘, ‘italic‘,‘underline‘,‘fullscreen‘,‘image‘,‘strikethrough‘, ‘lineheight‘, ‘removeformat‘, ‘|‘,
  ‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘baidumap‘, ‘pagebreak‘,
  ‘anchor‘, ‘link‘, ‘unlink‘, ‘|‘, ‘about‘
  ],
  afterBlur : function() {
    this.sync();
  },
  themeType : ‘oschina‘,
  resizeType : 1,
  shadowMode : true,//弹框是否有阴影
  allowPreviewEmoticons : false,
  allowUpload : true, //允许上传图片
  allowImageUpload : true,
  allowImageRemote : true,
  uploadJson : ‘${base!}/img/uploadMap?mapType=2‘//上传路径
};

KindEditor.ready(function(K) {
  window.editor = K.create(‘#venue_brief‘, options);
});
</script>

--------------------------------------------------------------------------------------

上传图片后台代码(存到数据库中):

只放上传相关代码

/**
* 带参数传递测试
* @throws IOException
*/
public void uploadMap() throws IOException{
  UploadFile uploadFile = getFile();
  String mapType = this.getPara("mapType");

  String mapCode= "";//初始化图片id

  //取到文件保存
  if(uploadFile!=null){
  byte[] bs = FileHelper.toBytes(uploadFile.getFile());
  String nameImg = uploadFile.getFileName();
  String[] strs=nameImg.split("\\.");
  mapCode = strs[0];

  //检测数据库里图片的id是否已经存在
  MapService imgSer = new MapService();
  EbMapFile img = imgSer.findMapFile(mapCode);
  if(img == null){
    img = new EbMapFile();
    //建立文件路径
    File dirFile = new File(MCubeAppConfig.getInstance().getImagUrl());
  if(!dirFile.exists()){
    dirFile.mkdirs();
  }

  File desFile = new File(dirFile, mapCode);//定义文件名
  boolean success = false;
  try {
    success = uploadFile.getFile().renameTo(desFile);//jfinal批量上传文件时重命名
   } catch (Exception e) {
    e.printStackTrace();
  }
  setAttr("error", success ? 0 : 1);//返回给kindeditor编辑器
  if(success){
    img.set("map_id", "EB_MAP_seq.nextval");
    img.set("map_code", mapCode);
    img.set("map_type", new BigDecimal(mapType));//图片类型,1为中心地图,2为资讯图片
    img.set("map_CONTEN",bs);
    String mapUrl = MCubeAppConfig.getInstance().baseUrl +"/img/iconMap?imgName="+mapCode;
    img.setMapUrl(mapUrl);
    setAttr("url", mapUrl);//返回给kindeditor编辑器
    if(img.save()){
      setAttr("message", "上传成功");
      }
    }else{
      setAttr("message", "上传失败");
    }  
      }
  }
  setAttr("imgName",mapCode);
  render(new JsonRender().forIE());
}

/**
* 添加
*/
public void addCenterInfor(){
  String content = this.getPara("veVenue.venue_brief");//取得kindeditor内容

  EbInformation infor = new EbInformation();

  infor.set("INFORMATION_CONTENT",content);//数据库中该字段为clob或者glob数据类型

时间: 2024-08-25 07:24:11

关于kindeditor-4.1.7的上传图片使用的相关文章

利用KindEditor的uploadbutton实现异步上传图片

利用KindEditor的uploadbutton实现异步上传图片 异步上传图片最常用的方法就是图片在iframe中上传,这样只需要刷新iframe,而不用刷新整个页面.     KindEditor文本编辑器框架中uploadbutton可以帮助我们实现,不再需要我们自己去写iframe的实现,使用起来很方便. html部分: ..... <input class="" type="text" name="beautyTown.img_0"

KindEditor - 富文本编辑器 - 使用+上传图片

效果: 项目结构: Extend:存放各种扩展 BlogAction.class.php:博文模块 addBlog.html:添加博文页面 Html代码: 只是用一个核心文件也可,也可以加入其他js文件,比如语言包,扩展包. addBlog.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

KindEditor富文本框编辑器上传图片功能实现,基于java项目

1. HTML标签与jquery代码 <textarea id="editor_id" style="width: 200px; height: 200px;"></textarea> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/java

kindoreditor上传图片

<!doctype html><html> <head> <meta charset="utf-8" /> <title>ImageDialog Examples</title> <link rel="stylesheet" href="../themes/default/default.css" /> <script src="../kinded

KindEditor 一款好用的HTML可视化编辑器(富文本编辑器)

KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合在CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一. ---以上内容来自百度百科 怎么用呢? 下载kindeditor 官网下载地址在这里 下载完成后,解压完并放入自己的项目中,目录结构如图: 初始

kindeditor上传图片自动压缩过大的图片

kindeditor上传图片时自动将过大(像素以及图片长宽)的图片进行压缩,只需要在kindeditor中upload_json.ashx里面修改! <%@ webhandler Language="C#" class="Upload" %> /** * KindEditor ASP.NET * * 本ASP.NET程序是演示程序,建议不要直接在实际项目中使用. * 如果您确定直接使用本程序,使用之前请仔细确认相关安全设置. * */ using Sys

kindeditor扩展粘贴图片功能&amp;修改图片上传路径并通过webapi上传图片到图片服务器

前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功能 kindeditor修改图片上传路径并通过webapi上传图片到图片服务器(支持分布式图片) 结果演示 1.扩展粘贴图片功能演示 2.修改图片上传路径演示: 我们的网站演示地址是:http://localhost:9393/ 我们的图片服务器地址是:http://localhost:9394/

KindEditor单独上传图片、单独上传文件、编辑器的通用设置与调用

KindEditor.ready(function(K){ var editor = K.editor({ allowFileManager:true }); // 上传图片 K('#imageBtn').click(function(){ editor.loadPlugin('image', function(){ editor.plugin.imageDialog({ imageUrl:K('#image').val(), clickFn:function(url){ K('#image')

kindEditor完整认识 PHP上调用并上传图片说明/////////////////////////////z

最近又重新捣鼓了下kindeditor,之前写的一篇文章http://hi.baidu.com/yanghbmail/blog/item/c681be015755160b1d9583e7.html感觉有点不太全面细致,所以今天再重新写下. 此文所述KE版本为当前2011年2月3日 20:10:18最新版KindEditor 3.5.2 先看下目录结构 我使用的是PHP 所以黄色区域的文件夹是可以删除的. 重命名为:kindeditor 看下我的WWW目录: 这里的关键文件就是图中的两个 其它我划

kindeditor编辑器上传图片

使用的是asp.net MVC 上传图片. 1.下载Kindeditor的对应的包 2.html页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>UploadByKindeditor</title> <script