JavaScript 实现文本编辑器

最近，我需要做一个非常基本的网页内容编辑功能。我不想使用 iframe ，我也不想要一个功能特别多的复杂编辑器，只需要很基本的内容编辑功能，例如粗体，斜体，列表，对齐等等。

您可能感兴趣的相关文章

　　用谷歌搜索找了很久，发现所有的插件都是功能太复杂，不是我想要的。所以，我决定我自己来实现需要的编辑功能。刚开始我觉得应该要花费很多的时间，因为我想象内容编辑功能应该是很复杂的。

　　但事实证明，它是如此简单，让我十分惊讶！借助 HTML5 特性，所有的工具都已经可用，所有你需要做的只是配合他们编写一些非常简单的 JavaScript 代码调用就可以了。

　　你需要两样东西，第一是：

1
contenteditable

　　contenteditable 是 HTML 中的一个属性，设置 HTML标签的 contenteditable=“true” 时，即可开启该元素的编辑模式。contenteditable 的作用相当神奇，可以让 div 或整个网页，以及 span 等等元素设置为可编辑。

　　我们最常用的输入文本内容是 input 与 textarea，使用 contenteditable 属性后，可以在div、table、p、span、body等等很多元素中输入内容。如果想要整个网页可编辑，可以在 body 标签内设置 contenteditable。contenteditable 已在 HTML5 标准中得到有效的支持.

　　第二样东西是一个功能特殊的函数：

1
execCommand

　　execCommand 让我们能够对 contenteditable 区域的内容做一些相当复杂的操作。如果你想了解更为详细的内容可以看这里：The Mozilla Docs。

　　从本质上讲， execCommand 有三个参数：

　　Command Name – 命令名称；
　　ShowDefaultUI – 未实现，所以最好设置为 false；
　　ValueArgument – 命令的参数；

　　多数情况下，ValueArgument 可以设置为 null，但有一种情况：当你要设置一行文本的标签的时候（h1，h2，p 等），你需要使用 formatBlock 命令，并把标签放到 ValueArgument 中。

　　现在，事情就很简单了，我们把 exexCommand 要执行的命令放到 data-role 属性中，然后编写简单的 JavaScript 都可以很容易地完成编辑器功能了。核心代码其实就10行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
    $('#editControls a').click(function(e) {
        switch($(this).data('role')) {
            case 'h1':
            case 'h2':
            case 'p':
                document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                break;
            default:
                document.execCommand($(this).data('role'), false, null);
                break;
        }
    })
});

　　完整代码如下：

<!DOCTYPE html>

<html>
    <head>
    <title>Editable WYSIWYG</title>
        <link href="bootstrap.css" rel="stylesheet">
        <link href="font-awesome.css" rel="stylesheet">
        <style>
            #editor {
                resize:vertical;
                overflow:auto;
                border:1px solid silver;
                border-radius:5px;
                min-height:100px;
                box-shadow: inset 0 0 10px silver;
                padding:1em;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="container-fluid">
                <div id='pad-wrapper'>
                    <div id="editparent">
                        <div id='editControls' class='span12' style='text-align:center; padding:5px;'>
                            <div class='btn-group'>
                                <a class='btn' data-role='undo' href='#'><i class='icon-undo'></i></a>
                                <a class='btn' data-role='redo' href='#'><i class='icon-repeat'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='bold' href='#'><b>Bold</b></a>
                                <a class='btn' data-role='italic' href='#'><em>Italic</em></a>
                                <a class='btn' data-role='underline' href='#'><u><b>U</b></u></a>
                                <a class='btn' data-role='strikeThrough' href='#'><strike>abc</strike></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='justifyLeft' href='#'><i class='icon-align-left'></i></a>
                                <a class='btn' data-role='justifyCenter' href='#'><i class='icon-align-center'></i></a>
                                <a class='btn' data-role='justifyRight' href='#'><i class='icon-align-right'></i></a>
                                <a class='btn' data-role='justifyFull' href='#'><i class='icon-align-justify'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='indent' href='#'><i class='icon-indent-right'></i></a>
                                <a class='btn' data-role='outdent' href='#'><i class='icon-indent-left'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='insertUnorderedList' href='#'><i class='icon-list-ul'></i></a>
                                <a class='btn' data-role='insertOrderedList' href='#'><i class='icon-list-ol'></i></a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='h1' href='#'>h<sup>1</sup></a>
                                <a class='btn' data-role='h2' href='#'>h<sup>2</sup></a>
                                <a class='btn' data-role='p' href='#'>p</a>
                            </div>
                            <div class='btn-group'>
                                <a class='btn' data-role='subscript' href='#'><i class='icon-subscript'></i></a>
                                <a class='btn' data-role='superscript' href='#'><i class='icon-superscript'></i></a>
                            </div>
                        </div>
                        <div id='editor' class='span12' style='' contenteditable>
                            <h1>This is a title!</h1>
                            <p>This is just some example text to start us off</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="jquery.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script>
 
            $(function() {
                $('#editControls a').click(function(e) {
                    switch($(this).data('role')) {
                        case 'h1':
                        case 'h2':
                        case 'p':
                            document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                            break;
                        default:
                            document.execCommand($(this).data('role'), false, null);
                            break;
                    }
                     
                })
            });
        </script>
    </body>
