Home > Developer > JavaScript
I should be tired after the night package, but I still have the strength to beat these characters. It seems that I have not reached this point yet.
To put it bluntly, I recently wrote an online editor, which is similar to ewebeditor. Of course, it is not as powerful as other people, but has basic skills and is compatible with ie and ff, I have also spent a lot of effort on this, so let's sacrifice the code.
Demo.html:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
</Head>
<Body>
<Script src = "core. js"> </script>
<Script src = "advance. js"> </script>
<Table border = "0" width = "800" height = "500" bgcolor = "gray">
<Tr height = "50"> <td>
Font family: <select onchange = "FontName (this. options [this. selectedIndex]. value)">
<Option value = "">
<Option value = "">
<Option value = "_ GB2312">
<Option value = "_ GB2312">
<Option value = "">
<Option value = "">
<Option value = "">
<Option value = "">
<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 Serif
<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 ()"> skew </button>
<Button onclick = "left ()"> left </button>
<Button onclick = "center ()"> center </button>
<Button onclick = "right ()"> right </button>
</Td> </tr>
<Tr height = "50"> <td>
<Button> insert movies and images </button>
<Button> upload a file </button>
<Button onclick = "inserttable ()"> insert table </button>
<Button onclick = "inserthr ()"> insert a horizontal line </button>
<Button onclick = "insertlink ()"> insert a hyperlink </button>
</Td> </tr>
& Lt; tr height = "400" & gt;
& Lt; td height = "400" & gt;
<Iframe id = "content" width = "100%" height = "100%"> </iframe>
</Td>
</Tr>
</Table>
<Script src = "edit. js"> </script>
</Body>
</Html>
Core. js:
Copy codeThe Code is 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.doc umentElement)
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.tar get = 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%.tar get;
}
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.doc umentElement. 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 (){
Left + = a. offsetLeft;
A = a. offsetParent;
}
Return left;
}
}
Sx. dom. top = function (e ){
If (document. getBoundingClientRect ){
Return e. getBoundingClientRect (). top;
} Else {
Var a = e;
Var top = 0;
While (){
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 codeThe Code is as follows:
Var w = $ ("content"). contentWindow;
Export Doc ument. designMode = "on ";
Using Doc ument. open ();
Export Doc ument. write ("Using Doc ument. close ();
If (sx. comm. ver = "ie "){
// Specify Doc ument. body. style. lineHeight = "10px ";
}
Export Doc ument. onkeydown = function (){
If (sx. comm. ver = "ie "){
If (w. event. keyCode = 13 ){
Var s00000000doc ument. 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 (){
Optional document.exe cCommand ("bold", null, null );
}
Function italic (){
Optional document.exe cCommand ("italic", null, null );
}
Function left (){
Optional document.exe cCommand ("JustifyLeft", null, null );
}
Function center (){
Optional document.exe cCommand ("Justifycenter", null, null );
}
Function right (){
Optional document.exe cCommand ("Justifyright", null, null );
}
Function FontName (value ){
Optional document.exe cCommand ("FontName", false, value );
}
Function FontSize (value ){
Optional document.exe cCommand ("FontSize", false, value );
}
Function inserthr (){
If (document. selection ){
W. focus ();
Var s00000000doc ument. selection. createRange ();
S. pasteHTML ("} Else {
W. focus ();
Var s = w. getSelection (). getRangeAt (0 );
S.insertnode(your Doc ument. createElement ("hr "));
}
}
Function insertlink (){
If (document. selection ){
W. focus ();
Var s = Doc ument. selection. createRange ();
}
Else {
W. focus ();
Var s = w. getSelection (). getRangeAt (0 );
}
Var e=sx.event.tar get ();
Var ww = new wnd ();
Ww. content. appendChild (document. createTextNode ("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.html Text + "</a> ");
}
Else {
Var a=w.doc ument. createElement ("");
A. href = link. value;
S. surroundContents ();
}
Sx. event. parseevent (ww. close, "click ");
}
Ww. show (e );
}
Function inserttable (){
If (document. selection ){
W. focus ();
Var s = Doc ument. selection. createRange ();
}
Else {
W. focus ();
Var s = w. getSelection (). getRangeAt (0 );
}
Var e=sx.event.tar get ();
Var ww = new wnd ();
Ww. content. appendChild (document. createTextNode ("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 ("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 ("enter the 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 ("enter the 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 ("enter the 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.tar get ();
If (document. selection ){
W. focus ();
Var s = Doc ument. selection. createRange ();
}
Else {
W. focus ();
Var s = w. getSelection (). getRangeAt (0 );
}
Var ww = new wnd ();
Var colors = ["00", "33", "66", "99", "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.html Text + "</font> ");
}
Else {
Var a=w.doc ument. createElement ("font ");
A. color = this. title;
S. surroundContents ();
}
Sx. event. parseevent (ww. close, "click ");
}
Ww. content. appendChild (cp1 );
}
}
}
Ww. show (e );
}
The keys are demo.html and edit. the code in js, core. js and advance. I wrote the code in js for a compatible browser. I wanted to extend it into a perfect framework. Because of the limited time, I didn't write it anymore.
This editor has not yet implemented the upload of images and files, because the server technology is required, so I did not write it, you can give it to the reader for further research.
I plan to release the web first, and start to focus on vc ++'s exploration, and try to write a decent program, in the future, I will continue to improve this editor and the javascript-compatible framework.
Well, come on.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
