<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="renderer" content="webkit">
    <meta name="decorator" content="webpage"/>
    <title>百度编辑器完整DEMO</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" type="text/css"  
    href="${ctxStatic}/ueditor/third-party/webuploader/webuploader.css"> 
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/jquery/jquery-1.8.3.min.js?v2"></script>
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/third-party/webuploader/webuploader.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.all.js"> </script>
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.upload.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
    <!-- 来源： http://blog.csdn.net/moqiang02/article/details/25429159 -->
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td class="td_left"> 文章主图 </td>
            <td> <input type="button" id="uploadimg" value="上传图片" style="width: 153px;height: 30px;" /> </td>
            <td> <input type="button" id="uploadfile" value="上传附件" style="width: 153px;height: 30px;" /> </td>
            <td> <input type="button" id="uploadvideo" value="上传视频" style="width: 153px;height: 30px;" /> </td>
        </tr>
        <tr>
            <td> 文章主图 </td>
            <td style="padding: 7px; padding-left: 15px;">
                <img id="picture" alt="" src="http://localhost:8080/static/ueditor/image/20160814/1471142518937028512.png" />
                <input id="articlePicture" name="articlePicture" type="hidden" />
            </td>
        </tr>
    </table>
    <div id="editor" style="width:1024px;height:500px;display:none;"></div>
<div id="uploader">
        <div class="queueList">
            <div id="dndArea" class="placeholder">
                <div id="filePicker"></div>
                <p>或将照片拖到这里，单次最多可选300张</p>
            </div>
        </div>
        <div class="statusBar" style="display:none;">
            <div class="progress">
                <span class="text">0%</span>
                <span class="percentage"></span>
            </div>
            <div class="info"></div>
            <div class="btns">
                <div id="filePicker2"></div>
                <div class="uploadBtn">开始上传</div>
            </div>
        </div>
    </div>
<script type="text/javascript">
//这个是图片上传的，网上还有附件上传的
    (function($) {

        var uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择图片'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea',//拉拽区域div的id
            paste: '#uploader',//黏贴区域
            swf: '/common/plugin/webuploader/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: '/sys/uploadHeadPic/',//上传的URL
            // runtimeOrder: 'flash',
             accept: {
                 title: 'Images',
                 extensions: 'gif,jpg,jpeg,bmp,png,jar'
             },
            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });
        /** 附件函数
        uploader.on( 'uploadSuccess', function( type ) {
           alert(11000);
        });
        */
    });
    
</script>
</body>
</html>