A Support Insert Expression Editor implementation code (simple idea is very important) _ Web page Editor

Here is a list of expressions, for simplicity I put the file name of the picture directly inside Li, and the class attribute is used to hold the corresponding tag

Copy Code code as follows:

<ul id= "Facelist" >
<li class= "WX" >0.gif</li>
<li class= "PZ" >1.gif</li>
<li class= "se" >2.gif</li>
</ul>

Then turn the top li into an img.

Copy Code code as follows:

var facedir = "images/"; Configure Expression Catalog
var iframedocument = null;
var iframewindow = null;
var Isie = false;
$.each ($ ("#faceList >li"), function () {//Show expression
var node = document.createelement ("img");
Node.classname = $ (this). attr ("class");
NODE.SRC = facedir+$ (this). html ();
this.innerhtml = "";
This.appendchild (node);
});

Put an IFRAME to make an editor

Copy Code code as follows:

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

Get Ifame first.

Copy Code code as follows:

Iframewindow = document.getElementById ("edit"). Contentwindow;iframedocument = document.getElementById ("edit"). Contentwindow.document; Iframedocument.designmode= "on"; Open IFRAME Edit mode

. designmode= "On"; This method is still quite common. You want to use textarea when you first do it, but textarea can't display the picture. Here in the actual process to find a difference with the textarea, the IFRAME will not change their own lines, so for the IFRAME added a body set a Word-wrap property

Copy Code code as follows:

Iframedocument.write ("

The following implementation, in the IFRAME inserts the picture expression the process (inside the code has the annotation)

Copy Code code as follows:

$ ("#faceList >li"). Click (function () {
var $this = $ (this);
var $thisImg = $ (this). Find ("Img:eq (0)"); The expression of the current click (img tag)
document.getElementById ("Edit"). Contentwindow.focus (); Get the editing area focused
var r = null;
if (document.selection)//Handling compatibility issues
{
Put the expression into the 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);
}
});

Here, we complete the process of inserting the expression. And one last thing: Translate the img tag

Copy Code code as follows:

function Geteeditdata ()
{
var edit = Iframedocument.getelementsbytagname ("Body") [0].innerhtml;
Copy one of the nodes in memory to preserve the document flow 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 = $content. Find ("." +$ (This). attr ("Class"). ToString ());
if (fs!=null&&fs[0]!=undefined)
{
Fs.replacewith (Mark);
}
});
}

In fact, there are many problems have not been dealt with, I was only a smattering. Post the code and hope to help some friends solve the problem.