富文本编辑器：轻松清除选中文本样式
保持文档风格一致性，需要快速清除富文本编辑器中选中文本的样式。本文提供一种基于JavaScript的简便方法。
假设您的富文本编辑器包含如下元素：
<div class="test" contenteditable="true"></div>
以下步骤将帮助您一键清除选中文本样式：
获取选中文本: 使用window.getSelection()方法获取当前选中的文本内容。
创建新的文本节点: 创建一个新的
元素，并将选中文本复制到该节点中。
清除样式信息: 将原始文本节点的样式信息应用到新创建的
节点，确保所有样式都被重置。
替换文本: 删除原始选中文本，并将新创建的、样式已清除的
节点插入到相同位置。
完整的JavaScript代码如下：
const selection = window.getSelection();
const newText = document.createElement('p');
newText.appendChild(selection.getRangeAt(0).cloneContents());
newText.style.cssText = selection.getRangeAt(0).commonAncestorContainer.style.cssText; //重置样式
selection.getRangeAt(0).deleteContents();
selection.getRangeAt(0).insertNode(newText);此方法利用浏览器原生getSelection()和Range API，具有良好的浏览器兼容性。
以上就是富文本编辑器如何一键清除选中文字的样式？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
734
收藏
