主頁(yè) > 知識(shí)庫(kù) > js獲取UEditor富文本編輯器中的圖片地址

js獲取UEditor富文本編輯器中的圖片地址

熱門(mén)標(biāo)簽:興化400電話(huà)辦理多少錢(qián) 智能電銷(xiāo)機(jī)器人真的好嗎 株洲外呼營(yíng)銷(xiāo)系統(tǒng)有哪些 四平電話(huà)機(jī)器人哪家好 企業(yè)電話(huà)機(jī)器人辦理 長(zhǎng)春銷(xiāo)售外呼系統(tǒng)業(yè)務(wù) 天津電銷(xiāo)卡外呼系統(tǒng)線(xiàn)路 長(zhǎng)春防封卡電銷(xiāo)卡套餐 靈聲智能電話(huà)機(jī)器人招聘

寫(xiě)之前在網(wǎng)上找了很多方法,最簡(jiǎn)單的思路應(yīng)該是1.獲取UEditor中的內(nèi)容;2.將獲取到的字符串轉(zhuǎn)換成jquery對(duì)象;3.選擇器找到img元素,獲取src值。

var content= UE.getEditor('details').getContent();//獲取編輯器內(nèi)容
var $div = document.createElement("div");//創(chuàng)建一個(gè)div元素對(duì)象
$div.innerHTML = content;//往div里填充html
var $v = $($div);//從dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
$.each($v.find("img"),function (v,i) {//選擇器找到img元素,循環(huán)獲取src值
console.log("src======"+i.src);
});

打印結(jié)果:

寫(xiě)出上面代碼之前碰了幾次壁,繞了幾個(gè)彎,下面就是我整個(gè)開(kāi)發(fā)過(guò)程,記錄下。

1.獲取UEditor中的內(nèi)容

這一步很簡(jiǎn)單,使用編輯器提供的getContent()函數(shù)

2.將獲取到的字符串轉(zhuǎn)換成jquery對(duì)象

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);">
	夏季到了,持續(xù)高溫就連大人都受不了,更別說(shuō)孩子了。所以該不該給孩子穿襪子又成了寶媽心頭的大事,一方面覺(jué)得應(yīng)該給孩子穿,畢竟這個(gè)幾個(gè)理由是拒絕不了的。
	/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, 58, 58); font-family: 微軟雅黑, 宋體, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 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, 58, 58); font-family: 微軟雅黑, 宋體, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);">
	還有一部分寶媽意見(jiàn)不同,認(rèn)為還是不穿襪子比較好:
	/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, 58, 58); font-family: 微軟雅黑, 宋體, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);">
	1.小孩子經(jīng)常出汗,新陳代謝比較快,襪子如果不透氣的話(huà),有可能會(huì)因?yàn)樯_汗導(dǎo)致孩子哭鬧不休。
	/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, 58, 58); font-family: 微軟雅黑, 宋體, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);">
	2.腳底的穴位多,不穿襪子可以充分按摩到腳底。有利于身體其他機(jī)能的運(yùn)轉(zhuǎn)。緩解便秘,消化不良等癥狀。
	/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, 58, 58); font-family: 微軟雅黑, 宋體, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);">
	好像兩方家長(zhǎng)說(shuō)的都有道理,那么到底應(yīng)該穿襪子嗎?
	/p>

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

上面是我編輯器里的內(nèi)容(content),最簡(jiǎn)單的方法是用

$(content)來(lái)轉(zhuǎn)換成jquery對(duì)象,但是$(content).html()的打印結(jié)果如下:

可以看出來(lái)轉(zhuǎn)換出的Jquery對(duì)象代表的是content中第一個(gè)html元素p,剩下的html元素獲取不到,也就無(wú)法進(jìn)行第三步獲取圖片地址。
這里可以補(bǔ)充的是,網(wǎng)上提供的一種方法

$(content).get(0).outerHTML的打印結(jié)果如下:

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

既然jquery的思路斷了,我就開(kāi)始考慮原生js的方法,在網(wǎng)上找了個(gè):

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

打印出來(lái)的結(jié)果非常好:

前面繞的彎兩行代碼就解決了,原生js真棒!
但是我還是習(xí)慣用jquery,又把它轉(zhuǎn)換成jquery了,方便下面的選擇器和循環(huán)

var $v = $($div);//從dom對(duì)象轉(zhuǎn)換成jquery對(duì)象

3.選擇器找到img元素,獲取src值

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

i.src可以直接獲取圖片url地址,成功!

下面為大家補(bǔ)充

js如何獲取ueditor里面的第一張圖片

想獲取ueditor里面第一張圖片作為縮略圖,怎么獲取,ueditor里面全部是以文本方式儲(chǔ)存的

UE.getPlainTxt() 可獲取到編輯器中的純文本內(nèi)容,有段落格式
UE.getContentTxt() 可獲取到編輯器中的純文本內(nèi)容,沒(méi)有段落格式;

ueditor 沒(méi)有提供直接獲取圖片的功能,可以UE.getContent() 獲取全部?jī)?nèi)容,使用正則表達(dá)式 篩選出圖片,我提供一個(gè)使用JAVA寫(xiě)的篩選方法,前臺(tái)js代碼類(lèi)似:

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) 為獲得整個(gè)img標(biāo)簽 m_img.group(2) 為獲得src的值
}

可以打開(kāi)ueditor.all.min.js 查看,里面有所有支持的方法 注釋也都很明白

ueditor發(fā)布文章獲取第一張圖片為縮略圖實(shí)現(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');//獲取富文本編輯器內(nèi)容
    $info=getPic($content);//使用函數(shù) 返回匹配地址 如果不為空則聲稱(chēng)縮略圖
    if(!$info==null){
      $thumb=$info.'thumb240x160.png';
      $image = new \Think\Image();//實(shí)例化圖像處理,縮略圖功能
      $image->open($info);// 生成一個(gè)居中裁剪為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];//預(yù)覽
  if(document.getElementById('picview'))document.getElementById('picview').src=fimg[2];//預(yù)覽
  }
 }
}

以上就是js獲取UEditor富文本編輯器中的圖片地址的詳細(xì)內(nèi)容,更多關(guān)于UEditor圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

您可能感興趣的文章:
  • 指定區(qū)域的圖片自動(dòng)按比例縮小的js代碼(防止頁(yè)面被圖片撐破)
  • 指定位置如果有圖片顯示圖片,無(wú)圖片顯示廣告的JS
  • javascript 指定區(qū)域內(nèi)圖片等比例縮放實(shí)現(xiàn)代碼 腳本之家整合版
  • js獲取富文本中的第一張圖片(正則表達(dá)式)
  • JS+HTML實(shí)現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析
  • 原生js實(shí)現(xiàn)點(diǎn)擊輪播切換圖片
  • 使用PreloadJS加載圖片資源的基礎(chǔ)方法詳解
  • Javascript如何實(shí)現(xiàn)雙指控制圖片功能

標(biāo)簽:黑龍江 漯河 青海 貴港 石嘴山 新疆 巴彥淖爾 運(yùn)城

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《js獲取UEditor富文本編輯器中的圖片地址》,本文關(guān)鍵詞  獲取,UEditor,富,文本,編輯器,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《js獲取UEditor富文本編輯器中的圖片地址》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于js獲取UEditor富文本編輯器中的圖片地址的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章