js获取UEditor富文本编辑器中的图片地址

这个话题其实挺常见的——从UEditor富文本编辑器里抓取图片地址。简单来说，思路就三步：拿内容、转对象、找img。直接看代码更直观：

var content= UE.getEditor('details').getContent();//获取编辑器内容
var $div = document.createElement("div");//创建一个div元素对象
$div.innerHTML = content;//往div里填充html
var $v = $($div);//从dom对象转换成jquery对象
$.each($v.find("img"),function (v,i) {//选择器找到img元素，循环获取src值
console.log("src======"+i.src);
});

输出结果：

别看现在写得顺，当时也是踩了几个坑才绕明白。下面把整个摸索过程捋一遍，算是给后来人留个参考。

1.获取UEditor中的内容

这一步倒没什么悬念，直接调用编辑器提供的getContent()方法就行。

2.将获取到的字符串转换成jquery对象

问题出在这里。编辑器里的内容长这样：

夏季到了，持续高温就连大人都受不了，更别说孩子了。所以该不该给孩子穿袜子又成了宝妈心头的大事，一方面觉得应该给孩子穿，毕竟这个几个理由是拒绝不了的。
还有一部分宝妈意见不同，认为还是不穿袜子比较好：
1.小孩子经常出汗，新陈代谢比较快，袜子如果不透气的话，有可能会因为生脚汗导致孩子哭闹不休。
2.脚底的xue位多，不穿袜子可以充分按摩到脚底。有利于身体其他机能的运转。缓解便秘，消化不良等症状。
好像两方家长说的都有道理，那么到底应该穿袜子吗？

var content= UE.getEditor(‘details').getContent();

最直接的想法是用$(content)把它转成jquery对象。但问题来了——$(content).html()的打印结果是这样的：

看到没？转换出来的jquery对象只代表了content里的第一个p元素，后面的内容根本拿不到。这样一来，第三步找图片地址就无从谈起了。

网上有人提到用$(content).get(0).outerHTML，打印结果：

get(1)、get(2)倒是能依次拿到后面的元素。循环获取的思路自然冒了出来，但问题在于——循环次数的根本确定不了，这条路走不通。

既然jquery路线碰壁，那就看看原生js怎么解决。于是找到了这个方案：

var $div = document.createElement("div");//创建一个div元素对象
$div.innerHTML = content;//往div里填充html

输出结果出奇地规整：

绕了那么大一圈，两行原生代码就搞定了。不得不说，有时候原生js才是真正的老朋友。

不过毕竟习惯了jquery的操作方式，还是顺手转了一下：

var $v = $($div);//从dom对象转换成jquery对象

3.选择器找到img元素，获取src值

$.each($v.find("img"),function (v,i) {
console.log("src======"+i.src);
});

这里i.src直接拿到图片的url地址，完美收工。

下面为大家补充

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

很多场景下需要拿编辑器里第一张图片当缩略图。ueditor本身是以文本方式存储内容的，并没有直接提供提取图片的接口。

UE.getPlainTxt() 能获取纯文本内容，带段落格式；UE.getContentTxt() 也能获取纯文本，但不保留段落格式。

最稳妥的方式还是用UE.getContent()拿到全部内容，然后用正则表达式筛选图片。这里提供一个Ja va写的筛选方法，前端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)->sa ve($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(//);
  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];//预览
  }
 }