原生API编写简单富文本编辑器002

1. 为功能按钮添加点击事件

我们在index.js 中为所有功能按钮添加点击事件监听，在点击对应按钮时执行相应的原生命令。

window.onload= function() {const btns = document.getElementById('editorBar').getElementsByTagName('li');for (let i=0; iconst btn = btns[i];const command = btn.getAttribute('command');btn.onclick= function() {document.execCommand(command, false, '');};}
};

然后我们回到页面中进行点击，会发现除了重做和撤销，其它按钮都不起作用，哪怕我们在可编辑区域输入文字，选择一段文字，然后点击按钮，也是没有任何效果。（可在1.0.2分支复现）

原因是：

document.execCommand 命令只有使用button元素触发才能生效。

2. 改造HTML

所以，我们改造一下HTML，将按钮全部改为button元素：

 index.html <-->

3. 改造CSS

由于将原来的元素上套了一层button元素，所以样式与我们最初设计的有了出入：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TjMJHt42-1670512440938)(https://gitee.com/hjb2722404/tuchuang/raw/master/img/202203111635140.png)]

我们通过为button元素增加CSS规则来修复：

/**index.css **/.editor-toolbar ul li button {background-color: #fff;border: none;cursor: pointer;
}

4. 改造 JS

我们将点击事件监听加在button上，以代替原来的li上的监听：

// index.js
const btns = document.getElementById('editorBar').getElementsByTagName('button');

然后，我们再在页面可编辑区域输入文本，并点击功能按钮，可以得到以下结果：（可在1.0.3分支上复现）

• 撤销、重做功能正确；
• 复制、剪切、粘贴功能正确（其中粘贴时直接使用Ctrl+v）
• 字体、字号、前景色、背景色、插入链接、取消链接按钮点击无反应
• 加粗、斜体、下划线、删除线、上标、下标、清除格式在有选中文本时执行正确
• 有序列表、无序列表、左对齐、右对齐、居中对齐、两端对齐 、首行缩进对光标所在行起作用
• 插入图片点击后会在光标处添加一个空的img标签，表现在页面上是两个空格

我们看到，上面的测试结果中，还有很多功能是没有反应的，这是因为这些功能都是需要参数的，我们下一节将实现它们。

本系列文章代码可从gitee获取

本节内容在 1.0.2 分支