zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    [转载]IntelliJ IDEA常用设置
    sql server字段合并逗号隔开
    sql server字段合并逗号隔开
    [转载]Hana 学习资源
    SQL Server数据库实现异地备份
    SQL Server数据库实现异地备份
    SQL Server blocked access to procedure 'sys.xp_cmdshell'
    调用另一个进程,createprocess返回值正确,但被调进程连入口函数都没进入。
    需求做完后,需要拉相关人员确认下结果
    exe崩溃用windbgattach后有宝贵现场,可看程序退出线程等,千万不要清屏
  • 原文地址:https://www.cnblogs.com/enzozo/p/4357031.html
Copyright © 2011-2022 走看看