|
|
|
|
移动端

不到200行JavaScript代码如何实现富文本编辑器

前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小。而项目最核心的文件 pell.js 只有130行,即使加上其它部分,总的 js 数量也不到200行。这引起了我的兴趣,决定看看它的源码是如何做到这一点的。

作者:佚名来源:前端大全|2018-01-05 14:48

年前最后一场技术盛宴 | 1月27日与京东、日志易技术大咖畅聊智能化运维发展趋势!


不到200行JavaScript代码如何实现富文本编辑器

前段时间在寻找一些关于富文本编辑器的资料,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小。而项目最核心的文件 pell.js 只有130行,即使加上其它部分,总的 js 数量也不到200行。这引起了我的兴趣,决定看看它的源码是如何做到这一点的。

项目的主要代码在 pell.js 文件中,其结构很简单,主要功能的实现依赖于以下的几个部分

  • actions 对象
  • exec() 函数
  • init() 函数

Document.execCommand()

先从最简单的部分看起, exec() 函数只有下面三行:

  1. export const exec = (command, value = null) => { 
  2.  
  3.     document.execCommand(command, false, value); 
  4.  
  5. }; 

它将 document.execCommand() 进行了一个简单的包装,Document.execCommand() 就是这个编辑器的核心,其语法如下

  1. bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 
  • aCommandName 是表示想执行的命令的字符串,比如:加粗 ‘bold’,创建链接 ‘createLink’,改变字体大小 ‘fontSize’ 等等
  • aShowDefaultUI 是否显示默认的用户界面
  • aValueArgument 有些命令需要额外的输入,如插入图片、链接时需要给出地址

注:经过我的试验,在 Chrome 下改变 aShowDefaultUI 的值并未发现影响,这个 stackoverflow 的问题中提到这是一个来自于旧版 IE 的参数,所以这里设置为默认的 false 即可。

actions 对象

文件中定义了一个名为 actions 的对象,对应的是下图工具栏上的这一行按钮, actions 中的每个子对象都保存了一个按钮的属性。

