document.selection.createRange

最新推荐文章于 2019-09-29 16:30:25 发布
原创 最新推荐文章于 2019-09-29 16:30:25 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #button #function #html

本文介绍了一个实用的方法，利用document.selection.createRange()实现HTML编辑器的文字加粗等功能。此方法能够根据当前选择的内容返回TextRange对象，并通过execCommand执行如加粗、斜体等操作。

最近在做编辑器，需要对编辑器研究下，发现document.selection.createRange这个挺有用的。

document.selection.createRange方法：

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

一个简单的例子

 

 <html><head><title>document.selection.createRange例子</title></head><body>

<div>请选中这里的部分文字。</div><div><input type="button" value="加粗" onclick="javascript :Bold();" /></div>

<script  language="javascript">

function Bold(){

var bo = document.selection.createRange();

bo.execCommand("Bold");

}</script>

</body></html>

lsfa1234
关注
document.selection.createRange方法与实例
12-11
配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这个不错   就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮忙!!!谢谢 就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮
document.selection.createRange方法
热门推荐
rfb0204421的专栏
04-01 1万+
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 实例一：哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！   实例
document.selection.createRange()
weixin_33796205的博客
09-22 343
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。举例1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona...
document.selection.createRange方法----获取选择对象文本
乐在克里特
03-01 1844
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。 配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。   实例一： &lt;from&gt; &lt;textarea cols=50 rows=15&gt; ...
js document.createRange();
最新发布
09-09
`document.createRange()` 方法用于创建一个新的 `Range` 对象。`Range` 对象表示文档中的一个连续的范围，它可以包含节点和部分文本节点。 ### 使用方法 #### 1. 创建 `Range` 对象 ```javascript var range = ...
const range = document.createRange()的作用是啥
07-30
`const range = document.createRange();` 是用于在浏览器中创建一个 **`Range` 对象**，它是 DOM（文档对象模型）的一部分，用于表示文档中一个连续的区域（通常是文本内容的一部分），可以用于操作、提取或修改...
const range = document.createRange(); range.selectNode(document.getElementById('targetCode')); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy');
05-07
我记得，使用document.createRange()可以创建一个范围对象，然后选择特定的元素内容。然后通过selection对象将其添加到选区，最后执行copy命令。这个过程需要获取窗口的选区，可能涉及getSelection()方法。 接下来...
document.execCommand怎么替代
01-03
document.selection.createRange().pasteHTML(html); } } ``` 这种方法不仅提供了更好的跨平台支持，而且允许更加精细地控制编辑行为，比如可以更容易地集成撤销/重做机制[^2]。 #### 利用第三方库简化开发过程 ...
DHTML之-----document.selection 的 createRange
本本技术
12-07 350
一、document.selection 介绍 document.selection 表示当前网页中的选中内容。 方法有： clear　清除选中的内容 empty　取消选中 createRange　返回 TextRange 或 ControlRange 对象 createRangeCollection 不支持 属性有：   type　选中内容的类型 ty...
document.selection 的 createRange()方法汇总
DaiDaiLiu的专栏
01-24 3185
document.selection 的 createRange INPUT{border: 1 solid #000000} BODY,TABLE{font-size: 10pt} 实例一
document.selection.createRange() （转）
weixin_30859423的博客
02-02 157
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。举例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit...
DOM-document.selection.createRange方法和TextRange对象
Ned_mahone的博客
04-07 3863
转自：http://blog.163.com/ruby_study/blog/static/238680065201611303416839/IE提供了Selection对象和TextRange对象用于实现对被选择内容进行修改以及在指定区域中进行查找。注：此对象应用于IE9版本以下，对于IE10及IE11，分别使用document.getSelection和window.getSelection来...
document.getSelection,document.selection.createRange
cvb114215的专栏
09-28 2785
function getSel(){      var txt = ;      var foundIn = ;      if(window.getSelection)      {          txt = window.getSelection();          foundIn = window.getSelection();      }else if(documen
ie9下在iframe中使用document.selection.createRange().text获取的值为空的解决办法
鲁小班的博客
09-29 1217
最近公司之前的用iframe框架写的一个老系统要求实现一个身份证上传并且预览的需求，兼容到ie9；由于这个项目保密，所以我这边仿照写了个demo 效果图 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...
IFrame 系列4 ---- document.selection 全方位兼容解析以及TextRange[createTextRange,createRange]对象的深入解析
眷恋天空的驴
03-17 4579
pre{ font-family: courier new!important; font-size: 12px!important; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); font-family: courier ne
获取Textarea 元素当前的光标位置及document.selection.createRange()资料
深南大道
08-31 8199
Demo ： Textarea 元素的光标位置 #result { font-size: 18px; line-height: 25px; padding-left: 20px; }
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值