</html>

　　

源码下载      在线演示

JavaScript 实现文本编辑器的更多相关文章

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

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

  2. Javascript富文本编辑器

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

  3. javascript 在线文本编辑器

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

  4. javascript 简易文本编辑器

    转载请注明出处:http://www.cnblogs.com/enzozo/p/4357031.html 写在前面: 本文本编辑器具备功能:选择字体大小.颜色.加粗.斜体.下划线.点击 'Submit ...

  5. JavaScript 富文本编辑器

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

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

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

  7. 10行 JavaScript 实现文本编辑器

    背景 我们平时用到的浏览器编辑器功能都会比较多,实现的代码逻辑也会非常复杂,往往是作为一个单独插件被引入进来的.但是,现在我只需要一个很基本的内容输入内容编辑的功能,如:粗体.斜体.列表.对齐等.那要 ...

  8. Thinkphp 文本编辑器

    文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹 平时使用时主要用到获取内容和写入内容两个按钮 获取内容: <!DOCTYPE html PUBLI ...

  9. 富文本编辑器TinyMCE

    最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/1 ...

随机推荐

  1. js 正则练习之语法高亮

    原文:js 正则练习之语法高亮 学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解.今天就分析下 次碳酸钴 和 Barret Lee 语法高亮实现. 先 ...

  2. ArcEngine载入中SDE问题栅格数据

    当直接加载矢量数据到IFeatureWorkspace接口可,但是,在装载门格当要传送的数据IRasterWorkspaceEx接口. 效果如下面的,对可以被添加到双击Globe在. watermar ...

  3. 接口自动化测试：Thrift框架RPC协议客户端开发

    import java.lang.Thread.State;import java.util.Iterator;import java.util.List; import org.apache.thr ...

  4. 初探async await 实现多线程处理

    初探async await 实现多线程处理 这是微软关于Async的介绍:http://msdn.microsoft.com/en-us/library/hh156513.aspx 这是await : ...

  5. .net操作PDF的一些资源(downmoon收集)

    因为业务需要,搜集了一些.net操作pdf的一些资源,特在此分享. 1.如何从 Adobe 可移植文档格式 (PDF) 文件中复制文本和图形 http://support.microsoft.com/ ...

  6. Castle扩展Ibatis.Net

    使用Castle扩展Ibatis.Net,面向接口编程-更优雅的代码 使用Ibatis.Net做项目半年了,甚是喜欢,感觉确实是个简单.轻巧的O/R Mapping框架,特别是将Sql配置在Xml文件 ...

  7. 我的Android 4 学习系列之开始入手：配置开发环境与理解Hello World！

    目录 如何安装Android SDK.创建开发环境和调试项目 移动设计中一些注意事项 使用Android虚拟设备.模拟器和其他开发工具 如何安装Android SDK.创建开发环境和调试项目 下载和安 ...

  8. vi/vim多行注释和取消注释

    多行注释: 1. 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 2. 按大写字母I,再插入注释符,例如// 3. 按esc键 ...

  9. ASP.NET MVC项目

    ASP.NET MVC项目里创建一个aspx视图 先从控制器里添加视图 视图引擎选"ASPX(C#)",使用布局或模板页不要选. 在Views\EAV目录里,生成的aspx是个单独 ...

  10. 基于.NET的微信SDK

    超级懒汉编写的基于.NET的微信SDK   一.前言 特别不喜欢麻烦的一个人,最近碰到了微信开发.下载下来了一些其他人写的微信开发“框架”,但是被恶心到了,实现的太臃肿啦. 最不喜欢的就是把微信返回的 ...