zoukankan      html  css  js  c++  java
  • 《 mysiteforme 》 学习之wangEditor的使用

    编辑器的使用

    <td>个人简介</td>
    <td><div id="content">

     引入js

    <script type="text/javascript" src="${base}/static/js/wangEditor.min.js"></script>
     var content_editor = new E('#content');
            //图片上传
            content_editor.customConfig.uploadImgServer = '${base}/file/uploadWang';
            content_editor.customConfig.uploadFileName = 'test';
            // 自定义处理粘贴的文本内容(这里处理图片抓取)
            content_editor.customConfig.pasteTextHandle = function (content) {
                if(undefined === content){
                    return content;
                }
                if(content.indexOf("src=")<=0){
                    return content;
                }
                var loadContent = layer.load(2, {
                    shade: [0.3, '#333']
                });
                $.ajax({
                    url: "${base}/file/doContent/",
                    type: "POST",
                    async: false,
                    data:{"content":content},
                    dataType: "json",
                    success:function(res){
                        layer.close(loadContent);
                        content = res.data;
                    }
                });
                return content;
            };
            // 关闭粘贴样式的过滤
            content_editor.customConfig.pasteFilterStyle = false;
            content_editor.customConfig.customAlert = function (info) {
                // info 是需要提示的内容
                layer.msg(info);
            };
            content_editor.create();
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1',
                url: '${base}/file/upload',
                accept:'images',
                exts:'ico',
                field:'test',
                before: function(obj){
                    //预读本地文件示例,不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接(base64)
                    });
                },
                done: function(res){
                    //如果上传失败
                    if(res.success === false){
                        return layer.msg('上传失败');
                    }
                    $("#logo").val(res.data.url);
                },
                error: function(){
                    //演示失败状态,并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
    
            upload.render({
                elem: '#test2',
                url: '${base}/file/upload/',
                field: 'test',
                before: function (obj) {
                    //预读本地文件示例,不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#userFace').attr('src', result); //图片链接(base64)
                    });
                    layer.load(2, {
                        shade: [0.3, '#333']
                    });
                },
                done: function (res) {
                    layer.closeAll('loading');
                    //如果上传失败
                    if (res.success === false) {
                        return layer.msg('上传失败');
                    }else{
                        layer.msg("上传成功",{time:1000},function () {
                            $("input[name='authorIcon']").val(res.data.url);
                        })
                    }
                }
            });
  • 相关阅读:
    vue 中简单路由的实现
    Vue中对生命周期的理解
    内存泄漏
    前端工程化
    exports 和 module.exports 的区别
    Nodejs的url模块方法
    MongoDB 的获取和安装
    Anjular JS 的一些运用
    移动端vconsole调试
    安装fiddler时,电脑浏览器没网
  • 原文地址:https://www.cnblogs.com/lyon91/p/9008479.html
Copyright © 2011-2022 走看看