• 热门专题

javascript 简易文本编辑器

作者:捉妖菌  发布日期:2015-03-23 21:19:30
Tag标签:编辑器  简易  文本  
  • 出处: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

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规