富文本编辑器：轻松清除选中文本样式
保持文档风格一致性，需要快速清除富文本编辑器中选中文本的样式。本文提供一种基于JavaScript的简便方法。
假设您的富文本编辑器包含如下元素：
以下步骤将帮助您一键清除选中文本样式：
-
获取选中文本: 使用
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，具有良好的浏览器兼容性。
