execCommand 已过时，如何实现富文本编辑器的功能？

由于execCommand已过时，可通过使用开源富文本编辑器、自定义开发富文本编辑器或探索其他浏览器API（如contenteditable结合相关操作）来实现富文本编辑器功能。 以下是具体说明：

• 推荐选择：CKEditor、TinyMCE、Quill 等成熟的开源富文本编辑器是替代execCommand的优质方案。这些编辑器经过长期维护和优化，功能丰富且稳定，支持常见的富文本操作（如加粗、斜体、插入图片、调整格式等）。
• 优势：

  功能全面：内置多种编辑工具，无需从头开发基础功能。

  定制化扩展：通过插件机制或API接口，可轻松实现特定需求（如自定义按钮、集成第三方服务）。

  跨浏览器兼容：已处理不同浏览器的兼容性问题，减少开发成本。

• 示例：以 TinyMCE 为例，只需引入其库文件并初始化编辑器实例，即可快速获得一个功能完善的富文本编辑界面。

• 适用场景：若需完全控制编辑器的行为或实现独特功能，可从头开发。
• 核心步骤：

  基于contenteditable属性：将HTML元素（如div）设置为contenteditable="true"，使其可编辑。

  实现基础功能：

  设置默认样式：通过CSS定义编辑区域的默认字体、颜色、行高等样式。

  操作内容：使用DOM API（如document.execCommand的替代方案）修改文本格式（需注意execCommand已过时，需结合其他方法）。

  调整光标位置：利用Range和Selection API精确控制光标位置，实现插入、删除或格式化操作。

  增强用户体验：

  光标友好性：通过CSS调整光标大小，使其与当前字体匹配。

  工具栏集成：开发自定义工具栏，绑定事件处理函数（如点击“加粗”按钮时修改选中文本的样式）。

• 挑战：需处理浏览器兼容性、性能优化和复杂功能（如撤销/重做）的实现，开发成本较高。

• contenteditable结合相关操作：

  核心机制：contenteditable是HTML标准属性，允许用户直接编辑元素内容。结合DOM操作和事件监听，可实现富文本编辑功能。

  关键API：

  Range和Selection：用于操作文档中的文本范围（如获取选中内容、设置光标位置）。

  document.createRange()：创建新的Range对象，用于定义文本范围。

  window.getSelection()：获取当前选中的内容，便于修改格式或插入新内容。

  示例：实现加粗功能时，可通过Range获取选中文本，为其包裹<strong>标签，而非依赖execCommand。

• 其他API：

  execScript（已废弃）：不推荐使用，仅作历史参考。

  现代替代方案：优先使用标准DOM API（如Element.classList.add()添加样式类）或第三方库（如rangy）简化操作。

• 设置默认内容样式：

  初始时将contenteditable元素的样式设为默认值（如font-family: Arial; font-size: 16px;）。

  若需动态设置样式，可先创建contentEditable="false"的元素，配置样式后改为true。

• 调整光标位置：

  使用Range API定位到目标位置，再通过Selection.addRange()设置光标。

  示例：在插入图片后，将光标移动到图片后方，便于继续编辑。

• 提高光标友好程度：

  通过CSS调整光标大小（如caret-color: auto; font-size: inherit;），确保其与文本匹配。

• 推荐方案：优先选择开源富文本编辑器（如CKEditor或TinyMCE），以快速实现功能并降低维护成本。
• 进阶需求：若需高度定制化，可基于contenteditable和DOM API开发自定义编辑器，但需充分评估开发资源。
• 避免过时API：不再使用execCommand，转而采用标准DOM操作或现代库（如ProseMirror、Slate）实现复杂功能。