js獲取UEditor富文字編輯器中的圖片地址
寫之前在網上找了很多方法,最簡單的思路應該是1.獲取UEditor中的內容;2.將獲取到的字串轉換成jquery物件;3.選擇器找到img元素,獲取src值。
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物件
<p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58,58,58); font-family: 微軟雅黑,宋體,Verdana,Arial,Helvetica,sans-serif; font-size: 14px; background-color: rgb(247,253,255);"> 夏季到了,持續高溫就連大人都受不了,更別說孩子了。所以該不該給孩子穿襪子又成了寶媽心頭的大事,一方面覺得應該給孩子穿,畢竟這個幾個理由是拒絕不了的。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58,255); text-align: center;"> <img alt="1.jpg" width="490" height="306" src="http://www.socksb2b.com/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded031de9.jpg" _src="http://www.socksb2b.com/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded031de9.jpg"> </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58,255);"> 還有一部分寶媽意見不同,認為還是不穿襪子比較好: </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58,255);"> 1.小孩子經常出汗,新陳代謝比較快,襪子如果不透氣的話,有可能會因為生腳汗導致孩子哭鬧不休。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58,255);"> 2.腳底的穴位多,不穿襪子可以充分按摩到腳底。有利於身體其他機能的運轉。緩解便祕,消化不良等症狀。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58,255);"> 好像兩方家長說的都有道理,那麼到底應該穿襪子嗎? </p>
var content= UE.getEditor(‘details').getContent();
上面是我編輯器裡的內容(content),最簡單的方法是用
$(content)來轉換成jquery物件,但是$(content).html()的列印結果如下:
可以看出來轉換出的Jquery物件代表的是content中第一個html元素p,剩下的html元素獲取不到,也就無法進行第三步獲取圖片地址。
這裡可以補充的是,網上提供的一種方法
$(content).get(0).outerHTML的列印結果如下:
get(1)、get(2)…依次可以打印出接下來的html元素程式碼,我開始考慮迴圈獲取,但是迴圈次數的獲取回到了原地,根本取不到,有興趣的可以嘗試。
既然jquery的思路斷了,我就開始考慮原生js的方法,在網上找了個:
var $div = document.createElement("div");//建立一個div元素物件 $div.innerHTML = content;//往div裡填充html
打印出來的結果非常好:
前面繞的彎兩行程式碼就解決了,原生js真棒!
但是我還是習慣用jquery,又把它轉換成jquery了,方便下面的選擇器和迴圈
var $v = $($div);//從dom物件轉換成jquery物件
3.選擇器找到img元素,獲取src值
$.each($v.find("img"),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釋出文章獲取第一張圖片為縮圖實現方法
正則匹配圖片地址獲取第一張圖片地址
此為函式 在模組或是全域性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];//預覽 } } }
以上就是js獲取UEditor富文字編輯器中的圖片地址的詳細內容,更多關於UEditor圖片的資料請關注我們其它相關文章!