冰冰的小屋

路漫漫其修远兮,吾将上下而求索

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


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

 

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

但事实证明,它是如此简单,让我十分惊讶!借助 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 和 document.execCommand

从本质上讲, execCommand 有三个参数:

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

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

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

 

完整代码如下:

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注