脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript 简易文本编辑器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 写在前面：
本文本编辑器具备功能：选择字体大小、颜色、加粗、斜体、下划线。点击 'SubmIT' 后生成预览，再点击 'Edit' 后可继续编辑。
主要利用的是 document.execCommand()指令 和 p的contentEditable属性（值为true或空或inherit时，p中的内容可编辑，为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 <p 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
33
34 <span><strong>B</strong></span>
35 <input type="checkbox" id="bold">
36
37
38 <span><i>I</i></span>
39 <input type="checkbox" id="italic">
40
41
42 <span style="text-decoration:underline">U</span>
43 <input type="checkbox" id="underline">
44 </p>
45 <p>
46 <input type="button" value="Submit" id="submit">
47 <input type="button" value="Edit" id="edit">
48 </p>
49 <p id="editor" class="editable"></p>
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;
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 }
注：因为p #editor有两种形式：编辑和预览。所以两种模式下，p需呈现出不同的样式，以免使用者产生不解。通过js更改#editor的classname即可达到效果。
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(不显示对话框)，最后一个参数是针对第一个参数的值。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-javascript 简易文本编辑器全部内容，希望文章能够帮你解决javascript代码实例教程-javascript 简易文本编辑器所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。