wangEditor上传图片（使用 base64 保存图片）

HTML：

[html]view plain copy
<form  class="form form-horizontal" id="form-member-add" method="post" enctype="multipart/form-data">  
    <input type="hidden"  value="${id }"  id="id" name="id" >  
        <div class="row cl" style="margin: 20px;">  
            <span class="c-red">*</span>标题：  
                <input type="text" class="input-text radius"   id="title" name="title" >  
        </div>  
        <div class="row cl" style="margin: 20px;">  
            <span class="c-red">*</span>内容：  
            <div id="edit">  
            </div>  
        </div>  
        <div class="row cl">  
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">  
                 <input class="btn btn-primary radius" type="button" value="  提交  " onclick="subm(${type})" style="margin-left: 170px">   
            </div>  
        </div>  
    </form>  

JS：

[javascript]view plain copy
<script type="text/javascript">  
  
 function subm(type){  
  
        var id=document.getElementById('id').value;  
        var title = document.getElementById('title').value;  
        var content = editor.txt.html();  
        if(title==""||content==""){  
            layer.msg('请把内容填写完整！',{icon:2,time:1000});  
            return false;  
        }  
          
         $.ajax({  
            type : "post",  
            url : "newsAddPage.action",  
            data : {  
                "id":id,  
                "title" : title,  
                "content" : content,  
                "type":type  
            },  
            success : function(result) {  
                layer.msg('添加成功!',{icon:1,time:1000});  
            },  
            error : function(data) {  
                $.Huimodalalert('修改失败！', 2000);  
            }  
        });    
    }   
  
      
      
</script>   
<script type="text/javascript">  
    var E = window.wangEditor  
    var editor = new E('#edit')  
      
       editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片  
         
        
          
    // 隐藏“网络图片”tab  
    editor.customConfig.showLinkImg = false  
    editor.customConfig.menus = [  
    'head',  // 标题  
    'bold',  // 粗体  
    'italic',  // 斜体  
    'underline',  // 下划线  
    'foreColor',  // 文字颜色  
    'backColor',  // 背景颜色  
    'list',  // 列表  
    'justify',  // 对齐方式  
    'quote',  // 引用  
    'image',  // 插入图片  
    'table',  // 表格  
    'undo',  // 撤销  
    'redo'  // 重复  
    ]  
    editor.create()  
</script>  

图片被转化为BASE64格式保存在了content里，在Controller中接收即可

图片保存在数据库中的格式为

[html]view plain copy
<p><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAMDBBADASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAfUMq59Wxw6kSoZWT1QqlGtZMtSgmqMDoDneqlTJKMwp5I3eFGqGZ59Icx0IxW2a1eLkqBW3UQnQc+4qoTOdwwjeVwOoOU3RjrIamAlxKBsthbzJiauszSSVWasVpNChqhU4k2MROiYa3ndxFkghU3MpsRquc3KNpjU6GbtBFoNJJazcFJJWt0mbtCBJTzYJ0ZGzXBb5pNotI1SZTtkvQ5KsmoFcjalNTNVqZI1eQbEBYiCakCWaEybVhoNyipKM8+mV53uGD0kEpjR5VVqXDJolaBlTDQyk3nJG751X…………" style="max-width:100%;"><br></p>  

若要在html中显示出来，直接将这个值传到前端，即可显示

wangEditor上传图片（使用 base64 保存图片 ）

猜你喜欢

wangEditor上传图片（使用 base64 保存图片）