Java WritableSheet 添加url图片显示 javaweb项目的图片显示_ViewUI

Java WritableSheet 添加url图片显示 javaweb项目的图片显示_json_02

下载完成之后 解压   得到  

Java WritableSheet 添加url图片显示 javaweb项目的图片显示_javascript_03

可以参考ueditor文档进行学习,文档地址:http://fex.baidu.com/ueditor/#server-path

现在开始学习:环境 myeclipse10、tomcat7.0、win7 

在myeclipse中创建 javaweb项目  项目名为 uedemo

Java WritableSheet 添加url图片显示 javaweb项目的图片显示_开发工具_04

在项目webroot下面创建ueditor文件夹,

然后打开utf8-jsp文件:所有的文件

Java WritableSheet 添加url图片显示 javaweb项目的图片显示_javascript_05

拷贝到项目中的ueditor文件中,jsp文件夹中的lib文件夹中的jar包拷贝到项目web-inf文件中的lib文件夹中

再打开文件ueditor-1.4.3.3文件夹,找到jsp文件的src文件夹复制到项目中

完成这些之后,发现项目中有报错,

第一步jsp中的错误消除:那是js验证报错,只需要取消js的验证即可;

在报错的文件上右击选择myeclipse在右边选择exclude from validation就可以了

第二步:类中的错误,打开报错的类,删除对应的错误的方法头上的注解即可;

开始编辑页面index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>ueditor demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
 </head> 
<!--主体 包含具体说明内容-->
<body>
 <textarea id="myeditor" style="height:800px;"></textarea>
 <script type="text/javascript">

 var ue = UE.getEditor("myeditor");
 </script>
</body>
</body>
</html>

然后在浏览器中访问 http://localhost:9099/uedemo/

Java WritableSheet 添加url图片显示 javaweb项目的图片显示_java_06

并出现ueditor编辑器  这时就可以进行编辑,但是上传文件图片还是失败的
下面开始配置上传:

Java WritableSheet 添加url图片显示 javaweb项目的图片显示_json_07

找项目中的config.json文件打开,这个里面就是关于上传的配置,里面注释的很清楚,

我只需要配置自己需要的就好,其他的默认。

 "imageUrlPrefix": "/uedemo", /* 图片访问路径前缀 */

将此处的配置为自己的项目名称即可,下面的其他imageUrlPrefix一样,这样再次访问就可以上传图片了,

但是在在线图管理哪一栏中图片的回显是失败的,这个需要修改源代码

修改com.baidu.ueditor.hunter.FileManager类下的一个方法,修改如下:

源代码:

private String getPath ( File file ) {
 String path = file.getAbsolutePath();
 return path.replace( this.rootPath, "/" );
 }

修改为:

private String getPath ( File file ) {
   String path = file.getAbsolutePath();
   String str=path.replace(this.rootPath.replaceAll("\\/", "\\\\"), "\\" );
   return str;
}

重启即可完成,其他学习 ,请看ueditor文档,菜鸟一枚,如有不妥,请包涵。