使用contenteditable div获取并设置光标位置 [英] Get and set cursor position with contenteditable div

问题描述

我有一个可以理解的div，我希望用户能够插入链接，图片或YouTube视频等内容。目前这就是我所拥有的：

link = $（'＃url'）。val（）; $（＃编者）专注（）。 document.execCommand（'createLink'，false，link）;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script><！ - 文字编辑器 - >< div id =editorcontenteditable =true>< / div><！ - Add Link - >< input type =textid =url><按钮onclick =addLink（）> Submit< / button>

正如你所看到的，用户必须输入一个单独的文本框才能输入链接地址。因此，当链接添加到编辑器时，它不会添加到指针/插入符号所在的位置。

我的问题是我如何获得并设置指针/插入符号的位置。我看过其他问题，例如用于设置指针，但我更喜欢有一个在所有现代浏览器中都支持的解决方案，包括Chrome，Safari，Firefox和IE9 +。

任何想法？
$ b

编辑：

我发现下面的代码获取位置但是，它只能根据它所在的线路获取位置。例如，如果我有这个（其中 | 是游标）：

 这是一些文本
和som | e更多文本
  

然后我将返回值为7，而不是24。

 函数getPosition（）{
 if（window.getSelection）{
 sel = window.getSelection（）; 
 if（sel.getRangeAt）{
 return sel.getRangeAt（0）.startOffset; 
} 
} 
返回null; 
} 
  

解决方案

是当前要做的更难的事情之一，并且本身就是一个项目（不友好的API，大量的角落案例，跨浏览器差异，名单继续）。我强烈建议您尝试找到现有解决方案。

可以使用的一些库包括：

• Quill（ http://quilljs.com ）


• WYSGIHTML（ http://wysihtml.com ）


• CodeMirror库（<一个href =http://codemirror.net =nofollow> http://codemirror.net ）

I have a contenteditable div which I would like to be able to have users insert things such as links, images or YouTube videos. At the moment this is what I have:

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>

As you can see, the user has to type into a separate text box to enter the link address. As a result, when the link is added to the editor, it is not added to the position that the pointer/caret was on.

My question is how I can get and set the location of the pointer/caret. I have seen other questions such as this for setting the pointer however I would prefer to have a solution which is supported in all modern browsers, including Chrome, Safari, Firefox and IE9+.

Any ideas? Thanks.

Edit:

I found the code below which gets the position however, it only gets the position according to the line it is on. For example if I had this (where | is the cursor):

This is some text
And som|e more text

Then I would be returned the value 7, not 24.

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

解决方案

A good rich-text editor is one of the harder things to do currently, and is pretty much a project by itself (unfriendly API, huge number of corner cases, cross-browser differences, the list goes on). I would strongly advise you to try and find an existing solution.

Some libraries that can be used include:

• Quill (http://quilljs.com)
• WYSGIHTML (http://wysihtml.com)
• CodeMirror library (http://codemirror.net)

这篇关于使用contenteditable div获取并设置光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！