资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/10行 JavaScript 实现文本编辑器

10行 JavaScript 实现文本编辑器

laznrbfe / 3517人阅读

摘要：但是，现在我只需要一个很基本的内容输入内容编辑的功能，如粗体斜体列表对齐等。的作用相当神奇，可以让或整个网页，以及等等元素设置为可编辑。现在，事情就很简单了，我们把要执行的命令放到属性中，然后编写简单的都可以很容易地完成编辑器功能了。

背景

我们平时用到的浏览器编辑器功能都会比较多，实现的代码逻辑也会非常复杂，往往是作为一个多带带插件被引入进来的。但是，现在我只需要一个很基本的内容输入内容编辑的功能，如：粗体、斜体、列表、对齐等。那要怎么办，直接引用个插件太臃肿了。

借助 HTML5 特性，所有的工具都已经可用，所有你需要做的只是配合他们编写一些非常简单的 JavaScript 代码调用就可以了。

开撸

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

contenteditable

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

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

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

execCommand

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

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

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

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

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

$(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;
        }
    })
});

完整代码：

  2.     
  3.     <span class="hljs-attr">Editable</span> <span class="hljs-string">WYSIWYG</span>
  4.         
  5.         
  6.         
  7.     
  8.     
  9.         
  10.             
  11.                 
  12.                     
  13.                         
  14.                             
  15.                                 
  16.                                 
  17.                             
  18.                             
  19.                                 Bold
  20.                                 Italic
  21.                                 U
  22.                                 abc
  23.                             
  24.                             
  25.                                 
  26.                                 
  27.                                 
  28.                                 
  29.                             
  30.                             
  31.                                 
  32.                                 
  33.                             
  34.                             
  35.                                 
  36.                                 
  37.                             
  38.                             
  39.                                 h1
  40.                                 h2
  41.                                 p
  42.                             
  43.                             
  44.                                 
  45.                                 
  46.                             
  47.                         
  48.                         
  49.                             
    This is a title!
  50.                             
    This is just some example text to start us off
  51.                         
  52.                     
  53.                 
  54.             
  55.         
  56.         
  57.         
  58.         
  59.     
  60.

代码下载

原文：http://www.admin10000.com/doc...

云服务器 GPU云服务器 富文本编辑器 linux文本编辑器 富文本web编辑器 php使用文本编辑器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81699.html

相关文章

  • 10行 JavaScript 实现文本编辑器

    摘要：但是，现在我只需要一个很基本的内容输入内容编辑的功能，如粗体斜体列表对齐等。的作用相当神奇，可以让或整个网页，以及等等元素设置为可编辑。现在，事情就很简单了，我们把要执行的命令放到属性中，然后编写简单的都可以很容易地完成编辑器功能了。 背景 我们平时用到的浏览器编辑器功能都会比较多，实现的代码逻辑也会非常复杂，往往是作为一个单独插件被引入进来的。但是，现在我只需要一个很基本的内容输入内...

    YJNldm 评论0 收藏0

  • 使用JavaScript和D3.js实现数据可视化

    摘要：它的全称是数据驱动文档，并且它被称为一个互动和动态的数据可视化库网络。我们将使用文本编辑器和浏览器。出于测试目的，建议使用工具来检查和调试和，例如或。使矩形反映数据目前，我们阵列中的所有矩形沿轴具有相同的位置，并且不代表高度方面的数据。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生 发表于云+社区专栏 介绍 D3.js是一个JavaScript库。它的...

    mingde 评论0 收藏0

  • VS Code、ATOM这些开源文本编辑器的代码实现中有哪些奇技淫巧？

    摘要：知乎上也有相关的讨论，开发的下一代编辑器莫非已经定义为上一代编辑器了吗。 这篇是我在知乎的回答，原文在这里：justjavac: VS Code、ATOM这些开源文本编辑器的代码实现中有哪些奇技淫巧？ 研究 V8 比较多，也关注了一下 vscode 和 atom 的性能，每次 vscode、atom 的 change log 我都会看一遍。印象最深的是 vscode 1.14 的一次更...

    adie 评论0 收藏0

  • Top 10 JavaScript编辑器，你在用哪个？

    摘要：在这个编辑器中，和是其中排名靠前的两个。是一个免费的轻量级编辑器和，用于和开发。对于免费的代码编辑器来说，是一个很好的选择。可以安装两个命令行实用程序，用于从启动编辑器，用于管理的软件包。 对于JavaScript程序员来说，目前有很多很棒的工具可供选择。本文将会讨论10个优秀的支持javascript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。为什...

    zombieda 评论0 收藏0

发表评论

登陆后可评论

0条评论

laznrbfe

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<