获取选定的文本，替换它，使用jQuery进行简单的编辑器

Get selected text, replace it, etc. using jQuery for a simple editor

本文关键字：jQuery 编辑器 使用 简单 替换 文本 获取      更新时间：2023-09-26

我正在使用jQuery创建一个小型HTML编辑器。我已经为以下对象创建了自己的按钮图标：

  • 大胆
  • 斜 体 字
  • 下划线
  • 插入超链接
  • 插入图像
  • 无序列表
  • 有序列表

但我不知道如何让它工作。我的想法：

  • 粗体：当用户单击此按钮时，编辑器 box(( 中的选定文本应替换为 <b> ..selected_text.. </b> 。否则，在光标位置插入<b></b>。

  • 斜体：当用户单击此按钮时，编辑器 box(( 中的选定文本应替换为 <i> ..selected_text.. </i> 。否则，在光标位置插入<i></i>。

  • 下划线与上述相同

  • 等。。。。

所以我的问题是，如何从 TEXTAREA 获取所选文本以及如何用标签替换它？还有，如何在光标位置(即在闪烁的行处(插入文本？

这与Stackoverflow编辑器中存在的按钮相同，当您发布一些问题时。(例如，当您选择了文本和未选择文本时，请尝试单击Stackoverflow编辑器中的粗体按钮(

我强烈建议使用JavaScript库，它可以消除使用范围和选择时的跨浏览器差异：Rangy。

跨浏览器的 JavaScript 范围和选择库。它提供了一个简单的基于标准的API，用于在所有主流浏览器中执行常见的DOM Range和Selection任务，从而抽象出Internet Explorer和DOM兼容浏览器之间截然不同的此功能实现。

有关操作<textarea>和<input type="text">元素中的选择，请参阅Rangy命名不佳且苗条的双胞胎项目Rangyinputs。

<小时 />

如何从TEXTAREA获取所选文本以及如何将其替换为标签？

查看 Rangy CSS 类应用模块(以及相关的演示页面(。

相关文章：