部分代码:

  1. const actions = { 
  2.  
  3.     bold: { 
  4.  
  5.         icon: '<b>B</b>'
  6.  
  7.         title: 'Bold'
  8.  
  9.         result: () => exec('bold'
  10.  
  11.     }, 
  12.  
  13.     italic: { 
  14.  
  15.         icon: '<i>I</i>'
  16.  
  17.         title: 'Italic'
  18.  
  19.         result: () => exec('italic'
  20.  
  21.     }, 
  22.  
  23.     underline: { 
  24.  
  25.         icon: '<u>U</u>'
  26.  
  27.         title: 'Underline'
  28.  
  29.         result: () => exec('underline'
  30.  
  31.     }, 
  32.  
  33.     // … 
  34.  

这段代码中显示了名为 bold,italic,underline 的三个对象属性,对应于工具栏中前方的加粗、斜体、下划线按钮,可以看出它们的结构是相同的,都有下列三个属性:

  • icon: 如何在工具栏中显示
  • title: 就是 title 啦
  • result: 一个函数,会赋给按钮作为点击事件,调用之前所提到的 exec() 函数来对文本进行操作

现在已有了 actions 对象,那么如何使用它呢?这就要看看 init() 函数了,它会根据一定的规则从 actions 对象中选出元素组成一个数组,数组的每一项都会生成一个按钮。下面代码中的 settings.actions 即为此数组,其中的每个元素都对应一个显示在工具栏上的按钮。settings.actions 的生成规则会在后面进行解释。

  1. // pell.js 中的 init() 函数 
  2.  
  3. settings.actions.forEach(action => { 
  4.  
  5.     // 新建一个按钮元素 
  6.  
  7.     const button = document.createElement('button'
  8.  
  9.     // 给按钮加上 css 样式 
  10.  
  11.     button.className = settings.classes.button 
  12.  
  13.     // 把 icon 属性作为内容显示出来 
  14.  
  15.     button.innerHTML = action.icon 
  16.  
  17.     button.title = action.title 
  18.  
  19.     // 把 result 属性赋给按钮作为点击事件 
  20.  
  21.     button.onclick = action.result 
  22.  
  23.     // 将创建的按钮添加到工具栏上 
  24.  
  25.     actionbar.appendChild(button) 
  26.  
  27. }) 

这样数组中的每个元素就都生成了一个工具栏上的按钮了。

init() 初始化函数

想使用 pell 编辑器时,只要调用 init() 函数来初始化一个编辑器即可。它接收一个 setting 对象作为参数,其中包含这样的一些属性:

  • element: 编辑器的 DOM 元素
  • styleWithCSS: 设置为 true 时,将会用 代替
  • actions
  • onChange

其中最重要的是 actions,它是一个数组,包含了你想在工具栏显示的按钮列表。

actions 数组中可以有这几种元素:

  • 一个字符串
  • 一个有 name 属性的对象
  • 一个对象,没有 name 属性,但有生成一个按钮的必需属性 icon,result 等

在 init() 函数中会把这个 actions参数 和 pell.js 中定义的 actions对象组合起来,可以将 actions 对象当作一个默认设置,看以下代码:

  1. actions: [ 
  2.  
  3.   'bold'
  4.  
  5.   'underline'
  6.  
  7.   'italic'
  8.  
  9.   { 
  10.  
  11.     name'image'
  12.  
  13.     result: () => { 
  14.  
  15.       const url = window.prompt('Enter the image URL'
  16.  
  17.       if (url) window.pell.exec('insertImage', ensureHTTP(url)) 
  18.  
  19.     } 
  20.  
  21.   }, 
  22.  
  23.   // ... 
  24.  

如果参数对象 setting 中不包含 actions 数组, 则会默认使用之前定义的 actions 对象来初始化。

init() 函数里还有一个重要的部分,就是创建一个可编辑区域,这里创建了一个 div 元素,将其 contentEditable 属性设为 true,从而可以在这里使用之前提到的 document.execCommand() 命令了。

  1. // 创建编辑区域的元素 
  2.  
  3. settings.element.content = document.createElement('div'
  4.  
  5. // 让 div 成为可编辑状态 
  6.  
  7. settings.element.content.contentEditable = true 
  8.  
  9. settings.element.content.className = settings.classes.content 
  10.  
  11. // 当用户输入时,更新页面的相应部分 
  12.  
  13. settings.element.content.oninput = event => 
  14.  
  15.     settings.onChange(event.target.innerHTML) 
  16.  
  17. settings.element.content.onkeydown = preventTab 
  18.  
  19. settings.element.appendChild(settings.element.content) 

流程整理

最后以“插入链接”为例来梳理下整个编辑器的流程:

一、在调用 init() 函数时,在参数对象的 action 数组中加入以下一项

  1.  
  2.     name'link'
  3.  
  4.     result: () => { 
  5.  
  6.         const url = window.prompt('Enter the link URL'
  7.  
  8.         if (url) window.pell.exec('createLink', ensureHTTP(url)) 
  9.  
  10.     } 
  11.  

二、在 init() 的运行过程中,会检查已定义的 actions 对象中是否有 link 这个属性。经检查属性确实存在

  1. link: { 
  2.  
  3.     icon: '🔗'
  4.  
  5.     title: 'Link'
  6.  
  7.     result: () => { 
  8.  
  9.         const url = window.prompt('Enter the link URL'
  10.  
  11.         if (url) exec('createLink', url) 
  12.  
  13.     } 
  14.  

因为传入的参数中有 result 这一项,所以用传入的 result 来代替 link 对象中的默认值,然后将修改过的 link 对象放入 settings.actions 数组中。

三、对 settings.actions 数组进行一次迭代来生成工具栏,link 对象作为其中的一项生成了一个“插入链接”的按钮。result 属性成为其点击事件。

四、点击“插入链接”的按钮后,会让你输入一个 url,然后调用 exec('createLink', url) 在编辑区域插入该链接。

编辑器其它按钮的功能流程也类似。

这样 Pell 编辑器的大部分内容就讲解完毕了,剩余部分还需要自己去看源码。毕竟项目的代码不长,以此作为文本编辑器的入门倒不错。

【编辑推荐】

  1. 2018年最值得关注的JavaScript趋势
  2. 很全很全的JavaScript模块讲解,看了绝不后悔!
  3. 关注JavaScript的成本
  4. 19个JavaScript有用的简写技术
  5. 前端真的能做到彻底权限控制吗?
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网管员成长手记——网络组建、配置与应用

本书主要以“网管员的成长经历”为线索展开,虚拟出一个“新手”网管员的工作和学习环境,将网管员的成长分为4个阶段,以“网管入职充电→...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