不到200行 JavaScript 代码实现富文本编辑器的方法


Posted in Javascript onJanuary 03, 2018

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

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

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

Document.execCommand()

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

export const exec = (command, value =null) => {
  document.execCommand(command, false, value);
};

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

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

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

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

actions 对象

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

部分代码:

const actions = {
  bold: {
    icon: '<b>B</b>',
    title: 'Bold',
    result: ()=> exec('bold')
  },
  italic: {
    icon: '<i>I</i>',
    title: 'Italic',
    result: ()=> exec('italic')
  },
  underline: {
    icon: '<u>U</u>',
    title: 'Underline',
    result: ()=> exec('underline')
  },
  // …
}

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

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

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

// pell.js 中的 init() 函数
settings.actions.forEach(action=> {
  // 新建一个按钮元素
  const button = document.createElement('button')
  // 给按钮加上 css 样式
  button.className = settings.classes.button
  // 把 icon 属性作为内容显示出来
  button.innerHTML = action.icon
  button.title = action.title
  // 把 result 属性赋给按钮作为点击事件
  button.onclick = action.result
  // 将创建的按钮添加到工具栏上
  actionbar.appendChild(button)
})

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

init() 初始化函数

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

  • element : 编辑器的 DOM 元素
  • styleWithCSS : 设置为 true 时,将会用 <span style="font-weight: bold;"></span> 代替 <b></b>
  • actions
  • onChange

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

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

  • 一个字符串
  • 一个有 name 属性的对象
  • 一个对象,没有 name 属性,但有生成一个按钮的必需属性 icon , result 等
actions: [
 'bold',
 'underline',
 'italic',
 {
  name: 'image',
  result: ()=> {
   const url = window.prompt('Enter the image URL')
   if (url) window.pell.exec('insertImage', ensureHTTP(url))
  }
 },
 // ...
]

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

// pell.js 中的 init() 函数
settings.actions = settings.actions
  ? settings.actions.map(action=> {
    if (typeof action === 'string') return actions[action]
    // 如果参数中传入的 action 已经在默认设置中存在,用传入的参数覆盖默认设置
    else if (actions[action.name]) {
      return { ...actions[action.name], ...action }
    }
    return action
  })
  : Object.keys(actions).map(action=> actions[action])

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

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

// 创建编辑区域的元素
settings.element.content = document.createElement('div')
// 让 div 成为可编辑状态
settings.element.content.contentEditable = true
settings.element.content.className = settings.classes.content
// 当用户输入时,更新页面的相应部分
settings.element.content.oninput = event=> 
  settings.onChange(event.target.innerHTML)
settings.element.content.onkeydown = preventTab
settings.element.appendChild(settings.element.content)

流程整理

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

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

{
  name: 'link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) window.pell.exec('createLink', ensureHTTP(url))
  }
}

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

link: {
  icon: '',
  title: 'Link',
  result: ()=> {
    const url = window.prompt('Enter the link URL')
    if (url) exec('createLink', url)
  }
}

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

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

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

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

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

总结

以上所述是小编给大家介绍的不到200行 JavaScript 代码实现富文本编辑器的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 #Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 #Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 #Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 #Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 #Javascript
angularjs实现分页和搜索功能
Jan 03 #Javascript
vue引入ueditor及node后台配置详解
Jan 03 #Javascript
You might like
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
让焦点自动跳转
2006/07/01 Javascript
javascript数组组合成字符串的脚本
2021/01/06 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python 时间处理datetime实例
2008/09/06 Python
Python实现批量下载文件
2015/05/17 Python
python处理大数字的方法
2015/05/27 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python三大神器之fabric使用教程
2019/06/10 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
临床医学大学生求职信
2013/09/28 职场文书
优秀教师主要事迹
2014/02/01 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
办公室主任岗位职责
2015/01/31 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python