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

上面是我編輯器里的內容（content），最簡單的方法是用

$(content)來轉換成jquery對象，但是$(content).html()的打印結果

可以看出來轉換出的Jquery對象代表的是content中第一個html元素p，剩下的html元素獲取不到，也就無法進行第三步獲取圖片地址。

這里可以補充的是，網(wǎng)上提供的一種方法

$(content).get(0).outerHTML的打印結果如下：

get(1)、get(2)…依次可以打印出接下來的html元素代碼，我開始考慮循環(huán)獲取，但是循環(huán)次數(shù)的獲取回到了原地，根本取不到，有興趣的可以嘗試。

既然jquery的思路斷了，我就開始考慮原生js的方法，在網(wǎng)上找了個：

1

2var $div = document.createElement("div");//創(chuàng)建一個div元素對象$div.innerHTML = content;//往div里填充html

打印出來的結果非常好：

前面繞的彎兩行代碼就解決了，原生js真棒！

但是我還是習慣用jquery，又把它轉換成jquery了，方便下面的選擇器和循環(huán)

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里面第一張圖片作為縮略圖，怎么獲取，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發(fā)布文章獲取第一張圖片為縮略圖實現(xiàn)方法

正則匹配圖片地址獲取第一張圖片地址

此為函數(shù) 在模塊或是全局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);//使用函數(shù) 返回匹配地址 如果不為空則聲稱縮略圖
    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];//預覽
  }
 }
}

本文來自腳本之家，原文鏈接：https://www.jb51.net/article/181054.htm