javascript 简易文本编辑器

转载请注明出处：http://www.cnblogs.com/enzozo/p/4357031.html

写在前面：

本文本编辑器具备功能：选择字体大小、颜色、加粗、斜体、下划线。点击 'Submit' 后生成预览，再点击 'Edit' 后可继续编辑。

主要利用的是 document.execCommand()指令 和 div的contentEditable属性（值为true或空或inherit时，div中的内容可编辑，为false时不可编辑）。

 

正文开始：

index.html:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <title> 捉妖菌のEditor </title>
 5         <link href="index.css" rel="stylesheet">
 6         <script type="text/javascript" src="index.js"></script>
 7     </head>
 8     <body>
 9         <div id="toolbar">
10             <span>Size:</span>
11             <select id="size">
12                 <option value="3">Tiny</option>
13                 <option value="4">Small</option>
14                 <option value="5">Normal</option>
15                 <option value="6">Big</option>
16                 <option value="7">Large</option>
17             </select>
18             &nbsp;
19 
20             <span>Color:</span>
21             <select id="color">
22                 <option value="black" style="color:black">Black</option>
23                 <option value="gray" style="color:gray">Gray</option>
24                 <option value="brown" style="color:brown">Brown</option>
25                 <option value="red" style="color:red">Red</option>
26                 <option value="pink" style="color:pink">Pink</option>
27                 <option value="yellow" style="color:yellow">Yellow</option>
28                 <option value="orange" style="color:orange">Orange</option>
29                 <option value="blue" style="color:blue">Blue</option>
30                 <option value="Green" style="color:green">Green</option>
31             </select>
32             &nbsp;
33 
34             <span><strong>B</strong></span>
35             <input type="checkbox" id="bold">
36             &nbsp;
37 
38             <span><i>I</i></span>
39             <input type="checkbox" id="italic">
40             &nbsp;
41 
42             <span style="text-decoration:underline">U</span>
43             <input type="checkbox" id="underline">
44         </div>
45         <div>
46             <input type="button" value="Submit" id="submit">
47             <input type="button" value="Edit" id="edit">
48         </div>
49         <div id="editor" class="editable"></div>  
50     </body>
51 </html>

 

index.css:

 1 .editable, .display {
 2     resize: vertical;
 3     overflow: auto;
 4     border: 1px solid silver;
 5     border-radius: 5px;
 6     min-height: 400px;
 7     padding: 1em;
 8     margin-top: 20px;
 9 }
10 
11 body {
12     font-size: 13pt;
13     font-family: "Microsoft Yahei", Georgia, Serif;
14 }
15 
16 #submit, #edit {
17     position: absolute;
18     top: 22px;
19     right: 20px;
20     height: 30px;
21 }
22 
23 #edit {
24     display: none;
25 }
26 
27 #toolbar {
28     margin-top: 20px;
29     border: 1px solid silver;
30     padding: 5px;
31     background-color: #F2F2F2;
32     border-radius: 5px;
33 }
34 
35 .editable {
36     box-shadow: inset 0 0 10px silver;
37 }
38 
39 .display {
40     box-shadow: 0px;
41 }

注：因为div #editor有两种形式：编辑和预览。所以两种模式下，div需呈现出不同的样式，以免使用者产生不解。通过js更改#editor的className即可达到效果。

 

index.js:

 1 $ = function(id) { return document.getElementById(id); };
 2 $$ = function(tag) { return document.getElementsByTagName(tag); };
 3 
 4 window.onload = function() {
 5     $('editor').contentEditable = true;
 6     $('size').onchange = function() {
 7         var s = parseInt($('size').value);
 8         $('editor').focus();
 9         document.execCommand('FontSize', false, s);
10     }
11     $('color').onchange = function() {
12         $('editor').focus();
13         document.execCommand('ForeColor', false, $('color').value);
14     };
15     $('bold').onchange = function() {
16         $('editor').focus();
17         document.execCommand('Bold');
18     };
19     $('italic').onchange = function() {        
20         $('editor').focus();
21         document.execCommand('Italic');
22     };
23     $('underline').onchange = function() {
24         $('editor').focus();
25         document.execCommand('Underline');
26     };
27 
28     $('submit').onclick = function() {
29         $('editor').contentEditable = false;
30         $('toolbar').style.visibility = 'hidden';
31         $('edit').style.display = 'block';
32         $('submit').style.display = 'none';
33         $('editor').className = 'display';
34     }
35     $('edit').onclick = function() {
36         $('editor').contentEditable = true;
37         $('toolbar').style.visibility = 'visible';
38         $('edit').style.display = 'none';
39         $('editor').className = 'editable';
40         $('submit').style.display = 'block';
41     }
42 };

注：document.execCommand指令中，参数一为属性名，第二个参数为true(显示对话框)或false(不显示对话框)，最后一个参数是针对第一个参数的值。

 

最后上一张测试图：

转载请注明出处：http://www.cnblogs.com/enzozo/p/4357031.html

posted @ 2015-03-22 12:43  捉妖菌  阅读(2266)  评论(3)  编辑  收藏  举报