// 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 代码实现富文本编辑器的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: