이모 티 콘 삽입 을 지원 하 는 편집기 구현 코드(간단 한 아이디어 가 중요 합 니 다)

다음은 이모 티 콘 목록 입 니 다.제 가 직접 li 에 그림 을 넣 은 파일 이름 을 간단하게 하기 위해 class 속성 은 해당 하 는 표 시 를 저장 합 니 다

 
<ul id="faceList"> 
<li class="wx">0.gif</li> 
<li class="pz">1.gif</li> 
<li class="se">2.gif</li> 
</ul>

다음은 위의 li 를 img

 
var faceDir = "images/"; //       
var iframeDocument = null; 
var iframeWindow = null; 
var isIe = false; 
$.each($("#faceList>li"), function(){ //     
var node = document.createElement("img"); 
node.className = $(this).attr("class"); 
node.src = faceDir+$(this).html(); 
this.innerHTML = ""; 
this.appendChild(node); 
});

iframe 을 편집기 로 사용 합 니 다

 
<iframe id="Edit" frameborder="0"></iframe>

ifame

 
iframeWindow = document.getElementById("Edit").contentWindow;iframeDocument = document.getElementById("Edit").contentWindow.document; iframeDocument.designMode="On"; //  iframe

designMode="On"을 먼저 받 습 니 다.이 방법 은 그래도 매우 흔히 볼 수 있다.처음에는 textarea 를 사용 하려 고 했 지만 textarea 는 그림 을 표시 할 수 없 었 습 니 다.여기 서 실제 과정 에서 textarea 와 의 차 이 를 발 견 했 습 니 다.iframe 에 줄 을 바 꾸 지 않 기 때문에 iframe 에 body 를 추가 하여 word-wrap 속성 을 설정 하 였 습 니 다

 
iframeDocument.write("<html><body style=\"word-wrap:break-word;text-align: left; background-color: #fff; border:1px solid #CCC; margin:0px; padding:0px;overflow:hidden;\"></body></html>");

아래 에서 이 루어 졌 습 니 다.iframe 에 그림 표정 을 삽입 하 는 과정(코드 에 주석 이 있 습 니 다)

 
$("#faceList>li").click(function(){ 
var $this = $(this); 
var $thisImg = $(this).find("img:eq(0)"); //       （IMG  ） 
document.getElementById("Edit").contentWindow.focus(); //          
var r = null; 
if(document.selection) //        
{ 
//     iframe 
r = iframeDocument.selection.createRange(); 
iframeDocument.selection.empty(); 
r.pasteHTML($thisImg[0].parentNode.innerHTML.toString()); 
} 
else if(window.getSelection) 
{ 
r = iframeWindow.getSelection().getRangeAt(0); 
iframeWindow.getSelection().removeAllRanges(); 
var node = document.createElement("img"); 
node.className = $thisImg.attr("class"); 
node.src = $thisImg.attr("src"); 
r.surroundContents(node); 
} 
});

여기까지 표정 을 삽입 하 는 과정 을 마 쳤 습 니 다.그리고 마지막 일:img 표기

 
function GeteEditData() 
{ 
var edit = iframeDocument.getElementsByTagName("body")[0].innerHTML; 
//    Copy       ，         
var str = new String(edit); 
var $content = $("<div>"+str+"</div>"); 
var imgNode = $("#faceList img"); 
$.each(imgNode, function(){ 
var mark= "/:"+$(this).attr("class").toString(); 
var fs = $content.find("."+$(this).attr("class").toString()); 
if(fs!=null&&fs[0]!=undefined) 
{ 
fs.replaceWith(mark); 
} 
}); 
}

사실 아직 처리 하지 못 한 문제 가 많 습 니 다.저도 수박 겉 핥 기 입 니 다.코드 를 붙 여 친구 들 이 문 제 를 해결 하 는 데 도움 이 되 기 를 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

편집기 vue-quill-editor로 밟은 구덩이

vue+element-ui+vue-quill+editor를 결합하여 구성 요소로 2차 봉인 1. 사진 업로드 원인을 분석하다 프로젝트에서 vue-quill-editor 풍부한 텍스트 편집기를 사용합니다. 내용을 편집...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

이모 티 콘 삽입 을 지원 하 는 편집기 구현 코드(간단 한 아이디어 가 중요 합 니 다)

좋은 웹페이지 즐겨찾기