在contenteditable容器指定位置插入内容
时间: 2024-01-01 13:17:58 浏览: 71
vue项目中在可编辑div光标位置插入内容的实现代码
在contenteditable容器中指定位置插入内容,可以通过以下步骤实现:
1. 首先,获取要插入内容的父容器,例如一个div元素,可以使用如下代码获取:
```javascript
var container = document.getElementById("container");
```
2. 然后,获取要插入内容的位置,可以使用如下代码获取当前鼠标光标的位置:
```javascript
var selection = window.getSelection();
var range = selection.getRangeAt(0);
```
如果要指定插入位置,可以使用range的setStart和setEnd方法指定起始位置和结束位置。
3. 接下来,创建要插入的节点,例如一个span元素,可以使用如下代码创建:
```javascript
var node = document.createElement("span");
node.innerHTML = "要插入的内容";
```
4. 最后,将节点插入到指定位置,可以使用如下代码将节点插入到range的起始位置:
```javascript
range.insertNode(node);
```
完整的代码示例:
```javascript
var container = document.getElementById("container");
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var node = document.createElement("span");
node.innerHTML = "要插入的内容";
range.insertNode(node);
```
阅读全文