An editor that supports insertion of expressions to implement code (simple ideas are very important)

Below is a list of expressions. For simplicity, I directly put the file name of the picture in Li, and the class attribute is used to store the corresponding marks.

Copy the codeThe code is as follows:

 
<ul > 
<li class="wx"></li> 
<li class="pz"></li> 
<li class="se"></li> 
</ul> 

Next, turn the li above into img

Copy the codeThe code is as follows:

 
var faceDir = "images/"; //Configure emoticon directory
var iframeDocument = null; 
var iframeWindow = null; 
var isIe = false; 
$.each($("#faceList>li"), function(){ //Show expression
var node = ("img"); 
 = $(this).attr("class"); 
 = faceDir+$(this).html(); 
 = ""; 
(node); 
}); 

Put an iframe to be used as an editor

Copy the codeThe code is as follows:

Get ifame first

Copy the codeThe code is as follows:

 
iframeWindow = ("Edit").contentWindow;iframeDocument = ("Edit").; ="On"; //Open iframe editing mode

.designMode="On"; This method is quite common. When I first started, I wanted to use textarea, but textarea cannot display pictures. Here, in the actual process, a difference from textarea is found. The iframe will not wrap the line by itself, so a body is added to the iframe and a word-wrap attribute is set.

Copy the codeThe code is as follows:

 
("<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>"); 

The following implementation is the process of inserting image expressions in an iframe (there are comments in the code)

Copy the codeThe code is as follows:

 
$("#faceList>li").click(function(){ 
var $this = $(this); 
var $thisImg = $(this).find("img:eq(0)"); //The current clicked expression (IMG mark)
("Edit").(); // Make the editing area focus
var r = null; 
if() //handle compatibility issues
{ 
//Put the expression into the iframe
r = (); 
(); 
($thisImg[0].()); 
} 
else if() 
{ 
r = ().getRangeAt(0); 
().removeAllRanges(); 
var node = ("img"); 
 = $("class"); 
 = $("src"); 
(node); 
} 
}); 

At this point, the process of inserting expressions is completed. One last thing: Translate img tag

Copy the codeThe code is as follows:

 
function GeteEditData() 
{ 
var edit = ("body")[0].innerHTML; 
//Copy a copy of the node in memory to preserve the document stream format
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 = $("."+$(this).attr("class").toString()); 
if(fs!=null&&fs[0]!=undefined) 
{ 
(mark); 
} 
}); 
} 

In fact, there are still many problems that have not been dealt with, and I only have only a few understandings. Posting the code hopes to help some friends solve the problem.