ajax获取kindeditor编辑器内容中的图片

来源：互联网发布：好看的演唱会知乎编辑：程序博客网时间：2024/05/28 16:09

kindeditor页面getimg.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ajax获取内容图像</title></head><body>  <table width="100%" class="fabu_table">            <tr>                <td align="right">标题图片：</td>                <td>                   <div id="img_div" style="display: none;">                    <select id="con_imgs">                        <option value="">-选择内容图片-</option>                    </select>                    </div>                    <input type="text" size="50" id="tpic" name="tpic"/> <a id="prev" href="" target="_blank">预览</a>                      <input type="button" value="本地上传" id="s1"/>                </td>            </tr>            <tr>                <td valign="top" style="text-align:right">内容：</td>                <td>                    <textarea id="editor" name="content" style="width:800px;height:400px;"></textarea>                </td>            </tr>                     <tr>                <td style="text-align:right"> </td>                <td>                    <input type="submit" value="确认提交"/>                      <input type="reset" value="重新填写"/>                 </td>            </tr></table></body></html><script type="text/javascript" src="/test/js/jquery.js"></script><script type="text/javascript" src="/test/kindeditor4.1.3/kindeditor.js"></script><script type="text/javascript">var editor;var options = {afterBlur:function(){   //同步kindeditor的值到textareathis.sync();get_imgs();     //改变editor内容时，内容图片列表发生变化},newlineTag:'<br/>'};KindEditor.ready(function(K){editor = K.create('#editor',options);});$(function(){get_imgs();     //初始化时，提取内容图片//select下拉框改变值时，把值传给标题文本框        $("#con_imgs").live('change',function(){            v = $(this).val();            $("#tpic").val(v);            $("#prev").attr('href',v);        })})//提取内容图片    function get_imgs(){        var content = $("#editor").val();        var val = $("#tpic").val();        $("#prev").attr('href',val);        $.ajax({            type: "post",             url: "/test/do.php",            data: {"content":content },            dataType: "json",            error: function() {                $("#con_imgs").empty();                $("#img_div").hide();            },            success: function(msg) {                $("#img_div").show();                $("#con_imgs").empty();                $("#con_imgs").append("<option value="+val+">-提取内容图片-</option>");                $.each(msg,function(i,item) {     //msg是二维对象，item是取一维对象                    if(item.path==val){                        var sel = "selected=''";                    } else {                        var sel = '';                    }                    $("<option "+sel+" value='" + item.path + "'>内容中第" + item.id + "张图片</option>").appendTo($("#con_imgs"));                });            }        });    }</script>

ajax提交后台处理页面do.php

<?php $content = $_POST['content'];$imgs = getImgs($content);foreach($imgs as $k=>$row){$arr['id'] = $k+1;$arr['path'] = $row;$tem[] = $arr;}echo json_encode($tem);//提取内容中的所有图片生成数组function getImgs($content,$order='ALL'){$pattern="/<img.*?src=[\'|\"](.*?(?:[\.gif|\.jpg]))[\'|\"].*?[\/]?>/";preg_match_all($pattern,$content,$match);if(isset($match[1])&&!empty($match[1])){if($order==='ALL'){return $match[1];}if(is_numeric($order)&&isset($match[1][$order])){return $match[1][$order];}}return '';}?>

不要忘记引入jquery.js 与kindeditor.js

0 0