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

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

九原网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

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

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

Document.execCommand()

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

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

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

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

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

actions 对象

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

部分代码：

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

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

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

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

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

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

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

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

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

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

流程整理

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

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

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

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

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

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

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

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

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

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

名称栏目：不到200行JavaScript代码如何实现富文本编辑器
当前网址：http://www.shufengxianlan.com/qtweb/news20/152670.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站制作知识

同城分类信息

软文发布平台　　 　混凝土搅拌罐车　　 　成都网站制作　　 　企业网站建设　　 　乐山中领科信　　 　黔盛装饰　　 　移动手机网站制作　　 　seo关键词优化　　 　成都小程序制作　　 　柔性防护网　　 　网站seo　　 　成都APP定制开发　　 　APP定制　　 　成都搬家公司　　 　app制作　　 　成都机柜租用　　 　响应式网站设计　　 　成都免费建站　　 　双流做网站　　 　营销型网站建设