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, 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()의 인쇄 결 과 는 다음 과 같 습 니 다.

변 환 된 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"),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 게시 글 에서 첫 번 째 그림 을 미리 보기 그림 으로 가 져 오 는 방법
첫 번 째 그림 주소 가 져 오기
이 함 수 는 모듈 이나 전역 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 그림 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!