js如何获取UEditor富文本编辑器中的图片地址(2)-木庄网络博客

下面为大家补充

js如何获取ueditor里面的第一张图片

想获取ueditor里面第一张图片作为缩略图，怎么获取，ueditor里面全部是以文本方式储存的

UE.getPlainTxt() 可获取到编辑器中的纯文本内容，有段落格式
UE.getContentTxt() 可获取到编辑器中的纯文本内容，没有段落格式；

ueditor 没有提供直接获取图片的功能，可以UE.getContent() 获取全部内容，使用正则表达式筛选出图片，我提供一个使用JAVA写的筛选方法，前台js代码类似:

Pattern p_img = Pattern.compile("(]+src\s*=\s*'\"['\"][^>]*>)");
Matcher m_img = p_img.matcher(content);
while (m_img.find()) {
String img = m_img.group(1); //m_img.group(1) 为获得整个img标签 m_img.group(2) 为获得src的值
}

可以打开ueditor.all.min.js 查看，里面有所有支持的方法注释也都很明白

ueditor发布文章获取第一张图片为缩略图实现方法

正则匹配图片地址获取第一张图片地址
此为函数在模块或是全局Common文件夹中的function.php中

/**
 * [getPic description]
 * 获取文本中首张图片地址
 * @param [type] $content [description]
 * @return [type]     [description]
 */
 function getPic($content){
    if(preg_match_all("/(src)=([\"|']?)([^ \"'>]+\.(gif|jpg|jpeg|bmp|png))\\2/i", $content, $matches)) {
      $str=$matches[3][0];
    if (preg_match('/\/Uploads\/images/', $str)) {
      return $str1=substr($str,7);
    }
  }
}

用法演示

$content=I('post.body');//获取富文本编辑器内容
    $info=getPic($content);//使用函数 返回匹配地址 如果不为空则声称缩略图
    if(!$info==null){
      $thumb=$info.'thumb240x160.png';
      $image = new \Think\Image();//实例化图像处理，缩略图功能
      $image->open($info);// 生成一个居中裁剪为240*160的缩略图
      $unlink=$image->thumb(240, 160,\Think\Image::IMAGE_THUMB_CENTER)->save($thumb);
    }else{
      $thumb='';
    }

dedecms中的js获取fckeditor中的图片

function get_firstimg(){
 //var c=document.getElementById('body').value;
 var c=FCKeditorAPI.GetInstance('body').GetXHTML(true);
 if(c){
  var fimg=c.match(/<img(.*?) src=["|'](.*?)["|'](.*?)>/);
  if(fimg[2]){
  document.getElementById('picname').value=fimg[2];
  if(document.getElementById('ImgPr'))document.getElementById('ImgPr').src=fimg[2];//预览
  if(document.getElementById('picview'))document.getElementById('picview').src=fimg[2];//预览
  }
 }
}