富文本编辑器如何一键清除选中文字的样式？

富文本编辑器：轻松清除选中文本样式

保持文档风格一致性，需要快速清除富文本编辑器中选中文本的样式。本文提供一种基于JavaScript的简便方法。

假设您的富文本编辑器包含如下元素：

<code class="html"><div class="test" contenteditable="true"></div></code>

以下步骤将帮助您一键清除选中文本样式：

1. 获取选中文本: 使用window.getSelection()方法获取当前选中的文本内容。

2. 创建新的文本节点: 创建一个新的<p></p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/2121"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680148482336.png" alt="AI图像编辑器"> </a> <div class="aritcle_card_info"> <a href="/ai/2121">AI图像编辑器</a> <p>使用文本提示编辑、变换和增强照片</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="AI图像编辑器"> <span>46</span> </div> </div> <a href="/ai/2121" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="AI图像编辑器"> </a> </div> 元素，并将选中文本复制到该节点中。

3. 清除样式信息: 将原始文本节点的样式信息应用到新创建的<p></p>节点，确保所有样式都被重置。

4. 替换文本: 删除原始选中文本，并将新创建的、样式已清除的<p></p>节点插入到相同位置。

完整的JavaScript代码如下：

<code class="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);</code>

此方法利用浏览器原生getSelection()和Range API，具有良好的浏览器兼容性。

以上就是富文本编辑器如何一键清除选中文字的样式？的详细内容，更多请关注php中文网其它相关文章！