zoukankan      html  css  js  c++  java
  • 提取编辑中的图片生成缩略图

    
    
    
    

    <img id="thumb_img" style="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, '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('');
    }
  • 相关阅读:
    两条斜线
    Cantor表
    城市网络
    一起来数二叉树吧
    牛客网音乐研究(枚举)
    删括号
    合并回文子串
    寻找道路
    EXTJS 4.0.2 XML数据
    extjs4.0.2a gridpanel看不到横向滚动条的一种原因
  • 原文地址:https://www.cnblogs.com/chenchenphp/p/7081126.html
Copyright © 2011-2022 走看看