zoukankan      html  css  js  c++  java
  • ueditor单独调用图片上传

    很多人在问ueditor,如何单独使用图片上传功能,但是网上没有一篇能用的文档,没办法,我刚好也需要这个功能,花了3天时间(本人水平太菜,哎)终于知道怎么处理了,发出来给大家共享:

    效果如下:

    页面效果:


    点击上传图片:


    上传图片,点确定:


    获得上传图片的路径,并赋值给input


    Ok,效果就这样。

    具体实现也非常简单:

    JS代码:注意放在页面的最下面,页面需要加载ueditor必备的2js,放在页面的头部:

    ueditor/editor_all_min.js
    ueditor/editor_config_big.js
    
    var myEditorImage;
    var d;
    function upImage() {    
        d = myEditorImage.getDialog("insertimage");
        d.render();
        d.open();
    }
    
    myEditorImage= new UE.ui.Editor();
    myEditorImage.render('myEditorImage');
    myEditorImage.ready(function(){
    	myEditorImage.setDisabled();
    	myEditorImage.hide();//隐藏UE框体
    	myEditorImage.addListener('beforeInsertImage',function(t, arg){
    		alert(arg[0].src);//arg就是上传图片的返回值,是个数组,如果上传多张图片,请遍历该值。
    		//把图片地址赋值给页面input,我这里使用了jquery,可以根据自己的写法赋值,到这里就很简单了,会js的都会写了。
    		$("#abccc").attr("value", arg[0].src);
    	});
    });


    调用的页面:

    <tr>
    	<th>上传图片</th>
    	<td>
    		<input type="text" id="abccc" />
    		<input type="button" id="myEditorImagesss" onclick="upImage();" value="上传图片"/>
    	</td>
    </tr>

    Ok,搞定,非常简单。



  • 相关阅读:
    ABAP接口用法
    监听textarea数值变化
    The first step in solving any problem is recognizing there is one.
    Wrinkles should merely indicate where smiles have been.
    God made relatives.Thank God we can choose our friends.
    Home is where your heart is
    ABAP跳转屏幕
    Python 工具包 werkzeug 初探
    atom通过remote ftp同步本地文件到远程主机的方法
    Mongodb学习笔记一
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061324.html
Copyright © 2011-2022 走看看