使用contenteditable div获取并设置光标位置

本文介绍了使用contenteditable div获取并设置光标位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

< script src =ajax.googleapis/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（ quilljs ）
• WYSGIHTML（ wysihtml ）
• CodeMirror库（ codemirror ）

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="ajax.googleapis/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 (quilljs)
• WYSGIHTML (wysihtml)
• CodeMirror library (codemirror)