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

最新推荐文章于 2021-03-18 06:54:32 发布

Jack007

最新推荐文章于 2021-03-18 06:54:32 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/wcxt2012/article/details/8899554

单独调用使用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上传功能，效果如下：