富文本之图片上传到

<ol class="breadcrumb">
        <li class="active">发布公告</li>
    </ol>
    <form class="form-inline" action="#" method="get" style="margin-bottom: 10px" onsubmit="return false">
        {% csrf_token %}
        <div class="div1">
            <p>
                <div class="form-group">
                    <label for="id_mobile"><div class="div2">标题:</div></label>
                    <input type="text" class="form-control" id="title"  name="title" />
                </div>
            </p>

            <p>
                <div class="form-group">
                    <label for="id_mobile"><div class="div2">可见性</div></label>
                    <select name="notice_type" id="notice_type" class="form-control" style="min-width: 180px">
                        <option value="1" selected>全部</option>
                        <option value="2">商家</option>
                        <option value="3">用户</option>
                    </select>
                </div>
            </p>

            <p>
                <div class="form-group">
                    <label for="id_mobile"><div class="div2">发布时间</div></label>
                    <input type="datetime-local" class="form-control" id="plan_time"  name="plan_time" />
                </div>
            </p>
            <p>
                <div class="form-group">
                    <div id="editor">

                    </div>
                </div>
            </p>
            <div align="center"><button type="button" class="btn btn-primary" onclick="notice_submit()" >发布</button></div>
        </div>
    </form>

<script>
         $(function () {
            $("#nav_shop").addClass("active");
            $("#nav_notice_list").addClass("active");
        });
    </script>
    <script type="text/javascript" src="{{ STATIC_URL }}/js/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )

        editor.customConfig.menus = [  //自定义菜弟
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'video',  // 插入视频
                'undo',  // 撤销
                'redo'  // 重复
        ]

        // 是否过滤粘贴样式，默认true
        editor.customConfig.pasteFilterStyle = true
        // 是否忽略粘贴内容中的图片，默认false
        editor.customConfig.pasteIgnoreImg = false
        // 自定义处理粘贴的文本内容
        editor.customConfig.pasteTextHandle = function (content) {
            // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
            return content
        }
        //粘贴后的文本，可进行自定义操作，返回处理后的内容
        editor.customConfig.onchange = function (html) {
            // html 即变化之后的内容
            console.log(111,html)
        }

        {#editor.customConfig.zIndex = 100 //配置编辑区域的 z-index 默认是10000#}

        editor.customConfig.linkImgCallback = function (url) {
            console.log(222,url) // url 即插入图片的地址
        }

        editor.customConfig.linkCheck = function (text, link) {
            console.log(333,text) // 插入的文字
            console.log(444,link) // 插入的链接

            return true // 返回 true 表示校验成功
            // return '验证失败' // 返回字符串，即校验失败的提示信息
        }

        editor.customConfig.linkImgCheck = function (src) {
        console.log(src) // 图片的链接
        return true // 返回 true 表示校验成功
        // return '验证失败' // 返回字符串，即校验失败的提示信息
        }

        // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
        editor.customConfig.emotions = [
            {
                // tab 的标题
                title: '默认',
                // type -> 'emoji' / 'image'
                type: 'image',
                // content -> 数组
                content: [ {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
                    "alt" : "[呵呵]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
                    "alt" : "[嘻嘻]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
                    "alt" : "[哈哈]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
                    "alt" : "[可爱]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
                    "alt" : "[可怜]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
                    "alt" : "[挖鼻屎]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
                    "alt" : "[吃惊]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
                    "alt" : "[害羞]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
                    "alt" : "[挤眼]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
                    "alt" : "[闭嘴]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
                    "alt" : "[鄙视]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
                    "alt" : "[爱你]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
                    "alt" : "[泪]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
                    "alt" : "[偷笑]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
                    "alt" : "[亲亲]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
                    "alt" : "[生病]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
                    "alt" : "[太开心]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
                    "alt" : "[懒得理你]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
                    "alt" : "[右哼哼]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
                    "alt" : "[左哼哼]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
                    "alt" : "[嘘]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
                    "alt" : "[衰]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
                    "alt" : "[委屈]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
                    "alt" : "[吐]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
                    "alt" : "[打哈欠]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
                    "alt" : "[抱抱]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
                    "alt" : "[怒]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
                    "alt" : "[疑问]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
                    "alt" : "[馋嘴]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
                    "alt" : "[拜拜]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
                    "alt" : "[思考]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
                    "alt" : "[汗]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
                    "alt" : "[困]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
                    "alt" : "[睡觉]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
                    "alt" : "[钱]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
                    "alt" : "[失望]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
                    "alt" : "[酷]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
                    "alt" : "[花心]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
                    "alt" : "[哼]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
                    "alt" : "[鼓掌]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
                    "alt" : "[晕]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
                    "alt" : "[悲伤]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
                    "alt" : "[抓狂]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
                    "alt" : "[黑线]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
                    "alt" : "[阴险]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
                    "alt" : "[怒骂]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
                    "alt" : "[心]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
                    "alt" : "[伤心]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
                    "alt" : "[猪头]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
                    "alt" : "[ok]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
                    "alt" : "[耶]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
                    "alt" : "[good]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
                    "alt" : "[不要]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
                    "alt" : "[赞]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
                    "alt" : "[来]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
                    "alt" : "[弱]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
                    "alt" : "[蜡烛]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
                    "alt" : "[蛋糕]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d3/clock_thumb.gif",
                    "alt" : "[钟]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1b/m_thumb.gif",
                    "alt" : "[话筒]"
                },
                {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif",
                    "alt" : "[草泥马]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif",
                    "alt" : "[神马]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif",
                    "alt" : "[浮云]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif",
                    "alt" : "[给力]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif",
                    "alt" : "[围观]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif",
                    "alt" : "[威武]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif",
                    "alt" : "[熊猫]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif",
                    "alt" : "[兔子]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif",
                    "alt" : "[奥特曼]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
                    "alt" : "[囧]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
                    "alt" : "[互粉]"
                }, {
                    "src" : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif",
                    "alt" : "[礼物]"
                }
                ]
            },
            {#{#}
                // tab 的标题
            {#    title: 'emoji',#}
            {#    // type -> 'emoji' / 'image'#}
            {#    type: 'emoji',#}
            {#    // content -> 数组#}
            {#    content: ['😀', '😃', '😄', '😁', '😆']#}
            {# }#}
        ]

        // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
        {#editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片#}

        // 隐藏“网络图片”tab
        editor.customConfig.showLinkImg = false


        editor.customConfig.customUploadImg = function (files, insert) {
            var files_length = files.length;

            for (var i = 0; i < files_length; i++) {
                var file_data = files[i];
                // files 是 input 中选中的文件列表
                // insert 是获取图片 url 后，插入到编辑器的方法
                console.log(files)
                var MEDIA_URL = "{{ MEDIA_URL }}";
                var formData = new FormData();
                var policy = "{{ policy }}";
                var signature = "{{ signature }}";
                var upan_upload_url = "{{ upan_upload_url }}";
                formData.append("file", file_data);
                formData.append("policy", policy);
                formData.append("signature", signature);
                $.ajax({
                    url: upan_upload_url,
                    cache: false,
                    data: formData,
                    contentType: false,
                    processData: false,
                    type: 'post',
                    success: function (data) {
                        var result = JSON.parse(data);
                        console.log(result)
                        if (result.code == 200) {
                            console.log("上传又拍云成功")
                            url = MEDIA_URL + result.url
                            insert(url)
                        } else {
                            console.log("上传又拍云失败")
                            showMsg(result.msg);
                        }
                    },
                });
                // 上传代码返回结果之后，将图片插入到编辑器中
                {#insert(imgUrl)#}
            }
        }



        editor.create()
        editor.txt.html('<p>请输入公告内容</p>') //设置内容
        {#editor.txt.append('<p>追加的内容</p>')#}


        function notice_submit(){
            var notice_type = $("#notice_type").val();
            var title = $("#title").val();
            var plan_time = $("#plan_time").val();
            var content = editor.txt.html()
            console.log('进入ajax')
            console.log(content)
            if (title == '') {
                $(".tips_span").text('*主题不能为空').show();
            } else if (notice_type == '') {
                $(".tips_span").text('*可见性不能为空').show();
            } else if (content == '') {
                $(".tips_span").text('*内容不能为空').show();
            } else if (plan_time == '') {
                $(".tips_span").text('*发布时间不能为空').show();
            }else {
                $.ajax({
                    url:"/super_manage/notice_add/",
                    data:{
                        title: title,
                        notice_type:notice_type,
                        plan_time: plan_time,
                        content:content
                    },
                    type: "POST",
                    dataType: "json",
                    success: function (result) {
                        if(result['is_succ']){
                            alert("发布成功！");
                            window.location.href="/super_manage/notice_list/"
                        }else{
                            alert("发布失败！");
                        }
                    },error: function () {
                     showMsg('请求出错啦，可能是网络异常，请重试');
                }
                });
            }
            }
    </script>