您的位置：首页 > 产品设计 > UI/UE

单独调用使用ueditor上传控件配置方法:

2013-05-08 11:52 453 查看

单独调用使用ueditor上传控件配置方法如下：

一、首先，下载uedtior最新版本，我使用的是jsp版本，对于单独使用它的上传图片功能，么有版本区别；

二、将uedtior放在你的项目根目录下；

三、引入ueditor类库,在要使用上传控件的页面进行配置，详细如下：

<html>
<head><title>ueditor上传图片控件<title>
<script type="text/javascript" charset="utf-8" src="ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" type="text/css" href="ueditor/themes/default/css/ueditor.css"/>
</head>
<body>
<from action="" type="" method="post" enctype="multipart/form-data">
<input name="image" type="button" value="浏览..." onclick="upImageLogo()"><br/>
<script type="text/javascript">

//Logo
var myEditorImagetLogo;
var dialogtLogo;
function upImageLogo() {
dialogtLogo = myEditorImagetLogo.getDialog("insertimage");
dialogtLogo.render();
dialogtLogo.open();   //打开dialog
}
var myEditorImagetLogo = new UE.ui.Editor();

myEditorImagetLogo.render('myEditorImageThumb');
myEditorImagetLogo.ready(function () {
myEditorImagetLogo.setDisabled();
myEditorImagetLogo.hide(); //隐藏UE框体
myEditorImagetLogo.addListener('beforeInsertImage', function (t, arg) {
for (var i = 0; i < arg.length; i++) {
document.getElementById("txtLogo").value = arg[i].src;//返回第一个图片到文本框中
break;
}
});
});
</script>
<input type="submit" value="提交" />
</form>
</body>
</html>

------以上简单几步即可配置出单独的uedtior上传功能，效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ueditor上传图片 web上传图片

相关文章推荐

新的分享

章节导航