提取编辑中的图片生成缩略图

Posted 2020-09-25 晨曦年华

<img id="thumb_img" style="width:100px; height:100px; border:1px #ccc solid; margin-top: 15px" src="">
<input id="img" type="hidden" name="thumb_img" value="">

<span>
    <label>
         <input id="autolitpic" type="checkbox">
             提取第一个图片为缩略图
    </label>
     (
     <a class="qximg" href="javascript:;">[取消缩略图]</a>
     )
</span>
<label class="textarea"><textarea name="content" id="content" class="content" onblur="content_validate()"></textarea>
                                <input type="hidden" name="parse" value="0"> <script
                                    type="text/javascript">
                                    var editor_content1;
                                    KindEditor.ready(function(K) {
                                        editor_content1 = K.create(‘textarea[name="content"]‘, {
                                            allowFileManager : false,
                                            themesPath: K.basePath,
                                            width: ‘900px‘,
                                            height: ‘700px‘,
                                            resizeType: 1,
                                            pasteType : 2,
                                            urlType : ‘absolute‘,
                                            cssPath : ‘/statics/js/kindeditor/plugins/code/prettify.css‘,
                                            uploadJson : ‘{:U(‘ke_upimg‘)}‘,
                                            afterCreate : function() {
                                                this.sync();
                                                  },
                                            afterBlur:function(){
                                                 this.sync();
                                               }   
                                        });
                                        prettyPrint();
                                    });    
                                    </script>
                            </label>

//获取第一张图片
$(‘#autolitpic‘).click(function (){ 
    if($(this).attr(‘checked‘)){
        $(this).attr(‘checked‘,false);
    }else {
            var content=$(‘.content‘).val();
            if(content.match(/src="[^"]+"/g)==null){
               alert(‘文章内容没有图片‘);
               $(this).attr(‘checked‘,false);
             }else{
                 $(this).attr(‘checked‘,true);
                 set_thumb_img();
          }
    }
});

//取消缩略图
$(‘.qximg‘).click(function (){
    cancel_thumb_img();
});

//设置第一个图片为缩略图
function set_thumb_img() {
    var content=$(‘.content‘).val();
    var strcount=content.match(/src="[^"]+"/g)[0].replace("src=\"","");
    var val=strcount.substring(0,strcount.length-1).replace("http://cb2013.tdedu.org","");
    $("#thumb_img").attr(‘src‘,val); 
      $("#img").val(val);
}

//取消缩略图
function cancel_thumb_img() {
    $(‘#thumb_img‘).attr(‘src‘,‘‘); 
    $(‘#img‘).val(‘‘);
}