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

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的值到textarea
			this.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 原文链接：https://www.f2er.com/ajax/163654.html

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

猜你在找的Ajax相关文章