How to say, just wrap up the night bar, should be very tired, but still have the strength to beat these characters, it seems I have not so far.
Less nonsense, recently wrote an online editor, similar to Ewebeditor, of course, no one is so powerful, but the basic functions are, but also compatible with IE and FF, so I also spent a lot of kung fu, or hurriedly put the code to come out
demo.html：
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<body>
<script src= "Core.js" ></script>
<script src= "Advance.js" ></script>
<table border= "0" width= "height=" bgcolor= "Gray" >
<tr height= "><td>"
Font: <select onchange= "FontName (this.options[this.selectedindex].value)" >
<option value= "Song Body" > Song Dynasty
<option value= "Bold" > Bold
<option value= "italics _gb2312" > italics
<option value= "Imitation _gb2312" > Imitation
<option value= "Official script" > official script
<option value= "Young Circle" > Young Circle
<option value= "new song Body" > New Song Dynasty
<option value= "Fine-ming Body" > Fine-ming body
<option value= "Arial" >arial
<option value= ' Arial black ' >arial black
<option value= "Arial narrow" >arial narrow
<option value= "Bradley Hand itc" >bradley Hand ITC
<option value= "Brush script mt" >brush script MT
<option value= "Century Gothic" >century Gothic
<option value= "comic Sans ms" >comic Sans ms
<option value= "Courier" >courier
<option value= "Courier new" >courier New
<option value= "MS Sans Serif" >ms Sans
<option value= "Script" >script
<option value= "System" >system
<option value= "Times New Roman" >times New Roman
<option value= "Viner Hand itc" >viner Hand ITC
<option value= "Verdana" >verdana
<option value= "Wide latin" >wide Latin
<option value= "Wingdings" >Wingdings</option>
</select>
Font size: <select onchange= "FontSize (this.options[this.selectedindex].value)" >
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
<option value= "4" >4</option>
<option value= "5" >5</option>
<option value= "6" >6</option>
<option value= "7" >7</option>
</select>
<button onclick= "color ()" > Color </button>
<button onclick= "Bold ()" > Bold </button>
<button onclick= "italic ()" > Tilt </button>
<button onclick= "Left ()" > Home </button>
<button onclick= "center ()" > Center </button>
<button onclick= "right ()" > Home </button>
</td></tr>
<tr height= "><td>"
<button> Insert videos and pictures </button>
<button> Upload file </button>
<button onclick= "inserttable ()" > Insert Table </button>
<button onclick= "Inserthr ()" > Insert horizontal line </button>
<button onclick= "Insertlink ()" > Insert Hyperlink </button>
</td></tr>
<tr height= ">"
<TD height= ">"
<iframe id= "Content" width= "100%" height= "100%" ></iframe>
</td>
</tr>
</table>
<script src= "Edit.js" ></script>
</body>
Core.js：
Copy Code code as follows:
sx={};
sx.comm={};
Sx.comm.string=function () {
if (! String.prototype.left) {
String.prototype.left=function (l) {
Return This.substr (0,l);
}
}
if (! String.prototype.right) {
String.prototype.right=function (l) {
Return This.substr (this.length-l,l);
}
}
if (! String.prototype.trim) {
String.prototype.trim=function () {
Return This.replace (/^/s+|/s+$/g, "");
}
}
}();
Sx.comm.array=function () {
if (! ARRAY.PROTOTYPE.INDEXOF) {
Array.prototype.indexof=function (data) {
for (Var i=0;i<this.length;i++) {
if (this[i]==data) {
Break
}
}
return i==this.length?-1:i;
}
}
if (! ARRAY.PROTOTYPE.LASTINDEXOF) {
Array.prototype.lastindexof=function (data) {
for (Var i=this.length-1;i>=0;i--) {
if (this[i]==data) {
Break
}
}
return i;
}
}
if (! Array.prototype.clone) {
Array.prototype.clone=function () {
var temp=[];
for (Var i=0;i<this.length;i++) {
if (This[i] instanceof Array) {
Temp[i]=this[i].clone ();
}else{
Temp[i]=this[i];
}
}
return temp;
}
}
if (! Array.prototype.every) {
Array.prototype.every=function (o,f) {
for (var i = 0; i < this.length; i++) {
if (This[i] instanceof Array) {
This[i].every (O,F);
}
else {
F.call (o, this[i]);
}
}
}
}
}();
Sx.comm.ver=function () {
try{
HtmlElement;
return "FF";
}catch (e) {
return "IE";
}
}();
Sx.comm.ext=function () {
if (sx.comm.ver== "FF") {
htmlelement.prototype.__definegetter__ ("outerHTML", function () {
var attr;
var attrs=this.attributes;
var str= "<" +this.tagname.tolowercase ();
for (Var i=0;i<attrs.length;i++) {
Attr=attrs[i];
if (attr.specified)
str+= "" +attr.name+ ' = "' +attr.value+ '";
}
if (!this.canhavechildren)
return str+ ">";
return str+ ">" +this.innerhtml+ "</" +this.tagname.tolowercase () + ">";
});
htmlelement.prototype.__definegetter__ ("Canhavechildren", function () {
Switch (This.tagName.toLowerCase ()) {
Case "Area":
Case "Base":
Case "Basefont":
Case "Col":
Case "Frame":
Case "HR":
Case "IMG":
Case "BR":
Case "Input":
Case "Isindex":
Case "link":
Case "META":
Case "param":
return false;
}
return true;
});
XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function () {
Alert (arguments[0]);
var onsresolver = this.creatensresolver (this.documentelement)
var aitems = this.evaluate (Arguments[0].tolowercase (), this, Onsresolver,
Xpathresult.ordered_node_snapshot_type, NULL)
var aresult = [];
for (var i = 0; i < aitems.snapshotlength; i++)
{
Aresult[i] = Aitems.snapshotitem (i);
}
alert (aitems.snapshotlength);
return aresult;
}
}
}();
sx.event={};
Sx.event.target=function () {
if (window.event) {
return window.event.srcElement;
}else{
var F=arguments.callee.caller;
while (f) {
if (F.arguments[0] instanceof Event) {
return f.arguments[0].target;
}
F=f.caller;
}
}
}
Sx.event.event=function () {
if (window.event) {
return window.event;
}else{
var F=arguments.callee.caller;
while (f) {
if (F.arguments[0] instanceof Event) {
return f.arguments[0];
}
f = f.caller;
}
}
}
Sx.event.relatedtarget=function () {
if (window.event) {
if (window.event.type== "MouseOver") {
return window.event.fromElement;
}else if (window.event.type== "Mouseout") {
return window.event.toElement;
}
}else{
var F=arguments.callee.caller;
while (f) {
if (F.arguments[0] instanceof Event) {
return f.arguments[0].relatedtarget;
}
f = f.caller;
}
}
}
Sx.event.stopevent=function () {
if (window.event) {
Window.event.returnvalue=false;
Window.event.cancelbubble=true;
}else{
var F=arguments.callee.caller;
while (f) {
if (F.arguments[0] instanceof Event) {
Break
}
F=f.caller;
}
F.arguments[0].preventdefault ();
F.arguments[0].stoppropagation ();
}
}
Sx.event.addevent=function (e,t,f) {
if (!arguments.callee.event) {
Arguments.callee.event=[];
}
if (e.attachevent) {
E.attachevent ("on" +t,f);
}else{
E.addeventlistener (T,f,false);
}
Arguments.callee.event.push (f);
return arguments.callee.event.length-1;
}
Sx.event.removeevent=function (e,t,i) {
if (e.detachevent) {
E.detachevent ("on" +t,sx.event.addevent.event[i]);
}else{
E.removeeventlistener (T,sx.event.addevent.event[i],false);
}
Sx.event.addevent.event[i]=null;
}
Sx.event.parseevent=function (e,t) {
if (sx.comm.ver== "ie") {
E.fireevent ("on" +t);
}else{
var evt = document.createevent ("Events");
Evt.initevent (T, True, true);
E.dispatchevent (EVT);
}
}
sx.dom={};
Sx.dom.text=function (e) {
Return This.e.innertext?this.e.innertext:this.e.innerhtml.replace (//<.*?/>/igm, "");
}
Sx.dom.elementnodes=function (E,flag) {
var temp=[];
var a=e.childnodes;
for (Var i=0;i<a.length;i++) {
if (A[i].nodetype==flag) {
Temp.push (A[i]);
}
}
return temp;
}
Sx.dom.elementallnodes=function (E,flag) {
var temp=[];
var a=e.getelementsbytagname ("*");
for (Var i=0;i<a.length;i++) {
if (A[i].nodetype==flag) {
Temp.push (A[i]);
}
}
return temp;
}
Sx.dom.xpath=function (E,mode) {
P=e.clonenode (TRUE);
var s=p.getelementsbytagname ("script");
for (Var i=0;i<s.length;i++)
P.replacechild (S[i].clonenode (false), s[i]);
var html=p.outerhtml.replace (//= (?! "|) (.*?) (?=/s|>)/ig, "=/" $1/"");
if (window. ActiveXObject) {
var x=new activexobject ("msxml2.domdocument");
X.async=false;
X.loadxml ("<?xml version=/" 1.0/"encoding=/" gb2312/"?>" +html);
}else{
var oparser = new Domparser ();
alert (HTML);
var x = oparser.parsefromstring (HTML, "Text/xml");
alert (x.documentelement.tagname);
}
var div=x.selectnodes (mode);
alert (div.length);
var temp=[];
var a1=x.selectnodes (E.tagname.touppercase () + "//*");
alert (a1.length);
var all=e.getelementsbytagname ("*");
alert (all.length);
var i1=0;
for (i=0;i<a1.length;i++) {
alert (i);
if (A1[i]==div[i1]) {
Temp.push (All[i]);
i1++;
}
}
X=null;
return temp;
}
Sx.dom.left=function (e) {
if (document.getboundingclientrect) {
Return E.getboundingclientrect (). Left;
}else{
var a=e;
var left=0;
while (a) {
Left+=a.offsetleft;
A=a.offsetparent;
}
return to left;
}
}
Sx.dom.top = function (e) {
if (document.getboundingclientrect) {
Return E.getboundingclientrect (). Top;
}else{
var a=e;
var top=0;
while (a) {
Top+=a.offsettop;
A=a.offsetparent;
}
return top;
}
}
Sx.dom.getstyle=function (E,prop) {
if (E.currentstyle) {
return E.currentstyle[prop];
}else{
Return Document.defaultView.getComputedStyle (e,null). GetPropertyValue (prop);
}
}
Sx.dom.setstyle=function (E,data) {
for (var i in data) {
E.style[i]=data[i];
}
}
Advance.js:
var $=function (ID) {
return document.getElementById (ID);
}
Edit.js：
Copy Code code as follows:
var w=$ ("Content"). Contentwindow;
W.document.designmode= "on";
W.document.open ();
W.document.write ("W.document.close ();
if (sx.comm.ver== "ie") {
W.document.body.style.lineheight= "10px";
}
W.document.onkeydown=function () {
if (sx.comm.ver== "ie") {
if (w.event.keycode==13) {
var s=w.document.selection.createrange ();
S.pastehtml ("<br/>");
W.focus ();
return false;
}
}
}
function Wnd () {
var main=document.createelement ("div");
Sx.dom.setstyle (main,{
Position: "Absolute",
Width: "100%",
Height: "100%",
BackgroundColor: "LightBlue",
Filter: "Alpha (OPACITY=50)",
opacity:0.5
});
var body=document.createelement ("div");
Sx.dom.setstyle (body,{
Position: "Absolute",
Width: "200px",
Height: "250px",
BackgroundColor: "Green",
zindex:1000
});
var title=document.createelement ("div");
Sx.dom.setstyle (title,{
Width: "200px",
Height: "20px",
BackgroundColor: "Blue",
});
var close=document.createelement ("span");
Sx.dom.setstyle (close,{
MarginLeft: "180px",
Display: "Block",
Width: "20px",
Height: "20px",
TextAlign: "Center",
Cursor: "Pointer"
});
Close.innerhtml= "X";
Close.onclick=function () {
Main.parentNode.removeChild (main);
Body.parentNode.removeChild (body);
}
Title.appendchild (Close);
Body.appendchild (title);
var content=document.createelement ("div");
Sx.dom.setstyle (content,{
Width: "200px",
Height: "230px"
});
Body.appendchild (content);
This.show=function (e) {
Document.body.appendChild (main);
Sx.dom.setstyle (main,{
Top: "0px",
Left: "0px"
});
Document.body.appendChild (body);
Sx.dom.setstyle (body,{
Top:sx.dom.top (E) +e.clientheight+ "px",
Left:sx.dom.left (E) +e.clientwidth+ "px",
});
}
This.close=close;
This.main=main;
This.body=body;
This.title=title;
This.content=content;
}
function Bold () {
W.document.execcommand ("bold", Null,null);
}
function Italic () {
W.document.execcommand ("Italic", null,null);
}
function Left () {
W.document.execcommand ("Justifyleft", null,null);
}
Function Center () {
W.document.execcommand ("Justifycenter", null,null);
}
function Right () {
W.document.execcommand ("Justifyright", null,null);
}
function FontName (value) {
W.document.execcommand ("FontName", false, value);
}
function FontSize (value) {
W.document.execcommand ("FontSize", false, value);
}
function Inserthr () {
if (document.selection) {
W.focus ();
var s=w.document.selection.createrange ();
S.pastehtml ("}else{
W.focus ();
var s=w.getselection (). Getrangeat (0);
S.insertnode (W.document.createelement ("HR"));
}
}
function Insertlink () {
if (document.selection) {
W.focus ();
var s = w.document.selection.createrange ();
}
else {
W.focus ();
var s = w.getselection (). Getrangeat (0);
}
var e=sx.event.target ();
var ww=new wnd ();
Ww.content.appendChild (document.createTextNode ("Please enter the link address;");
var link=document.createelement ("input");
Link.type= "Text";
link.size=20;
Ww.content.appendChild (link);
var b=document.createelement ("button");
B.innerhtml= "OK";
Ww.content.appendChild (b);
B.onclick=function () {
if (sx.comm.ver== "ie") {
S.pastehtml ("<a href= '" +link.value+ "' >" +s.htmltext+ "</a>");
}
else{
var a=w.document.createelement ("a");
A.href=link.value;
S.surroundcontents (a);
}
Sx.event.parseevent (Ww.close, "click");
}
Ww.show (e);
}
function inserttable () {
if (document.selection) {
W.focus ();
var s = w.document.selection.createrange ();
}
else {
W.focus ();
var s = w.getselection (). Getrangeat (0);
}
var e=sx.event.target ();
var ww=new wnd ();
Ww.content.appendChild (document.createTextNode ("Please enter the number of rows;");
var tr=document.createelement ("input");
Tr.type= "Text";
tr.size=20;
Ww.content.appendChild (TR);
Ww.content.appendChild (document.createelement ("BR"));
Ww.content.appendChild (document.createTextNode ("Please enter the number of columns;");
var td=document.createelement ("input");
Td.type= "Text";
td.size=20;
Ww.content.appendChild (TD);
Ww.content.appendChild (document.createelement ("BR"));
Ww.content.appendChild (document.createTextNode ("please input cell height;");
var height=document.createelement ("input");
Height.type= "Text";
height.size=20;
Ww.content.appendChild (height);
Ww.content.appendChild (document.createelement ("BR"));
Ww.content.appendChild (document.createTextNode ("input cell width;");
var width=document.createelement ("input");
Width.type= "Text";
width.size=20;
Ww.content.appendChild (width);
Ww.content.appendChild (document.createelement ("BR"));
var b=document.createelement ("button");
B.innerhtml= "OK";
Ww.content.appendChild (b);
B.onclick=function () {
var l1=number (Tr.value);
var l2=number (Td.value);
var h1=number (Height.value);
var w1=number (Width.value);
Ww.content.appendChild (document.createTextNode ("please input cell height;");
var t=document.createelement ("table");
t.border= "1";
var tb=document.createelement ("Tbody");
T.appendchild (TB);
for (Var i=0;i<l1;i++) {
var tr1=document.createelement ("tr");
for (Var i1=0;i1<l2;i1++) {
var td1=document.createelement ("TD");
Td1.innerhtml= "";
Sx.dom.setstyle (td1,{
width:w1+ "px",
height:h1+ "px"
});
Tr1.appendchild (TD1);
}
Tb.appendchild (TR1);
}
if (sx.comm.ver== "ie") {
S.pastehtml (t.outerhtml);
}
else{
S.insertnode (t);
S.insertnode (document.createelement ("BR"));
}
Sx.event.parseevent (Ww.close, "click");
}
Ww.show (e);
}
function color () {
var e=sx.event.target ();
if (document.selection) {
W.focus ();
var s = w.document.selection.createrange ();
}
else {
W.focus ();
var s = w.getselection (). Getrangeat (0);
}
var ww=new wnd ();
var colors = ["]," "," "," "," "CC", "FF"];
var cp=document.createelement ("span");
Sx.dom.setstyle (cp,{
Display: "Inline-block",
Width: "10px",
Height: "10px",
margin: "2px"
});
for (Var i1=5;i1>=0;i1--) {
for (Var i2=5;i2>=0;i2--) {
for (Var i3=5;i3>=0;i3--) {
var cp1=cp.clonenode (true);
Cp1.style.backgroundcolor= "#" + Colors[i1] + Colors[i2] + colors[i3];
Cp1.title= "#" + Colors[i1] + Colors[i2] + colors[i3];
Cp1.onclick=function () {
if (sx.comm.ver== "ie") {
W.focus ();
S.pastehtml ("<font color= '" +this.title+ "' >" +s.htmltext+ "</font>");
}
else{
var a=w.document.createelement ("Font");
A.color=this.title;
S.surroundcontents (a);
}
Sx.event.parseevent (Ww.close, "click");
}
Ww.content.appendChild (CP1);
}
}
}
Ww.show (e);
}
The key is the code in demo.html and Edit.js, the code in Core.js and Advance.js is written for a compatible browser, I want to extend it to a perfect framework, because time is limited, it is not written down.
The editor has not yet implemented the upload of pictures and files, because the need for server technology, so I did not write, you can give the reader to study slowly.
I intend to put the web first, began to focus on VC + + research, as far as possible to write a decent program out, if there is time I will continue to improve the editor and JavaScript compatible framework.
Well, come on.
