相关疑难解决方法(0)

假设我有这个HTML元素:

<div id="parent">
 Hello everyone! <a>This is my home page</a>
 <p>Bye!</p>
</div>

用户用鼠标选择"家".

我希望能够确定#parent他的选择中有多少个字符开始(以及#parent他选择结束时有多少个字符结束).即使他选择了HTML标记,这也应该有效.(我需要它在所有浏览器中工作)

range.startOffset 看起来很有希望,但它只是相对于范围的直接容器的偏移量,并且仅当容器是文本节点时才是字符偏移量.

我有一个令人满意的div,我希望能够让用户插入链接,图像或YouTube视频等内容.目前这就是我所拥有的:

function addLink() {
  var link = $('#url').val();
  $('#editor').focus();
  document.execCommand('createLink', false, link);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Text Editor -->
<div id="editor" contenteditable="true"></div>

<!-- Add Link -->
<input type="text" id="url">
<button onclick="addLink()">Submit</button>

如您所见,用户必须输入单独的文本框才能输入链接地址.因此,当链接添加到编辑器时,它不会添加到指针/插入符所在的位置.

我的问题是如何获取和设置指针/插入符的位置.我已经看到了其他问题,例如设置指针,但是我希望有一个在所有现代浏览器中都支持的解决方案,包括Chrome,Safari,Firefox和IE9 +.

有任何想法吗？谢谢.

编辑:

我发现下面的代码获取位置,但它只根据它所在的行获取位置.例如,如果我有这个(|光标在哪里):

This is some text
And som|e more text

然后我将返回值7,而不是24.

function getPosition() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            return sel.getRangeAt(0).startOffset;
        }
    }
    return null;
}

我有一个拼写检查解决方案，该解决方案使用可编辑的内容，div并span在拼写错误的单词周围插入标签。每次div更新的内部html时，光标就会移动到的开头div。

我知道，div如果用户将新单词添加到句子的末尾（下面的代码），我可以将光标移到末尾。

旧文本：这是拼写检查器|

新文本：这是拼写检查器解决方案|

var range = document.createRange();
range.selectNodeContents(element[0]);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

但是，如果用户在句子中间添加单词，则无法保留光标位置。

旧文本：这是一个拼写检查器

新文本：这是一个新的拼写检查器|

在上述情况下，光标应移至div“ new”之后的末尾。

如何保持光标位置？由于我正在更新html并添加节点，因此无法在更新之前保存范围并将其添加到选择对象中。

提前致谢。

有像这样的HTML:

<div contenteditable="true" class="value research-form thumbnail">
 Some text here
 </div>

div的内容应该动态地突出显示某些单词,而用户类型例如:

 <div contenteditable="true" class="value research-form thumbnail">
 Some text here <span style="background-color: yellow">highlight</div> it
 </div>
 <script>
    $(document).ready(function () {
        var input = $('#textarea').on('input', function (event) {
            var newText = input.text().replace('highlight', '<span style="background-color: yellow">highlight</div>');
            input.html($.parseHTML(newText));
        });
    });
</script>

但是有一个问题:当我在div光标中刷新文本时,在输入文本的开头移动.

有没有办法在更改contenteditable值后恢复光标位置？或者也许有其他方法可以获得相同的效果？

我有一个contenteditable div,其中我有多个标签(br,b,u,i)和文本,我需要获得相对于div的插入位置,包括所有标签.

例如:

<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div>

如果光标在g和h之间,我需要插入位置为14.问题是找到的使用treeWalker的方法在这种情况下不起作用.找不到粗体标签......可能是因为它没有关闭.我也尝试了几种方法,但仍然没有运气.

我需要它在Firefox中工作.谢谢.

我想从RichTextArea获取光标位置或位置.我不知道如何获取当前光标位置没有任何鼠标事件.例如,TextArea有方法getCursorPos(),但RichTextArea没有像TextArea这样的方法.任何人都有任何想法？请帮我...

提前致谢...

我已经打开了一个纯文本区域，该区域之前存储了用户插入符号位置，并在他们重新打开我的 Chrome 扩展程序时返回它。我现在已将文本区域更改为可编辑的 div 以启用基本文本格式，但插入符号位置存储不起作用。

我目前有工作代码可以将插入符号位置存储在文本区域中，但我现在需要找出我需要更改的内容才能使其在可编辑的 div 中工作。

(function($) {
$.fn.caret = function(pos) {
    var target = this[0];
    var isContentEditable = target.contentEditable === 'true';
    if (arguments.length == 0) {
        if (window.getSelection) {
            if (isContentEditable) {
                target.focus();
                var range1 = window.getSelection().getRangeAt(0),
                    range2 = range1.cloneRange();
                range2.selectNodeContents(target);
                range2.setEnd(range1.endContainer, range1.endOffset);
                return range2.toString().length;
            }
            return target.selectionStart;
        }
        if (document.selection) {
            target.focus();
            if (isContentEditable) {
                var range1 = document.selection.createRange(),
                    range2 = document.body.createTextRange();
                range2.moveToElementText(target);
                range2.setEndPoint('EndToEnd', range1);
                return range2.text.length;
            }
            var pos = 0,
                range = target.createTextRange(),
                range2 …