假设我有这个HTML元素:
<div id="parent">
Hello everyone! <a>This is my home page</a>
<p>Bye!</p>
</div>
用户用鼠标选择"家".
我希望能够确定#parent他的选择中有多少个字符开始(以及#parent他选择结束时有多少个字符结束).即使他选择了HTML标记,这也应该有效.(我需要它在所有浏览器中工作)
range.startOffset 看起来很有希望,但它只是相对于范围的直接容器的偏移量,并且仅当容器是文本节点时才是字符偏移量.
我有我的内容可编辑 div:
div {
width: 200px;
height: 300px;
border: 1px solid black;
}<div contenteditable="true" spellcheck="false" style="font-family: Arial;">
<b>Lorem ipsum</b> dolor sit amet, <u>consectetur adipiscing elit.
Morbi sagittis</u> <s>mauris porta arcu auctor, vel aliquam ligula ornare.</s>
Sed at <span id="someId">semper neque, et dapibus metus.
Maecenas dignissim est non nunc feugiat</span>
sollicitudin. Morbi consequat euismod consectetur. Mauris orci
risus, <b>porta quis erat ac, malesuada</b> fringilla odio.
</div>
<button>Get current line HTML</button>我想创建一个按钮,从当前行给我HTML代码.例如:
当我的插入符号位于第二行时,我想得到:
amet, <u>consectetur</u>
或在第七行:
<span id="someId">dapibus metus. …我有一个contenteditable div,我需要在当前的插入位置知道这个词.我试过这个解决方案,但问题是,它不能识别像@和的特殊字符~.因此,如果一个单词开始~,就像~fool,我正在得到fool,而我期待~fool.所以我尝试修改解决方案时考虑到如果在移回选择后,遇到的字符不是空格,我会继续向后移动直到遇到空格.这将成为选择的开始.同样地,我会继续前进,直到找到一个空格,这标志着选择的结束.然后选择会给我这个词.为了获得插入位置,我使用了这个解决方案.结合起来,我的代码现在看起来像这样:
function getCaretPosition(editableDiv) {
var caretPos = 0,
sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos …精简版:
我有一个满足的div.我想在carret postion之前移除最后的x个字符.
长版:
如果有人[在contenteditable div中键入a ,则应该出现一个autosuggest列表,由ajax调用填充.这已经完成了.我也可以在carret位置插入所选的建议并添加一个].但是,在添加建议之前,应删除已经由用户键入的字符.括号[不仅是"trigger-char",还是一种类似markdown的格式元素.
例:
div中的文字("|"代表carret): Lorem ipsum| sit lorem ipsum dolor
用户现在键入[do以启动自动建议:Lorem ipsum [do| sit lorem ipsum dolor
dolor 建议并在carret后插入: Lorem ipsum [do|dolor sit lorem ipsum dolor
问题:do在插入建议之前,应该删除allready类型的字符
期望的行为: Lorem ipsum [dolor] sit lorem ipsum dolor
尝试的解决方案:
在内容可编辑div中的光标处插入文本 - 工作但我无法删除最后的字符 https://developer.mozilla.org/en-US/docs/Web/API/Selection - 尝试从MDN获取一些想法,但不知道如何更改选择的textNode的内容
码:
提取最后一个"["和carret之间的字符串以在DB中搜索建议:
var sel = window.getSelection();
var cords = getCaretCoords();
var searchQuery = extractSearchQuery(sel.anchorNode.data, sel.anchorOffset, "[");
function extractSearchQuery(searchString, caretPos, triggerString) {
//cut …