如何将光标所在位置的元素(在可编辑div中)拆分为两部分，然后在其间插入一个自定义元素？
在可编辑的div中拆分光标所在位置的元素并在其间插入自定义元素，可以通过以下步骤实现：
基础概念
- 可编辑区域（ContentEditable）：HTML元素可以通过设置
contenteditable="true"属性使其内容可编辑。 - Range对象：用于表示文档中的一部分，可以用来选择、插入或删除内容。
- DocumentFragment：一个轻量级的文档对象，可以用来存储DOM节点，不会直接渲染到页面上。
实现步骤
- 获取光标位置。
- 创建一个新的自定义元素。
- 将光标位置的元素拆分为两部分。
- 在两部分之间插入自定义元素。
示例代码
以下是一个简单的JavaScript示例，展示了如何在可编辑div中实现上述功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editable Div Split</title>
<style>
#editableDiv {
border: 1px solid #ccc;
padding: 10px;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div id="editableDiv" contenteditable="true">
这是一个可编辑的区域。请点击这里并尝试输入一些文字。
</div>
<button onclick="insertCustomElement()">插入自定义元素</button>
<script>
function insertCustomElement() {
const editableDiv = document.getElementById('editableDiv');
const selection = window.getSelection();
const range = selection.getRangeAt(0);
if (range.startContainer === editableDiv) {
alert('请选择一个元素内部进行拆分');
return;
}
// 创建自定义元素
const customElement = document.createElement('span');
customElement.textContent = '[自定义元素]';
customElement.style.color = 'red';
// 创建一个DocumentFragment来存储拆分后的内容
const fragment = document.createDocumentFragment();
// 将拆分前的内容添加到fragment
fragment.appendChild(range.cloneContents());
// 插入自定义元素
fragment.appendChild(customElement);
// 将剩余的内容添加到fragment
range.deleteContents();
fragment.appendChild(range.extractContents());
// 将fragment添加回原来的位置
range.insertNode(fragment);
}
</script>
</body>
</html>应用场景
- 富文本编辑器：在实现自定义格式或样式时，可能需要在文本中插入特定的元素。
- 在线文档编辑：用户可能需要插入标记或其他特殊元素来组织内容。
注意事项
- 确保光标位置有效，否则操作可能会失败。
- 在处理复杂的DOM结构时，可能需要更精细的处理逻辑。
解决问题的方法
如果在实现过程中遇到问题，可以检查以下几点：
- 确保
contenteditable属性正确设置。 - 使用浏览器的开发者工具检查DOM结构是否正确。
- 确保光标位置获取正确，特别是在嵌套元素中。
通过上述步骤和代码示例，可以在可编辑div中实现元素的拆分和自定义元素的插入。
相关·内容
我需要将光标位置的元素(在可编辑的div中)分成两部分，然后在其中插入一个自定义元素。 在进行更改之前：(垂直线"|“显示光标的位置。我使用"|“向您显示光标的位置。但实际上，这个字符在文本中并不存在。)</p>
&
浏览 34提问于2020-06-25得票数 0
回答已采纳
我正在构建一个对代码进行语法突出显示的编辑器。我目前的方法是在编辑器中接受文本(一个div，内容可编辑设置为true)，并检查字符串中的regex匹配。然后，我用<span>元素替换匹配，并对这些span元素应用一些样式。然后，使用.innerHTML属性将分隔符中的完整文本替换为
浏览 1提问于2020-06-06得票数 6
如何将光标设置在可内容编辑的div中的span元素之后？现在，我在一个span元素中有一个图像，在contenteditable div中。当我添加一些字符时，它们被添加到span内，但我希望它们被添加到span元素之后。你知道我怎样才能做到这一点吗？
浏览 0提问于2013-04-04得票数 11
我正在使用一个内容可编辑的div，它可以选择在文本流中有内联html元素，例如标记“”。
在某些点上，我需要获取内容可编辑div的插入符号位置(游标位置)，插入符号(游标)是在html子元素之后。我在javascript中使用了以下代码--它可以正确地找到可内容div的<em
浏览 0提问于2012-05-31得票数 4
回答已采纳
现在我问过这个问题，它被标记为重复这个问题，，但实际上它是完全不同的。
假设我有一个可满足的div，其中也包含了一些元素。<div id="text" contenteditable="true"><b>abc</b><nav>def</nav><span>ghi</span></div</em
浏览 0提问于2016-12-07得票数 1
3回答
我正在尝试将一些内容放到一个div中。由于某些原因，它显示在div下面而不是div内部的内容。$q.'";\' /></a></td> <div class="scrollme">';
while($row = mysql_fetch_array
浏览 1提问于2011-06-30得票数 2
回答已采纳
我有一个可满足的div，其中我有一个背景和填充的跨度。 Blah content <span style="background:#efefef; padding:8px">my span</span> and some more content
但是，根据
浏览 2提问于2020-03-15得票数 1
回答已采纳
这个问题将分为两部分。
这很好，但问题是在初始化div时，第一行将不会被就像
我试图将<p>标记放在html
浏览 0提问于2016-03-29得票数 1
回答已采纳
试着在我放的小提琴页上测试一下。
当您插入html元素时，应该有这样的行为的原因。我是说，你不会期望元素有任何变化或调整大小。这实际上与编辑器的功能无关，当您单击该表时，光标</e
浏览 0提问于2013-11-08得票数 3
回答已采纳
4回答
在IE10中似乎有一个bug，如果我在另一个元素上放置一个元素并使用contenteditable属性，编辑器的插入符号就会绘制在所有内容上。
我之所以需要这样做，是因为我正在设计一个WYSWIYG编辑器(叉)，其中工具栏在</e
浏览 4提问于2013-04-04得票数 25
我在显示块元素模式中使用tinyMCE。在两个div之间指定一个空格是有问题的。如果我有这样的标记：
<div id="first"></div><div id="second&qu
浏览 1提问于2013-04-17得票数 1
1回答
我有一个设置，在contenteditable div中有大量格式化的HTML (包含标题和段落)contenteditable。我已经设置了一个函数来在单击按钮时将一个自定义html实体：<newnote>插入到可编辑的div中。这很好，除了在span中插入注释时，我需要将span分割成两
浏览 1提问于2014-04-11得票数 0
回答已采纳
2回答
使用可内容的div区域，当CSS psuedo选择器::before用于在“标记”之前添加内容时，光标不能放在内联样式元素的第一个字母之前(目前仅在Chrome中测试)。用例是这种技术用于在内容编辑器中显示/样式自定义标记。每个标记都被索引，此索引显示在标记文本的左侧。提前谢谢..。编辑:正如@Sonny
浏览 4提问于2016-04-06得票数 2
回答已采纳
只要有人按下按钮，我就能成功地创建我的编辑器，并将html添加到编辑器中。例如,<div style="border:1px solid #000" id="myeditor" class="col-md-6 claro" data-dojo-type</div>
<div class="col
浏览 0提问于2016-06-10得票数 0
回答已采纳
我在Firefox3.03中的DIV元素上使用了contentEditable属性。将其设置为true允许我按照预期编辑DIV的文本内容。然后，当我将contentEditable设置为"false“时，div不再是可编辑的，这也是预期的。
但是，闪烁的插入符号(文本输入光标)仍然可见，即使文本不再可
浏览 2提问于2008-10-18得票数 3
回答已采纳
我的屏幕被划分为两个DIVs。在左边的DIV中，我有几个50x50像素的DIVs，在右边的DIV中，我有一个由80x80 LI组成的空网格。左边的DIV是可拖动的，一旦放到LI上，它们就应该快速到达LI的中心。
听起来很简单，对吧？我只是不知道该怎么做。我尝试操作掉的
浏览 12提问于2009-08-10得票数 31
回答已采纳
我目前是HTML和CSS的新手，对它们知之甚少。最近，我遇到了一个问题，当<div>元素的背景颜色为深色时，我的文本光标不可见。下面是一个示例： .PreCode {
font-family: Georgia, 'Times New Roman', Times, serif;>元素中的文本作为类时，我
浏览 0提问于2021-10-24得票数 0
我创建了一个自定义元素指令，它在DOM中插入一个元素，并为该元素添加了一些javascript代码。：问题是，注入的javascript试图在div中生成一个id "test“的图表，但是失败了，因为在这个阶段，角还没有插入{vm.na
浏览 0提问于2015-09-17得票数 2
回答已采纳
我是CKEditor的新手。我正在尝试构建一个插件，它插入一个新的div元素，其中包含一些自定义内容。用户只能在编辑器中看到一个假元素，该元素表示通过createFakeElement()函数创建的真实生成的html内容。fakeElement时，我可以在源视图中看到我的div被一个<
浏览 0提问于2015-04-10得票数 1
1回答
因此，我一直在尝试将一个定制的存储元素与使用聚合物本地饲料元素的聚合物组合在一起。本地forage元素要求您设置它的name属性，因此我认为可以简单地将"name“属性或"id”属性从自定义元素传递到模板中的本地forage元素，但它不起作用。为了确保我没有做错什么，我做了一个自定义元素，它
浏览 0提问于2016-02-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
