Home > Developer > JavaScript
Relatively rough and simple. For more information, see. Paste the following content:
This is the main content of the first ppt. I will not post more details about the specific items. If you are interested in these aspects, you can download them. Since the ppt is based on the editor example, here I also attached a simple demo using the execCommand command. The principle of editor can be seen in the demo. The code is attached here:
<! Doctype html>
Copy codeThe Code is as follows:
<Html>
<Head>
<Style type = "text/css">
. Wp {
Width: 500px;
}
. Bar {
Margin-bottom: 8px;
}
. Con {
Border: 2px solid # ccc;
}
. Block {
Overflow: hidden;
Height: 1%;
}
. Controler {
Float: left;
Margin-right: 6px;
Border: 1px solid #999;
Height: 20px;
Width: 20px;
Text-align: center;
Font-size: 14px;
Font-weight: bold;
}
</Style>
</Head>
<Body>
<Script type = "text/javascript">
Var Class = {
Create: function (){
Return function (){
This. init. apply (this, arguments );
}
}
},
H $ = function (I) {return document. getElementById (I )},
$ CE = function (){
Var div = document. createElement ('div ');
Return function (html ){
Div. innerHTML = html;
Var el = div. childNodes [0];
Div. removeChild (el );
Return el;
}
}();
Var Editor = Class. create ();
Editor. prototype = {
Init: function (id ){
Var c = [];
C [0] = ['bold ',' B '];
C [1] = ['italic ',' I '];
This. t = H $ (id );
This. t. style ['display'] = 'none ';
This. I = $ CE ('<iframe frameBorder = "0" width = "500" height = "200"> </iframe> ');
Var wp = $ CE ('<div class = "wp"> </div> '),
Bar = $ CE ('<div class = "bar block"> </div> '),
Con = $ CE ('<div class = "con"> </div> '),
Self = this;
For (var I = 0; I <c. length; I ++ ){
Var btn = $ CE ('<a class = "controler">' + c [I] [1] + '</a> ');
Bar. appendChild (btn );
Btn. onclick = (function (I ){
Return function (){
Self. action (c [I] [0]);
}
}) (I );
If (! + "\ V1") {btn. unselectable = 'on'} // you must set unselectable = 'on' in IE'
}
This. t. parentNode. insertBefore (wp, this. t );
Con. appendChild (this. t );
Con. appendChild (this. I );
Wp. appendChild (bar );
Wp. appendChild (con );
This. e = this. I .content20.doc ument | this. I. contentDocument;
This. e. designMode = 'on ';
This. e. open ();
This. e. close ();
},
Action: function (cmd, val ){
This.e.exe cCommand (cmd, 0, val | null );
}
}
</Script>
<Textarea id = "test"> </textarea>
<Script type = "text/javascript">
New Editor ('test ');
</Script>
</Body>
</Html>
You can test it locally for demonstration. This is a simple example and provides a train of thought.
Download the first ppt: [click here to download tips about js]
[Front-end Architecture History of Alibaba's Chinese site-A Brief Discussion]
The following is part of the ppt:
For more information, see.
File Packaging
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
