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

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

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

window.onload= function() {
    const btns = document.getElementById('editorBar').getElementsByTagName('li');
    for (let i=0; i<btns.length; i++) {
        const 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 <-->

<ul>
    <li><button command="undo"><i class="iconfont icon-chexiao" title="撤销"></i></button></li>
    <li><button command="redo"><i class="iconfont icon-zhongzuo" title="重做"></i></button></li>
    <li><button command="copy"><i class="iconfont icon-fuzhi" title="复制"></i></button></li>
    <li><button command="cut"><i class="iconfont icon-jianqie" title="剪切"></i></button></li>
    <li><button command="fontName"><i class="iconfont icon-ziti" title="字体"></i></button></li>
    <li><button command="fontSize"><i class="iconfont icon-zihao" title="字号"></i></button></li>
    <li><button command="bold"><i class="iconfont icon-zitijiacu" title="加粗"></i></button></li>
    <li><button command="italic"><i class="iconfont icon-zitixieti" title="斜体"></i></button></li>
    <li><button command="underline"><i class="iconfont icon-zitixiahuaxian" title="下划线"></i></button></li>
                    <li><button command="strikeThrough"><i class="iconfont icon-zitishanchuxian" title="删除线"></i></button></li>
                    <li><button command="superscript"><i class="iconfont icon-zitishangbiao" title="上标"></i></button></li>
                    <li><button command="subscript"><i class="iconfont icon-zitixiabiao" title="下标"></i></button></li>
                    <li><button command="fontColor"><i class="iconfont icon-qianjingse" title="字体颜色"></i></button></li>
                    <li><button command="backColor"><i class="iconfont icon-zitibeijingse" title="字体背景色"></i></button></li>
                    <li><button command="removeFormat"><i class="iconfont icon-qingchugeshi" title="清除格式"></i></button></li>
                    <li><button command="insertOrderedList"><i class="iconfont icon-youxuliebiao" title="有序列表"></i></button></li>
                    <li><button command="insertUnorderedList"><i class="iconfont icon-wuxuliebiao" title="无序列表"></i></button></li>
                    <li><button command="justifyLeft"><i class="iconfont icon-juzuoduiqi" title="局左对齐"></i></button></li>
                    <li><button command="justifyRight"><i class="iconfont icon-juyouduiqi" title="居右对齐"></i></button></li>
                    <li><button command="justifyCenter"><i class="iconfont icon-juzhongduiqi" title="居中对齐"></i></button></li>
                    <li><button command="justifyFull"><i class="iconfont icon-liangduanduiqi" title="两端对齐"></i></button></li>
                    <li><button command="createLink"><i class="iconfont icon-charulianjie" title="插入链接"></i></button></li>
                    <li><button command="unlink"><i class="iconfont icon-quxiaolianjie" title="取消链接"></i></button></li>
                    <li><button command="indent"><i class="iconfont icon-shouhangsuojin" title="首行缩进"></i></button></li>
                    <li><button command="insertImage"><i class="iconfont icon-tupian" title="插入图片"></i></button></li>
                </ul>

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 分支