What you want is the WYSIWYG HTML editor, which requires a few basic steps in simple terms:
1, you need an edit box that you can edit and display the effect. TextArea, it can only be used to enter plain text, can not display color, italic, such as text styles, like Notepad.
You can use IFRAME to implement, modify the DesignMode property of the IFRAME so that it can be edited.
Copy Code code as follows:
<iframe id= "Myediter" width= "100%" height= "150px" ></iframe>
<script>myediter.document.designmode = ' on ';</script>
So you can write in this iframe area.
2, select the text you want to add a style to. Usually when we use Word to edit the style of a piece of text, we typically type first and then edit the style. So you need a way to select the text you want to work with. JS Selection.createrange () can select the text, return an object, you can access the object's Text property to get the selected texts.
Copy Code code as follows:
<iframe id= "Myediter" width= "100%" height= "150px" ></iframe>
<input type= "button" value= "bold" onclick= "bold ()" >
<script>
MyEditer.document.designMode = ' on ';
function Bold () {
var sel = MyEditer.document.selection.createRange ();
alert (Sel.text);
}
</script>
3, change the style of the selected text. Selection.createrange () selects the text and returns an object that has a method execcommand () that can be used to change the style of the selected text.
Copy Code code as follows:
<iframe id= "Myediter" width= "100%" height= "150px" ></iframe>
<input type= "button" value= "bold" onclick= "bold ()" >
<script>
MyEditer.document.designMode = ' on ';
function Bold () {
var sel = MyEditer.document.selection.createRange ();
alert (Sel.text);
Sel.execcommand ("Bold")
}
</script>
common usage of execcommand ()：
FONT--XXFarEastFont-Arial, blackbody, italics, etc.
ExecCommand ("FontName", "", font)
Font Size--sizes
ExecCommand ("FontSize", "", Font size)
Increase
ExecCommand ("Bold")
Italic body
ExecCommand ("italic")
Underline
ExecCommand ("Underline")
Delete Line
ExecCommand ("Strikethrough")
Ju Zuo
ExecCommand ("Justifyleft")
Ju Right
ExecCommand ("Justifyright")
Center
ExecCommand ("Justifycenter")
Shear
ExecCommand ("Cut")
Copy
ExecCommand ("Copy")
Paste
ExecCommand ("Paste")
Cancel Operation--ie5.0 can be canceled indefinitely
ExecCommand ("Undo")
Repeat action
ExecCommand ("Redo")
By using the buttons to implement each of the above, you have completed a simple visual text editor.
Document.execcommand () usage instructions
Copy Code code as follows:
Position allows you to move an object that is absolutely positioned by dragging.
The position attribute of the AbsolutePosition setting element is "absolute" (absolute).
BackColor Sets or gets the background color of the currently selected area.
BLOCKDIRLTR is not currently supported.
BLOCKDIRRTL is not currently supported.
Bold toggles whether or not bold is displayed in the currently selected area.
Browsemode is not currently supported.
Copy copies the current selection to the Clipboard.
CreateBookMark creates a bookmark anchor or gets the name of the bookmark anchor for the current selection or insertion point.
Createlink inserts a hyperlink on the current selection, or displays a dialog box that allows the user to specify the URL of the hyperlink to insert for the current selection.
Cut copies the current selection to the Clipboard and deletes it.
Delete Deletes the current selected area.
DIRLTR is not currently supported.
DIRRTL is not currently supported.
EditMode is not currently supported.
FontName Sets or gets the font for the currently selected area.
FontSize Sets or gets the font size of the current selected area.
ForeColor Sets or gets the foreground (text) color of the currently selected area.
Formatblock sets the current block format label.
Indent increases the indentation of the selected text.
INLINEDIRLTR is not currently supported.
INLINEDIRRTL is not currently supported.
Insertbutton overwrites the current selection with a button control.
InsertFieldSet the current selected area with a box.
Inserthorizontalrule the current selected area with a horizontal line.
Insertiframe overwrites the current selection with an inline frame.
Insertimage overwrites the current selected area with an image.
Insertinputbutton overwrites the current selection with a button control.
Insertinputcheckbox overwrites the current selection with a check box control.
Insertinputfileupload overwrites the current selected area with a file upload control.
Insertinputhidden inserts a hidden control to overwrite the current selected area.
Insertinputimage overwrites the current selected area with an image control.
Insertinputpassword overwrites the current selection with a password control.
Insertinputradio overwrites the currently selected area with the radio buttons control.
Insertinputreset overwrites the current selection with the reset control.
Insertinputsubmit overwrites the currently selected area with the Submit control.
Insertinputtext overwrites the current selected area with a text control.
Insertmarquee overwrites the current selection with blank captions.
Insertorderedlist Toggles whether the current selection is a numbered list or a regular format block.
The insertparagraph overwrites the current selection with a newline.
Insertselectdropdown the Drop-down box control to overwrite the current selection.
Insertselectlistbox overwrites the current selection with a list box control.
Inserttextarea overwrites the current selection with multiple lines of text input controls.
Insertunorderedlist Toggles whether the current selection is a bulleted list or a regular format block.
Italic Toggle the current selection italic display or not.
Justifycenter the current selection in the format block where it is placed.
Justifyfull is not currently supported.
Justifyleft aligns the formatting blocks of the current selection to the left.
Justifynone is not currently supported.
Justifyright aligns the formatting blocks of the current selection to the right.
Liveresize forces the MSHTML editor to continuously update the appearance of the element during scaling or moving, rather than updating it after the move or zoom is complete.
Multipleselection allows you to select more than one site optional element at a time when the user holds down the Shift or Ctrl key.
Open opens.
Outdent reduces the indentation of the formatted block where the selected area is located.
OverWrite toggles the insertion and overwrite of the text state.
Paste overwrites the current selected area with the Clipboard contents.
Playimage is not currently supported.
Print opens a printing dialog box so that users can print the current page.
Redo Redo.
Refresh refreshes the current document.
Removeformat removes the formatted label from the current selection.
Removeparaformat is not currently supported.
SaveAs saves the current Web page as a file.
SelectAll selects the entire document.
SizeToControl is not currently supported.
SizeToControlHeight is not currently supported.
SizeToControlWidth is not currently supported.
Stop stops.
Stopimage is not currently supported.
Strikethrough is not currently supported.
Subscript is not currently supported.
Superscript is not currently supported.
Unbookmark removes all bookmarks from the current selection.
Underline toggle the underline displayed in the current selection.
Undo undone.
Unlink removes all hyperlinks from the current selection.
Unselect clears the selected state of the current check area.
A simple open source editor
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 ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Editor</title>
<style type= "Text/css" >
body{font-size:12px;}
#ed {height:300px; width:800px background-color: #fff}
. sssss{Background-image:url (Yun_qi_img/20099493121.gif)}
. tag{Background-image:url (yun_qi_img/20099493121.gif); height:22px; display:inline-table;float:left;; cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; Vertical-align:middle; line-height:20px;}
. span0_hover{background-position:-0px-2px;width:22px}
. span1_hover{background-position:-30px-2px;width:22px}
. span2_hover{background-position:-58px-2px;width:22px}
. span3_hover{background-position:-86px-57px;width:73px}
. span4_hover{background-position:-86px-28px;width:73px}
. span5_hover{background-position:-164px-2px;width:22px Background-color: #000000}
. span6_hover{background-position:-194px-2px;width:22px}
. span7_hover{background-position:-45px-192px;width:22px}
. span8_hover{background-position:-76px-192px;width:22px}
. span9_hover{background-position:-58px-247px;width:22px}
. span10_hover{background-position:-86px-247px;width:22px}
. span11_hover{background-position:-113px-247px;width:22px}
. span12_hover{background-position:-476px-192px;width:22px}
. span13_hover{background-position:-505px-192px;width:22px}
. span14_hover{background-position:-333px-247px;width:22px}
. span15_hover{background-position:-532px-192px;width:22px}
. span16_hover{background-position:-560px-192px;width:22px}
. span17_hover{background-position:-455px-247px;width:22px}
. span18_hover{background-position:-222px-2px;width:73px}
. span19_hover{background-position:-380px-2px;width:74px}
. span20_hover{background-position:-460px-2px;width:71px}
. span0{background-position:-0px-57px;width:22px}
. span1{background-position:-30px-57px;width:22px}
. span2{background-position:-58px-57px;width:22px}
. span3{background-position:-86px-57px;width:73px}
. span4{background-position:-86px-28px;width:73px}
. Span5{background-position:-164px-57px;width:22px;background-color: #000000}
. span6{background-position:-194px-57px;width:22px}
. span7{background-position:-45px-84px;width:22px}
. span8{background-position:-76px-84px;width:22px}
. span9{background-position:-58px-140px;width:22px}
. span10{background-position:-86px-140px;width:22px}
. span11{background-position:-113px-140px;width:22px}
. span12{background-position:-476px-84px;width:22px}
. span13{background-position:-505px-84px;width:22px}
. span14{background-position:-333px-140px;width:22px}
. span15{background-position:-532px-84px;width:22px}
. span16{background-position:-560px-84px;width:22px}
. span17{background-position:-455px-140px;width:22px}
. span18{background-position:-222px-57px;width:73px}
. span19{background-position:-380px-57px;width:74px}
. span20{background-position:-460px-57px;width:71px}
. span0_active{background-position:-0px-28px;width:22px}
. span1_active{background-position:-30px-28px;width:22px}
. span2_active{background-position:-58px-28px;width:22px}
. span3_active{background-position:-476px-299px;width:22px}
. span4_active{background-position:-505px-299px;width:22px}
. ebody{Height:auto; width:760px border:1px Solid #999999}
. ebar{width:100%; height:36px background-color: #F0F2F5;};
. edit{height:550px; width:100%; border:0px;}
popupfont{width:200px; Height:auto border:1px solid #7B9EBD; Background-color: #F7F7F7; position:absolute;padding : 3px; }
a.c1{width:96%; Height:auto font-size:10px;display:block;border:1px solid #F7F7F7; Padding:3px;color: #666666; Text-decoration:none;}
a.c1:hover{width:96%, Height:auto, font-size:10px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
a.c2{width:96%; Height:auto font-size:12px;display:block;border:1px solid #F7F7F7; Padding:3px;color: #666666; Text-decoration:none;}
a.c2:hover{width:96%, Height:auto, font-size:12px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
a.c3{width:96% Height:auto font-size:14px;display:block;border:1px solid #F7F7F7;p adding:3px;color: #666666; Text-decoration:none;}
a.c3:hover{width:96%, Height:auto, font-size:14px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
a.c4{width:96% Height:auto font-size:16px;display:block;border:1px solid #F7F7F7;p adding:3px; color: #666666; Text-decoration:none;}
a.c4:hover{width:96%, Height:auto, font-size:16px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
a.c5{width:96% Height:auto font-size:18px;display:block;border:1px solid #F7F7F7;p adding:3px; color: #666666; Text-decoration:none;}
a.c5:hover{width:96%, Height:auto, font-size:18px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
a.c6{width:96%; Height:auto font-size:22px;display:block;border:1px solid #F7F7F7; Padding:3px;color: #666666; Text-decoration:none;}
a.c6:hover{width:96%, Height:auto, font-size:22px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
a.c7{width:96%; Height:auto font-size:26px;display:block;border:1px solid #F7F7F7; Padding:3px;color: #666666; Text-decoration:none;}
a.c7:hover{width:96%, Height:auto, font-size:26px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
a.n{width:96% Height:auto font-size:14px;display:block;border:1px solid #F7F7F7;p adding:3px;color: #666666; Text-decoration:none; }
a.n:hover{width:96%, Height:auto, font-size:14px border:1px solid #FFCF00;d isplay:block;background-color: #F7EBBD; Padding:3px;color: #666666; text-decoration:none;}
. textarea{Border:0px;display:none;}
. Toolbarlayer{position:absolute;opacity:0.7;filter:alpha (opacity:70); Background-color: #ffffff; height:36px}
. Bottom{height:30px;width:100%;background-color: #F7F3F7; font-size:12px;}
. checkbox{margin-top:10px;margin-top/*\**/:6px\9;margin-left:20px;margin-left/*\**/:16px\9;}
. Pp{height:auto border:1px solid #D3D3D3; position:absolute;z-index:5;}
. ppt{
height:24px; width:100%; Background-image:url (http://album.hi.csdn.net/app_uploads/wtcsy/20090726/203207031.p.gif); font-size:12px; Font-weight:bold; Vertical-align:middle; line-height:24px;
}
</style>
</head>
<body>
<div id= ' SS ' ></div>
<div id= ' SSS ' ></div>
<script type= "Text/javascript" >
var Sys = (function (UA) {
var s = {};
s.ie = Ua.match (/msie ([\d.] +)/) ? True:false;
S.firefox = Ua.match (/firefox\/([\d.] +)/) ? True:false;
S.chrome = Ua.match (/chrome\/([\d.] +)/) ? True:false;
S.ie6 = (s.ie && ([/msie (\d) \.0/i.exec (navigator.useragent)][0][1] = = 6)? True:false;
S.ie7 = (s.ie && ([/msie (\d) \.0/i.exec (navigator.useragent)][0][1] = = 7)? True:false;
S.IE8 = (s.ie && ([/msie (\d) \.0/i.exec (navigator.useragent)][0][1] = = 8)? True:false;
return s;
}) (Navigator.userAgent.toLowerCase ());
Sys.ie6 && Document.execcommand ("Backgroundimagecache", false, true);
var $ = function (ID) {
Return "string" = = typeof ID? document.getElementById (ID): ID;
};
function each (list, fun) {
for (var i = 0, len = list.length i < len; i++) {
Fun (List[i], i);
}
};
var Css = function (e, O) {
if (typeof o = = "string") {
E.style.csstext = O;
Return
}
for (var i in O)
E.style[i] = O[i];
};
var Attr = function (e, O) {
for (var i in O)
E.setattribute (i, o[i]);
};
var $$ = function (P, e) {
Return P.getelementsbytagname (e);
};
function Create (E, p, fn) {
var element = document.createelement (e);
P && p.appendchild (element);
fn && fn (element);
return element;
};
function Gettarget (e) {
E = e | | window.event;
return E.srcelement | | E.target;
};
function Createtab (tri, TDI, Arisetab, ARISETR, arisetd, p) {
var table = P? P.createelement ("table"): Create ("table");
Arisetab && arisetab (table);
var tbody = p? P.createelement ("Tbody"): Create ("tbody");
for (var i = 0; i < tri; i++) {
var tr = p? P.createelement ("tr"): Create ("tr");
Arisetr && Arisetr (i, TR);
for (var j = 0; J < TDI; J + +) {
var td = P? P.createelement ("TD"): Create ("TD");
arisetd && arisetd (i, J, TD);
Tr.appendchild (TD);
}
Tbody.appendchild (TR);
}
Table.appendchild (TBODY);
return table;
};
var Extend = function (destination, source) {
For (Var property in source) {
Destination[property] = Source[property];
}
};
var Bind = function (object, fun) {
var args = Array.prototype.slice.call (arguments). Slice (2);
return function () {
Return Fun.apply (object, args);
}
};
var Bindaseventlistener = function (object, fun, args) {
var args = Array.prototype.slice.call (arguments). Slice (2);
return function (event) {
Return Fun.apply (object, [Event | | window.event].concat (args));
}
};
var currentstyle = function (Element) {
return Element.currentstyle | | Document.defaultView.getComputedStyle (element, NULL);
};
var getpos = function (o) {
var x = 0,
y = 0;
do {
x + + O.offsetleft;
Y + + o.offsettop;
while ((o = O. offsetparent));
return {
' X ': X,
' Y ': Y
};
};
function AddListener (element, E, fn) {
Element.addeventlistener? Element.addeventlistener (E, FN, false): Element.attachevent ("on" + E, FN);
};
function RemoveListener (element, E, fn) {
Element.removeeventlistener? Element.removeeventlistener (E, FN, false): Element.detachevent ("on" + E, FN);
};
var Class = function (properties) {
var _class = function () {
Return (Arguments[0]!== null && this.initialize && typeof (this.initialize) = = ' function ')? This.initialize.apply (this, arguments): this;
};
_class.prototype = properties;
return _class;
};
var editer = new Class ({
Options: {
width:890,
height:700,
FACEBG: [{
Bgimg: " -4px-4px",
Title: "Smile",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"
},
{
Bgimg: " -31px-4px",
Title: "Laughing",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220859814.p.gif"
},
{
Bgimg: " -58px-4px",
Title: "Chuckle",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"
},
{
Bgimg: " -85px-4px",
Title: "Blink",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
Bgimg: " -112px-4px",
Title: "Grimace",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
Bgimg: " -139px-4px",
Title: "Color",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"
},
{
Bgimg: " -167px-4px",
Title: "Fangs",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220958111.p.gif"
},
{
Bgimg: " -194px-4px",
Title: "Nasty",
Wl:22,
SRC: "Http://album.hi.csdn.net/app_uploads/wtcsy/20090719/221004564.p.gif"
}],
Fontsizedata: {
FontSize: ["Font size 1", "Font size 2", "Font size 3", "Font size 4", "Font size 5", "Font size 6", "Font size 7"],
FontName: ["XXFarEastFont-Arial", "bold", "italics", "Official script", "Young Circle", "Arial", "Georgia", "Verdana", "Helvetica"]
},
Oninit:function () {}
},
Initialize:function (container, data, B, options) {
This.container = container;
This._body = Create ("div", container);
This.toolbar = Create ("div", this._body); Tool bar
This.iframe = Create ("iframe", this._body); Edit Area
This.textarea = Create ("textarea", this._body); Display the frame of the source code
This.bottom = Create ("div", this._body); Bottom
This.lightbox = b; Lightbox
This.original = Create ("input"); button to display source code
This.ed = null;
This.isfocus = false;
This.option = {};
Extend (This.option, this.options);
Extend (this.option, Options);
This.rang = null; Selected area
This. Fpop = null;
This.option.oninit ();
This.toolbar.className = "Ebar";
This._body.classname = "Ebody";
This.textarea.className = "textarea";
Css (This._body, {
Width:this.option.width + "px",
Height:this.option.height + "px"
});
Css (This.textarea, {
Width:Sys.IE? This.option.width-2 + "px": This.option.width + "px",
Height:Sys.IE? this.option.height-66 + "px": this.option.height-70 + "px"
});
Attr (This.iframe, {
SRC: "About:blank",
Width:Sys.IE? This.option.width:this.option.width-4,
Height:Sys.IE? This.option.height-66:this.option.height-70
});
Attr (this.original, {
Type: "checkbox",
ClassName: "checkbox",
Align: "top"
});
This.bottom.className = "Bottom";
This.bottom.innerHTML = "<span> Show source code </span>";
This.bottom.insertBefore (This.original, this.bottom.childnodes[0]);
This.ed = sys.ie? This.iframe.contentWindow.document:this.iframe.contentDocument;
This.ed.open ();
var div = sys.ie? "<div></div>": "";
This.ed.write ("<html><head><style>body{margin:5px;font-size:16px;word-wrap:break-word}</ Style></head><body id= ' my_body ' > ' + div + "</body></html>");
This.ed.close ();
This.ed.contentEditable = true;
This.ed.designMode = "on"; Set edit area to editable
for (var i = 0, L = data.length i < l; i++) {
var o = Create ("span", this.toolbar);
Attr (o, {
Title:data[i].title,
Active:false,
Unselectable: "On"
});
O.classname = "tag" + data[i]. Class;
AddListener (O, "mouseover", Bind (this, this.) Changebgcolor, O, data[i].hover));
AddListener (O, "mouseout", Bind (this, this.) Changebgcolor, O, Data[i]. Class));
AddListener (O, "click", Bind (this, this[data[i].action], O, Data[i].args));
}
Build a toolbar
AddListener (This.iframe.contentWindow, "Focus", Bind) (This,
function () {
This.isfocus = true;
}));
AddListener (This.iframe.contentWindow, "Blur", Bind (this,
function () {
This.isfocus = false;
}));
AddListener (This.ed, ' MouseDown ', Bind (this, this.) Show));
AddListener (This.ed, ' MouseUp ', Bind (this, this.) Show));
These 2 events are to determine whether or not to edit the cursor location
AddListener (this.original, ' click ', Bind (this, this.) Showoriginal, this.original)); Show source code
},
Changebgcolor:function (o, Name, p) {
if (o.active) return;
O.classname = "tag" + name;
},
Show:function () {
var spans = $$ (This.toolbar, "span"),
is;
var elm = [[Spans[0], "Bold", "tag span0_active", "tag Span0"], [spans[1], "italic", "tag span1_active", "tag Span1"], [sp ANS[2], "underline", "tag span2_active", "tag span2"], [spans[12], "insertunorderedlist", "tag span3_active", "tag span12 "], [spans[13]," insertorderedlist "," tag span4_active "," tag span13 "];
for (var i = 0, L = elm.length i < l; i++) {
is = This.ed.queryCommandState (elm[i][1]);
Elm[i][0].classname = is? ELM[I][2]: elm[i][3];
Elm[i][0].active = is;
}
},
Showoriginal:function (o) {
if (!this.toolbarlayer) {
This.toolbarlayer = Create ("div", document.body);
This.toolbarlayer.className = "Toolbarlayer";
var pos = GetPos (This.toolbar);
Css (This.toolbarlayer, {
Width:this.option.width + "px",
Left:pos.x + "px",
Top:pos.y + "px"
});
}
if (o.checked) {
This.iframe.style.display = "None";
This.textarea.style.display = "block";
This.toolbarlayer.style.display = "block";
This.textarea.value = This.ed.body.innerHTML;
}
else {
This.iframe.style.display = "block";
This.textarea.style.display = "None";
This.toolbarlayer.style.display = "None";
This.ed.body.innerHTML = This.textarea.value;
}
},
Exec:function (o, CMD, para) {
try {
This.ed.execCommand (cmd, false, para);
This. Show ();
}
catch (Err) {
Return
}
},
Insertimage:function (o) {
if (sys.ie) {! This.isfocus && this.iframe.contentWindow.focus ();
This.rang = This.ed.selection.createRange ();
}
This.lightbox.Show ();
This.makebody (this. Imagepopoup, "350px", "Insert Picture", "Insertimage", "Imagepopoup");
},
Createlink:function (o) {
if (sys.ie) This.rang = This.ed.selection.createRange ();
This.lightbox.Show ();
This.makebody (this. Linkpopoup, "350px", "Insert Connection", "Createlink", "Linkpopoup");
},
Fontcolor:function (o) {
var self = this;
if (!this.fontcolorpopup) {
var color = new Popoup ({
Width: "210px",
Title: "Color Selection"
});
This.fontcolorpopup = Color.container;
var pos = GetPos (o);
Css (Color.container, {
Left:pos.x + "px",
Top:pos.y + o.offsetheight + "px"
});
var bgcolor = ["]," "," "," "," "CC", "FF", "" "," "," "," "," "CC", "FF"];
$$ (Color.container, "div") [1].appendchild (Createtab (12, 18,
Function (tab) {
Attr (tab, {
cellpadding:0,
Cellspacing:1,
border:0,
bgcolor: "#333333"
});
},
Null
function (I, J, TD) {
var color = i < 6? "#" + Bgcolor[math.floor (J/6)] + bgcolor[math.floor (j% 6)] + Bgcolor[i]: "#" + Bgcolor[math.floor (J/6) + 3] + Bgcolo R[math.floor (j% 6)] + bgcolor[i-6];
Attr (TD, {
Width:10,
Height:10,
Unselectable: "On"
});
Td.style.backgroundColor = color;
AddListener (TD, ' click ', Bind (self, self). Execa, color, "fontcolor");
AddListener (TD, ' MouseDown ', Bindaseventlistener) (Self, self. Bubble));
}))
}
else This.fontcolorpopup.style.display = "block";
This. Fpop = Bind (this, this. Hide);
AddListener (This.ed, ' click ', this. FPOP);
AddListener (document, ' MouseDown ', this. FPOP);
},
Expression:function (o) {
var self = this;
if (!this.facebgpopup) {
var expr = new Popoup ({
Width: "190px",
Title: "Insert Expression"
});
This.facebgpopup = Expr.container;
var pos = GetPos (o);
Css (Expr.container, {
Left:pos.x + "px",
Top:pos.y + o.offsetheight + "px"
});
$$ (Expr.container, "div") [1].appendchild (Createtab (1, This.option.facebg.length,
Function (tab) {
Attr (tab, {
cellpadding:0,
Cellspacing:1,
border:0,
bgcolor: "#FFFFFF"
});
},
Null
function (I, J, TD) {
CSS (TD, {
BackgroundImage: "url (http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)",
Backgroundposition:self.option.facebg[j].bgimg
});
Attr (TD, {
WIDTH:SELF.OPTION.FACEBG[I].WL,
HEIGHT:SELF.OPTION.FACEBG[I].WL,
Unselectable: "On"
});
AddListener (TD, ' click ', Bind (self, self). Execa, SELF.OPTION.FACEBG[J].SRC, "Expression"));
AddListener (TD, ' MouseDown ', Bindaseventlistener) (Self, self. Bubble))
}));
}
else This.facebgpopup.style.display = "block";
This. Fpop = Bind (this, this. Hide);
AddListener (This.ed, ' click ', this. FPOP);
AddListener (document, ' MouseDown ', this. FPOP);
},
Layout:function () {
var child = This.ed.body.childNodes;
for (var i = 0, L = child.length i < l; i++) {
if (Child[i].nodename = = "DIV" | | child[i].nodename = = "P") child[i].style.textindent = Child[i].style.textindent = = "2em" ? "": "2em";
}
},
Fontsize:function (o) {
if (!this.fontsizepopup) {
var size = new Popoup ({
Width: "210px",
Title: "Font Size"
}),
A
This.fontsizepopup = Size.container;
var pos = GetPos (o);
Css (Size.container, {
Left:pos.x + "px",
Top:pos.y + o.offsetheight + "px"
});
for (var i = 0, L = this.option.fontsizedata.fontSize.length i < l; i++) {
A = Create ("A", $$ (Size.container, "div") [1]);
A.classname = "C" + (i + 1);
A.setattribute ("href", "javascript:void (0);")
a.innerhtml = This.option.fontsizedata.fontsize[i];
AddListener (A, "click", Bind (this, this.) Execa, I, "fontsize"));
AddListener (A, ' MouseDown ', Bindaseventlistener (this, this.) Bubble));
}
else This.fontsizepopup.style.display = "block";
This. Fpop = Bind (this, this. Hide);
AddListener (This.ed, ' click ', this. FPOP);
AddListener (document, ' MouseDown ', this. FPOP);
},
Fontname:function (o) {
if (!this.fontnamepopup) {
var name = new Popoup ({
Width: "200px",
Title: "Font"
}),
A
This.fontnamepopup = Name.container;
var pos = GetPos (o);
Css (Name.container, {
Left:pos.x + "px",
Top:pos.y + o.offsetheight + "px"
});
for (var i = 0, L = this.option.fontsizedata.fontname.length i < l; i++) {
A = Create ("A", $$ (Name.container, "div") [1]);
A.classname = "n";
A.setattribute ("href", "javascript:void (0);");
a.innerhtml = This.option.fontsizedata.fontname[i];
AddListener (A, "click", Bind (this, this.) Execa, This.option.fontsizedata.fontname[i], "fontname"));
AddListener (A, ' MouseDown ', Bindaseventlistener (this, this.) Bubble));
}
else This.fontnamepopup.style.display = "block";
This. Fpop = Bind (this, this. Hide);
AddListener (This.ed, ' click ', this. FPOP);
AddListener (document, ' MouseDown ', this. FPOP);
},
Makebody:function (o, W, T, F, N) {
if (!o) {
var self = this;
This[n] = new Popoup ({
Width:w,
Title:t
});
This[n].pos ();
$$ (This[n].container, "div") [1].innerhtml = ' <div style= ' margin-top:6px; margin-left:10px ' ><span > Connection address </span> <input style= ' width:200px; ' type= ' text '/></div> <div style= ' Text-align:center; padding-top:15px; ' ><img src= ' http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif ' > <img src= ' http:// Album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif ' ></div> '
This[n].elm = [$$ (This[n].container, "input") [0], $$ (This[n].container, "img") [0], $$ (This[n].container, "img") [1]];
This[n].elm[0].focus ()
AddListener (this[n].elm[1], ' click ', Bind (this, this.) Execa, NULL, f));
AddListener (this[n].elm[2], ' click ',
function () {
Self.lightbox.Close ();
Self[n]. Close ();
});
}
else with (This[n]) {
POS ();
Show ();
Elm[0].value = "";
Elm[0].focus ();
}
},
Addtable:function () {
if (sys.ie) {! This.isfocus && this.iframe.contentWindow.focus ();
This.rang = This.ed.selection.createRange ();
}
This.lightbox.Show ();
if (sys.ie) This.rang = This.ed.selection.createRange ();
if (!this.tablepopup) {
var self = this;
This.tablepopup = new Popoup ({
Width: "300px",
Title: "Insert Table"
});
This.tablepopup.pos ();
$$ (This.tablepopup.container, "div") [1].innerhtml = ' <div style= ' margin-left:30px; margin-top:7px; ' > Line number: <input style= ' width:50px; height:13px ' type= ' text '/> column number: <input style= ' width:50px;height:13px ' type= ' text '/></div><div style = ' margin-left:30px; margin-top:7px; ' > Width of the table: <input style= ' width:50px; height:13px ' type= ' text '/> px</div><div style= ' margin-left:30px; margin-top:7px; ' > table Row Height: <input style= ' width:50px; height:13px ' type= ' text '/> px<div style= ' text-align:center; margin-left:30px; margin-top:7px; ' ><img src= ' http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif ' > <img src= ' http:// Album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif ' ></div> '
var o = $$ (this.tablepopup.container, "input");
This.tablepopup.elm = [o[0], o[1], o[2], o[3], $$ (This.tablepopup.container, "img") [0], $$ (This.tablepopup.container, " IMG ") [1]];
AddListener (this.tablepopup.elm[4], ' click ', Bind (this, this.) Execa, NULL, "createtable"));
AddListener (this.tablepopup.elm[5], ' click ',
function () {
Self.lightbox.Close ();
Self.tablepopup.Close ();
});
}
else with (This.tablepopup) {
POS ();
Show ();
Elm[0].focus ();
}
This. Fpop = Bind (this, this. Hide);
AddListener (This.ed, ' click ', this. FPOP);
AddListener (document, ' MouseDown ', this. FPOP);
},
Hide:function (o) {
This.facebgpopup && (This.facebgpopup.style.display = "none");
This.fontsizepopup && (This.fontsizepopup.style.display = "none");
This.fontnamepopup && (This.fontnamepopup.style.display = "none");
This.fontcolorpopup && (This.fontcolorpopup.style.display = "none");
RemoveListener (This.ed, ' click ', this. FPOP);
RemoveListener (document, ' MouseDown ', this. FPOP);
},
Bubble:function (e) {
if (sys.ie) {
E.cancelbubble = True
} else {
E.stoppropagation ()
}
},
Execa:function (num, stamp) {
var exec = {
Fontname:function () {
This.fontnamepopup.style.display = "None";
This.ed.execCommand (' FontName ', false, num);
},
Fontsize:function () {
This.fontsizepopup.style.display = "None";
This.ed.execCommand ("FontSize", False, num + 1)
},
Fontcolor:function () {
This.fontcolorpopup.style.display = "None";
This.ed.execCommand ("ForeColor", false, num);
},
Createlink:function () {
This.lightbox.Close ();
This. Linkpopoup.close ();
if (this. Linkpopoup.elm[0].value = = "") return;
if (sys.ie) {
This.rang.execCommand ("Createlink", false, this.) Linkpopoup.elm[0].value);
This.rang.parentElement (). target = "_blank";
}
else {
This.ed.execCommand ("Createlink", false, this.) Linkpopoup.elm[0].value);
This.rang = This.iframe.contentWindow.getSelection (). Getrangeat (0);
This.rang.commonAncestorContainer.parentNode.target = "_blank";
}
},
Insertimage:function () {
This.lightbox.Close ();
This. Imagepopoup.close ();
if (this. Imagepopoup.elm[0].value = = "") return;
Sys.ie? This.rang.execCommand ("Insertimage", false, this.) Imagepopoup.elm[0].value): This.ed.execCommand ("Insertimage", false, this. Imagepopoup.elm[0].value);
},
Expression:function () {
This.facebgpopup.style.display = "None";
Sys.ie && (This.iframe.contentWindow.focus ());
This.ed.execCommand ("Insertimage", false, num);
},
Createtable:function () {
This.lightbox.Close ();
This.tablepopup.Close ();
var o = This.tablepopup.elm,
p = null;
if (sys.ie) {
This.rang.execCommand ("Insertimage", False, "yun_qi_img/xxxxx.gif");
p = this.rang.parentElement ();
}
else {
This.ed.execCommand ("Insertimage", False, "yun_qi_img/xxxxx.gif");
p = this.iframe.contentWindow.getSelection (). Getrangeat (0). Commonancestorcontainer;
}
var tab = Createtab (O[0].value, O[1].value,
Function (tab) {
Attr (tab, {
cellpadding:0,
Cellspacing:1,
border:0,
bgcolor: "#CCCCCC",
Width:o[2].value
});
},
Null
function (I, J, TD) {
Td.height = O[3].value;
Td.width = O[2].value/o[1].value;
Td.style.backgroundColor = "#FFFFFF"
},
This.ed);
var IMGs = p.getelementsbytagname ("img");
for (var i = 0, L = p.childnodes.length i < l; i++) {
if (imgs[i].src = = "Yun_qi_img/xxxxx.gif") {
P.replacechild (tab, Imgs[i])
}
}
P.insertbefore (this.ed.createElement ("BR"), tab.nextsibling);
}
};
Bind (this, Exec[stamp]) ();
}
});
var popoup = new Class ({
Options: {
Width: "200px",
Title: "Heading"
},
Initialize:function (options) {
This.container = Create ("div", document.body);
Extend (this.options, Options);
This.title = This.options.title;
This.container.className = "PP";
This.container.style.width = This.options.width;
This.container.innerHTML = "<div class= ' ppt ' ><span style= ' margin-left:8px; ' ></span></div><div style= ' Height:auto; Width:auto; padding:7px; Background-color: #FFFFFF ' ></div> ';
THIS.W = This.container.offsetWidth;
This.h = This.container.offsetHeight;
$$ (This.container, "span") [0].innerhtml = This.title;
},
Pos:function () {
var str = "Left:" + (Math.max (document.documentElement.scrollWidth, Document.documentElement.clientWidth)-THIS.W)/2 + "Px;top:" + (Math.min (document.documentElement.scrollHeight, Document.documentElement.clientHeight)-this.h)/2 + DOCUMENT.DOCUMENTELEMENT.SCROLLTOP) + "px"
CSS (This.container, str);
},
Show:function () {
This.container.style.display = "";
},
Close:function () {
This.container.style.display = "None";
}
})
var LightBox = {
Obj:null,
Config: {
Color: "#fff",
OPACITY:80,
Zindex:5
},
Init:function (options) {
Extend (this.config, Options | | {});
Extend (this, this.config);
Delete This.config;
This.obj = Document.body.insertBefore (document.createelement ("div"), document.body.childnodes[0]);
var str = "Display:none; Z-index: "+ This.zindex +"; Left:0px;top:0px;position:fixed;width:100%;height:100%;background-color: "+ this. Color + (sys.ie? "; Filter:alpha (opacity:" + this.) Opacity + ")": "; Opacity:" + this. OPACITY/100);
CSS (This.obj, str);
if (SYS.IE6) {
This.obj.style.position = "absolute";
var _self = this;
This._resize = function () {
_self.obj.style.width = Math.max (Document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px" ;
_self.obj.style.height = Math.max (Document.documentElement.scrollHeight, document.documentElement.clientHeight) + " PX ";
};
This.obj.innerHTML = ' <iframe style= ' Position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha ( opacity=0); " ></iframe> ';
}
return this;
},
Show:function () {
if (SYS.IE6) {
This._resize ();
AddListener (window, "resize", this._resize);
}
This.obj.style.display = "block";
},
Close:function () {
This.obj.style.display = "None";
if (sys.ie6) RemoveListener (window, "resize", lightbox._resize);
}
}
Window.onload = function () {
var data = [{
Class: "Span0",
Hover: "Span0_hover",
Title: "Bold",
Action: "Exec",
Args: "Bold"
},
{
Class: "Span1",
Hover: "Span1_hover",
Title: "Italic",
Action: "Exec",
Args: "Italic"
},
{
Class: "Span2",
Hover: "Span2_hover",
Title: "Underline",
Action: "Exec",
Args: "Underline"
},
{
Class: "Span3",
Hover: "Span3_hover",
Title: "Font Size",
Action: "FontSize",
Args:null
},
{
Class: "Span4",
Hover: "Span4_hover",
Title: "Font",
Action: "FontName",
Args:null
},
{
Class: "Span5",
Hover: "Span5_hover",
Title: "Text Color",
Action: "FontColor",
Args:null
},
{
Class: "Span6",
Hover: "Span6_hover",
Title: "Insert Link",
Action: "Createlink",
Args:null
},
{
Class: "Span7",
Hover: "Span7_hover",
Title: "Clipping",
Action: "Exec",
Args: "Cut"
},
{
Class: "Span8",
Hover: "Span8_hover",
Title: "Copy",
Action: "Exec",
Args: "Copy"
},
{
Class: "Span9",
Hover: "Span9_hover",
Title: "Left-aligned",
Action: "Exec",
Args: "Justifyleft"
},
{
Class: "Span10",
Hover: "Span10_hover",
Title: "Center aligned",
Action: "Exec",
Args: "Justifycenter"
},
{
Class: "Span11",
Hover: "Span11_hover",
Title: "Align Right",
Action: "Exec",
Args: "Justifyright"
},
{
Class: "Span12",
Hover: "Span12_hover",
Title: "Bullets",
Action: "Exec",
Args: "Insertunorderedlist"
},
{
Class: "Span13",
Hover: "Span13_hover",
Title: "Number",
Action: "Exec",
Args: "Insertorderedlist"
},
{
Class: "Span14",
Hover: "Span14_hover",
Title: "Insert Table",
Action: "AddTable",
Args:null
},
{
Class: "Span15",
Hover: "Span15_hover",
Title: "Reduce Indent",
Action: "Exec",
Args: "Outdent"
},
{
Class: "Span16",
Hover: "Span16_hover",
Title: "Increase Indent",
Action: "Exec",
Args: "Indent"
},
{
Class: "Span17",
Hover: "Span17_hover",
Title: "Clear Style",
Action: "Exec",
Args: "Removeformat"
},
{
Class: "Span18",
Hover: "Span18_hover",
Title: "Insert Picture",
Action: "Insertimage",
Args:null
},
{
Class: "Span19",
Hover: "Span19_hover",
Title: "Insert Expression",
Action: "Expression",
Args:null
},
{
Class: "Span20",
Hover: "Span20_hover",
Title: "Automatic Typesetting",
Action: "Layout",
Args:null
}];
New Editer (' SS '), data, Lightbox.init ());
}
</script>
</body
</html>
