hjr-JavaScript：上传控件webuploader与富文本编辑器umeditor

#开始
关于上传的资源，最好是单独写个模块，或者是使用第三方云服务存储，或者是自己买服务器存储，测试环境和正式环境共用一套资源链接，下载相关压缩包，直接用umeditor和webuploader命名两个文件夹并直接把两种插件全部解压后整个都放到资源文件夹中，如laravel的public文件夹，为了省麻烦最好直接全放进去。
#注意

• 这些控件写上name属性就可以直接放到表单中当做input框来用
• 富文本直接把他当做input框就行，直接把文本存到数据库，读取时把内容插到div中就能看到自带格式的效果，上传的图片之类的都会自动生成路劲到服务器并自动引用。
• 上传文件一般是把路径存到服务器，然后自己写提交地址对应的处理文件，文件名一般用当前时间+随机字符串，并写程序接收和把文件存到自定义位置，与前面的数据库存储路径要一致。
  #webuploader
  ##引用

 {{--引入上传插件--}}
    <link rel="stylesheet" href="{{ URL::asset('/webuploader/webuploader.css') }}">
    <script type="text/javascript" src="{{URL::asset('/webuploader/webuploader.js')}}"></script>

##初始化

<script>
    $(function(){
        <!-- 实例化上传控件代码 -->
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '{{URL::asset('/webuploader/Uploader.swf')}}',
            // 文件接收服务端。
            server: '{{ url('upload') }}',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*',
                multiple: false
            }, formData: {
                '_token': "{{ csrf_token() }}"
            }
        });

        //展示图片列表的jquery对象
        var $list = $("#fileList");
        //缩略图大小
        var thumbnailWidth = 100;
        var thumbnailHeight = 100;
        var uploadNum;
//    上传相关
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                ),
                $img = $li.find('img');

            // $list为容器jQuery实例
            if (!$list.is(":empty")) {
                $list.empty();
            }
            $list.append($li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li)
                    .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, request) {
            $('#' + file.id).append("<div class='error'>上传成功</div>");
            $('#' + file.id).addClass('upload-state-done');
//            console.log(request['_raw'])
            $("#img_src").val(request['_raw']);
        });
        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });
    });
</script>

##html

   <div id="uploader_add">
      <!--用来存放item-->
       <div id="fileList" class="uploader-list"></div>
       <div id="filePicker">选择图片</div>
       <input readonly="true" datatype="*" errormsg="请选择图片" id="img_src" name="ban_img" value=""/>
       <span  class="Validform_checktip"></span>
   </div>

#umeditor

##引用

{{--引入百度编辑器--}}

    <link rel="stylesheet" href="{{ URL::asset('/umeditor/themes/default/css/umeditor.css') }}">
    <script type="text/javascript" src="{{URL::asset('/umeditor/third-party/template.min.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('/umeditor/umeditor.config.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('/umeditor/umeditor.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('/umeditor/lang/zh-cn/zh-cn.js')}}"></script>

##初始化

<script>
    $(function(){
        <!-- 实例化编辑器代码 -->
        um = UM.getEditor('myEditor');
    });
</script>

##html

  <h3>xxx</h3>
   {{--编辑器--}}
  <script name="ban_desc" type="text/plain" id="myEditor" style="width:500px;height:300px;">
 </script>

附录
[]表示数组，
{}表示对象；一般在JSON中使用；

var arr = new Array();
在js中其实可以等价于var arr = [];

var row1 = {};
row1.id= “1”;
row1.name = “xxx”;
或者
var row2 = {id:‘2’,name:‘abc’}

var json = [];
json.push(row1);
json.push(row2);