站長資訊網
        最全最豐富的資訊網站

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

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

        【相關學習推薦:javascript視頻教程】

        寫之前在網上找了很多方法,最簡單的思路應該是1.獲取UEditor中的內容;2.將獲取到的字符串轉換成jquery對象;3.選擇器找到img元素,獲取src值。

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

        打印結果:

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

        寫出上面代碼之前碰了幾次壁,繞了幾個彎,下面就是我整個開發過程,記錄下。

        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, 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);"> 	還有一部分寶媽意見不同,認為還是不穿襪子比較好: 	</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.小孩子經常出汗,新陳代謝比較快,襪子如果不透氣的話,有可能會因為生腳汗導致孩子哭鬧不休。 	</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.腳底的穴位多,不穿襪子可以充分按摩到腳底。有利于身體其他機能的運轉。緩解便秘,消化不良等癥狀。 	</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);"> 	好像兩方家長說的都有道理,那么到底應該穿襪子嗎? 	</p>

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

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

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

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

        可以看出來轉換出的Jquery對象代表的是content中第一個html元素p,剩下的html元素獲取不到,也就無法進行第三步獲取圖片地址。
        這里可以補充的是,網上提供的一種方法

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

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

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

        既然jquery的思路斷了,我就開始考慮原生js的方法,在網上找了個:

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

        打印出來的結果非常好:

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

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

        var $v = $($p);//從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("(]+srcs*=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 ThinkImage();//實例化圖像處理,縮略圖功能       $image->open($info);// 生成一個居中裁剪為240*160的縮略圖       $unlink=$image->thumb(240, 160,ThinkImage::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];//預覽   }  } }

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品视频一区二区三区| 一区二区三区精品国产欧美| 久久久久四虎国产精品| 日韩在线精品一二三区| 91久久精品无码一区二区毛片| 久久99国产综合精品女同| 久久久久久一区国产精品| 欧洲精品视频在线观看| 97精品伊人久久大香线蕉app| 亚洲国产精品成人精品无码区在线 | 精品国产欧美一区二区三区成人| 99RE6热在线精品视频观看| 亚洲爆乳精品无码一区二区| 国产精品亚洲玖玖玖在线观看 | 四虎成人精品免费影院| 国产精品第12页| 久久精品天天中文字幕人妻| 亚洲高清国产拍精品青青草原| 精品国产香蕉伊思人在线在线亚洲一区二区 | 青青草原精品国产亚洲av| 中日精品无码一本二本三本| 久久综合精品国产一区二区三区| 精品久久久无码中文字幕天天| 国产精品制服丝袜亚洲欧美| 国产乱码精品一区二区三| 国产精品青草视频免费播放 | 国内精品久久久久影院日本| 久久丫精品国产亚洲av不卡| 亚洲AV无码久久精品色欲| 亚洲午夜精品久久久久久app | 日本精品一区二区三区在线视频一| 免费精品久久久久久中文字幕| 久久精品国产一区二区电影| 精品精品国产国产| 精品欧美激情在线看| 精品无码人妻久久久久久| 久久夜色撩人精品国产小说| 欧美日韩精品一区二区视频 | 人人妻人人澡人人爽精品日本| 久久亚洲欧美国产精品| 国产精品白丝AV网站|