色彩时光 | 记录程序员世界的点点滴滴

tinyMCE 自定义图片上传功能开发


tinyMCE图片上传需要传到指定服务,如果想上传到自定义的地方则需自己动手。思路来自网络,存储服务采用的七牛存储


/*1、自定义file input*/
<input name="Filedata" id="Filedata" type="file" onchange="postData();"  style="width:0px;height:0;overflow:hidden">
<script type="text/javascript">
/*2、tinyMCE初始化*/
tinyMCE.init({
            language : 'zh_CN',
            menubar : false,
            mode : "textareas",
            selector:"#id_content",
            resize: "both",
            plugins: "image",
            file_browser_callback: function(field_name, url, type, win) {
                console.log(type);
                if(type=='image')
                {
                    $('#Filedata').val("");
                    $('#Filedata').click();
                };
            }
        });
/*3、采用ajaxFileUpload文件上传*/
function postData() {
            $.ajaxFileUpload
            (
                    {
                        url: '/uploadFile', //用于文件上传的服务器端请求地址
                        type: 'post',
                        secureuri: false, //一般设置为false
                        fileElementId: 'Filedata', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                        dataType: 'text', //返回值类型 一般设置为json
                        success: function (data, status)  //服务器成功响应处理函数
                        {
                            if(status=="success")
                            {
                                console.log($(".mce-textbox").eq(0));
                                $(".mce-textbox").eq(0).val(data);
                            }
                        },
                        error: function (data, status, e)//服务器响应失败处理函数
                        {
                            alert(e);
                        }
                    }
            )
</script>

注意:通过$(".mce-textbox").eq(0)定位input页面元素
ajaxfileupload在高版本jquery中报is not function的错误时,在ajaxfileupload中加入如下代码:
handleError: function( s, xhr, status, e )      {
        // If a local callback was specified, fire it
        if ( s.error ) {
            s.error.call( s.context || s, xhr, status, e );
        }

        // Fire the global callback
        if ( s.global ) {
            (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
        }
    }

ajaxfileupload.js下载可以在github上找到,我找了个demo:https://github.com/sinsery/ajaxfileupload_demo


您可能也对下面文章感兴趣:

Write a Comment


* Content (required) 10~500s

分类

热门标签

友情链接