JavaWeb集成百度UMEditor详细操作(实现上传图片)+demo源码

来源：互联网发布：d3.v3.min.js引用编辑：程序博客网时间：2024/05/01 08:21

第一步.下载百度UEditor

第二步.解压（我个人把解压完成的文件夹改名为 ‘ueditor‘）

第三步.myeclipse新建Web Project，把ueditor文件夹拷贝到WebRoot下

第四步.把UEditor中自带的jar包复制到WebRoot->WEB-INF->lib文件夹下

第五步.在jsp中引入UEditor的js和css(说明：需要引入jquery，下载的包中没有，自己拷贝一个)

index.jsp 代码

<html>
<head>
<title>UEditor Demo</title>

<link href='ueditor/themes/default/css/umeditor.css' type="text/css" rel="stylesheet" >

<script type="text/javascript" src="ueditor/jquery.js"></script>
<script type="text/javascript" src="ueditor/umeditor.js"></script>
<script type="text/javascript" src="ueditor/umeditor.config.js"></script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
</head>

<body>
<textarea id="myEditor" style="width: 100%;height: 500px;"></textarea>
<script type="text/javascript">
//实例化UEditor
var ue = UM.getEditor('myEditor');
function getValue(){
var value = ue.getContent();
alert(value);
}
</script>
<button onclick="getValue()">获取值</button>
</body>
</html>

上传图片也实现了，保存路径在/ueditor/jsp/upload中。

demo源码：http://pan.baidu.com/s/1kTE3mAz

0 0