原生API编写简单富文本编辑器002
创始人
2024-03-28 01:56:17
0

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

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
苏州离哪个飞机场近(苏州离哪个... 本篇文章极速百科小编给大家谈谈苏州离哪个飞机场近,以及苏州离哪个飞机场近点对应的知识点,希望对各位有...