laoma
/
admin_api


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor2 test</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/wangEditor.min.css">
    <style type="text/css">
        #editor-trigger {
            height: 300px;
            max-height: 500px;
        }
        .container {
            width: 100%;
            margin: 0 auto;
            position: relative;
        }
    </style>
</head>
<body style="padding:0 20px;">
    <p>wangEditor2.0 支持 IE8 浏览器</p>
    <div class="container">
        <div id="editor-trigger">
            <p>请输入内容...</p>
        </div>
    </div>
    
    <script type="text/javascript" src="../../dist/js/lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="lib/plupload/plupload.full.min.js"></script>
    <script type="text/javascript" src="../../dist/js/wangEditor.js"></script>
    <!--<script type="text/javascript" src="../../dist/js/wangEditor.min.js"></script>-->
    <script type="text/javascript">
        // 封装console.log
        function printLog(title, info) {
            window.console && console.log(title, info);
        }

        // 配置上传
        function uploadInit () {
            var editor = this;
            var btnId = editor.customUploadBtnId;
            var containerId = editor.customUploadContainerId;

            //实例化一个上传对象
            var uploader = new plupload.Uploader({
                browse_button: btnId,
                url: '/upload',
                flash_swf_url: 'lib/plupload/plupload/Moxie.swf',
                sliverlight_xap_url: 'lib/plupload/plupload/Moxie.xap',
                filters: {
                    mime_types: [
                        //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
                        { title: "图片文件", extensions: "jpg,gif,png,bmp" }
                    ]
                }
            });

            //存储所有图片的url地址
            var urls = [];

            //初始化
            uploader.init();

            //绑定文件添加到队列的事件
            uploader.bind('FilesAdded', function (uploader, files) {
                //显示添加进来的文件名
                $.each(files, function(key, value){
                    printLog('添加文件' + value.name);
                });

                // 文件添加之后，开始执行上传
                uploader.start();
            });

            //单个文件上传之后
            uploader.bind('FileUploaded', function (uploader, file, responseObject) {
                //注意，要从服务器返回图片的url地址，否则上传的图片无法显示在编辑器中
                var url = responseObject.response;
                //先将url地址存储来，待所有图片都上传完了，再统一处理
                urls.push(url);

                printLog('一个图片上传完成，返回的url是' + url);
            });

            //全部文件上传时候
            uploader.bind('UploadComplete', function (uploader, files) {
                printLog('所有图片上传完成');

                // 用 try catch 兼容IE低版本的异常情况
                try {
                    //打印出所有图片的url地址
                    $.each(urls, function (key, value) {
                        printLog('即将插入图片' + value);
                        
                        // 插入到编辑器中
                        editor.command(null, 'insertHtml', '<img src="' + value + '" style="max-width:100%;"/>');
                    });
                } catch (ex) {
                    // 此处可不写代码
                } finally {
                    //清空url数组
                    urls = [];

                    // 隐藏进度条
                    editor.hideUploadProgress();
                }
            });

            // 上传进度条
            uploader.bind('UploadProgress', function (uploader, file) {
                // 显示进度条
                editor.showUploadProgress(file.percent);
            });
        }

        // 创建编辑器
        var editor = new wangEditor('editor-trigger');
        editor.config.customUpload = true;  // 配置自定义上传
        editor.config.customUploadInit = uploadInit;  // 配置上传事件
        editor.create();
    </script>
</body>
</html>