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

写在前面：

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

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

正文开始：

index.html:

 <!DOCTYPE html>

 <html>

     <head>

     <title> 捉妖菌のEditor </title>

         <link href="index.css" rel="stylesheet">

         <script type="text/javascript" src="index.js"></script>

     </head>

     <body>

         <div id="toolbar">

             <span>Size:</span>

             <select id="size">

                 <option value="3">Tiny</option>

                 <option value="4">Small</option>

                 <option value="5">Normal</option>

                 <option value="6">Big</option>

                 <option value="7">Large</option>

             </select>

             &nbsp;

             <span>Color:</span>

             <select id="color">

                 <option value="black" style="color:black">Black</option>

                 <option value="gray" style="color:gray">Gray</option>

                 <option value="brown" style="color:brown">Brown</option>

                 <option value="red" style="color:red">Red</option>

                 <option value="pink" style="color:pink">Pink</option>

                 <option value="yellow" style="color:yellow">Yellow</option>

                 <option value="orange" style="color:orange">Orange</option>

                 <option value="blue" style="color:blue">Blue</option>

                 <option value="Green" style="color:green">Green</option>

             </select>

             &nbsp;

             <span><strong>B</strong></span>

             <input type="checkbox" id="bold">

             &nbsp;

             <span><i>I</i></span>

             <input type="checkbox" id="italic">

             &nbsp;

             <span style="text-decoration:underline">U</span>

             <input type="checkbox" id="underline">

         </div>

         <div>

             <input type="button" value="Submit" id="submit">

             <input type="button" value="Edit" id="edit">

         </div>

         <div id="editor" class="editable"></div>

     </body>

 </html>

index.css:

 .editable, .display {

     resize: vertical;

     overflow: auto;

     border: 1px solid silver;

     border-radius: 5px;

     min-height: 400px;

     padding: 1em;

     margin-top: 20px;

 }

 body {

     font-size: 13pt;

     font-family: "Microsoft Yahei", Georgia, Serif;

 }

 #submit, #edit {

     position: absolute;

     top: 22px;

     right: 20px;

     height: 30px;

 }

 #edit {

     display: none;

 }

 #toolbar {

     margin-top: 20px;

     border: 1px solid silver;

     padding: 5px;

     background-color: #F2F2F2;

     border-radius: 5px;

 }

 .editable {

     box-shadow: inset 0 0 10px silver;

 }

 .display {

     box-shadow: 0px;

 }

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

index.js:

 $ = function(id) { return document.getElementById(id); };

 $$ = function(tag) { return document.getElementsByTagName(tag); };

 window.onload = function() {

     $('editor').contentEditable = true;

     $('size').onchange = function() {

         var s = parseInt($('size').value);

         $('editor').focus();

         document.execCommand('FontSize', false, s);

     }

     $('color').onchange = function() {

         $('editor').focus();

         document.execCommand('ForeColor', false, $('color').value);

     };

     $('bold').onchange = function() {

         $('editor').focus();

         document.execCommand('Bold');

     };

     $('italic').onchange = function() {

         $('editor').focus();

         document.execCommand('Italic');

     };

     $('underline').onchange = function() {

         $('editor').focus();

         document.execCommand('Underline');

     };

     $('submit').onclick = function() {

         $('editor').contentEditable = false;

         $('toolbar').style.visibility = 'hidden';

         $('edit').style.display = 'block';

         $('submit').style.display = 'none';

         $('editor').className = 'display';

     }

     $('edit').onclick = function() {

         $('editor').contentEditable = true;

         $('toolbar').style.visibility = 'visible';

         $('edit').style.display = 'none';

         $('editor').className = 'editable';

         $('submit').style.display = 'block';

     }

 };

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

最后上一张测试图：

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

javascript 简易文本编辑器的更多相关文章

  1. JavaScript 实现文本编辑器

    JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...

  2. 10个免费的javascript富文本编辑器（jQuery and non-jQuery）

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

  3. Javascript富文本编辑器

    分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...

  4. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  5. C++ mfc 简易文本编辑器 遇到的一些问题

    [题目40]简易文本编辑器. 设计一个简易的文本编辑器. 设计要求: (1) 具有图形菜单界面: (2) 查找,替换(等长,不等长),插入(插串,文本块的插入).文本块移动(行块,列块移动),删除; ...

  6. JavaScript 富文本编辑器

    WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ...

  7. Java实现"命令式"简易文本编辑器原型

    源自早先想法, 打算从界面方向做些尝试. 找到个简单文本编辑器的实现: Simple Text Editor - Java Tutorials. 原本的菜单/按钮界面如下. 包括基本功能: 新建/打开 ...

  8. AUTOGUI生成的一个简易文本编辑器

    ; Generated by AutoGUI #SingleInstance Force #NoEnv SetWorkingDir %A_ScriptDir% SetBatchLines - #Inc ...

  9. 小伙伴们惊呆了！10行 JavaScript 实现文本编辑器

    最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等. 您可能感兴趣的相关文章 分 ...

随机推荐

  1. Umbraco学习2------数据类型

    一.基础概念 在使用Umbraco这类CMS制作网站之前,先要搞清楚的是,和概念中网站制作的区别. 暂时忘掉所谓的ADO.NET存储.忘掉ASP.NET.忘掉多层架构什么的. 只需要关注:要显示什么. ...

  2. QML开源游戏

    http://google.github.io/VoltAir/doc/main/html/index.htmlhttp://blog.qt.io/blog/2010/02/26/qt-box2d-i ...

  3. CCNA实验(6) -- VLAN & SPT

    交换机的作用主要有两个:1.维护CAM(ContextAddress Memory)表,该表是MAC地址和交换机端口的映射表2.根据CAM进行数据帧的转发 交换机对数据帧的处理有三种:1.Forwar ...

  4. 第八届河南省赛G.Interference Signal（dp）

    G.Interference Signal Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 35  Solved: 17 [Submit][Status ...

  5. hdu 1507 Largest Rectangle in a Histogram 动态规划计算最大面积

    记录动态规划dpl,dpr,分辨记录i左面的比i大的,右面比i大的,然后(dpr[i]-dpl[i]+1)*h[i]得出长度 动态转移方程while(temp>1 && h[te ...

  6. Android studio 开发在真机测试

    真机测试 首先按照这设置android studio:   http://jingyan.baidu.com/article/fea4511a75d627f7ba912540.html 2.打开and ...

  7. SQL Server 动态行转列(轉載)

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 方法一:使用拼接SQL,静态列字段; 方法二:使用拼接SQL, ...

  8. The introduction to Web.config of ASP.NET #Reprinted#

    花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <? ...

  9. jQuery 层级选择器 + keyCode

    层次选择器 如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择. 层次选择器规则如下: 层次选择器 选 择 器 描 述 返 ...

  10. VC编程中如何设置对话框的背景颜色和静态文本颜色

    晚上编一个小程序,涉及到如何设置对话框的背景颜色和静态文本颜色.这在VC6.0中本来是一句话就搞定的事.在应用程序类中的InitInstance()函数添加: //设置对话框背景和文本颜色 SetDi ...