Home > Developer > JavaScript

Self-written online text editors compatible with ie and ff are similar to ewebeditor

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
ff online ps4 practical guide to linux commands editors and shell programming eclipse xml editors and tools convert ff to decimal ff hex to decimal learning vi and vim editors mysql similar text

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More