设置光标/插入位置的最佳方法是什么？ [英] What's the best way to set cursor/caret position?

问题描述

如果我将内容插入到TinyMCE已经选择的textarea中，那么设置光标/插入符位置的最佳方法是什么？

If I'm inserting content into a textarea that TinyMCE has co-opted, what's the best way to set the position of the cursor/caret?

我' m使用 tinyMCE.execCommand（mceInsertRawHTML，false，content）; 插入内容，我想将光标位置设置为内容的末尾。

I'm using tinyMCE.execCommand("mceInsertRawHTML", false, content); to insert the content, and I'd like set the cursor position to the end of the content.

document.selection 和 myField.selectionStart won'为此工作，我觉得这将得到TinyMCE的支持（通过我在他们的论坛上找不到的东西），或者它将是一个非常丑陋的黑客。

Both document.selection and myField.selectionStart won't work for this, and I feel as though this is going to be supported by TinyMCE (through something I can't find on their forum) or it's going to be a really ugly hack.

稍后：它变得更好;我只是想通了，当你在WordPress中加载TinyMCE时，它会在嵌入式iframe中加载整个编辑器。

Later: It gets better; I just figured out that, when you load TinyMCE in WordPress, it loads the entire editor in an embedded iframe.

稍后（2）：我可以使用 document.getElementById（'content_ifr'）。contentDocument.getSelection（）; 将选择作为字符串，但不是我可以使用的选择对象 getRangeAt（0）开启。一点一点地取得进步。

Later (2): I can use document.getElementById('content_ifr').contentDocument.getSelection(); to get the selection as a string, but not a Selection Object that I can use getRangeAt(0) on. Making progress little by little.

推荐答案

在这个问题上花了超过15个小时（奉献，我知道），我发现了一个部分解决方案适用于FF和Safari，但不适用于IE。目前，这对我来说已经足够好了，虽然我将来可能继续努力。

After spending over 15 hours on this issue (dedication, I know), I found a partial solution that works in FF and Safari, but not in IE. For the moment, this is good enough for me although I might continue working on it in the future.

解决方案：在当前插入位置插入HTML时，最好要使用的函数是：

The solution: When inserting HTML at the current caret position, the best function to use is:

tinyMCE.activeEditor.selection.setContent（htmlcontent）;

在Firefox和Safari中，此函数会将内容插入到WordPress用作TinyMCE编辑器的iframe中的当前插入位置。 IE 7和8的问题在于该函数似乎将内容添加到页面顶部，而不是iframe（即它完全错过了文本编辑器）。为了解决这个问题，我添加了一个条件语句基于此代码将使用此功能而不是IE：

In Firefox and Safari, this function will insert the content at the current caret position within the iframe that WordPress uses as a TinyMCE editor. The issue with IE 7 and 8 is that the function seems to add the content to the top of the page, not the iframe (i.e. it completely misses the text editor). To address this issue, I added a conditional statement based on this code that will use this function instead for IE:

tinyMCE.activeEditor.execCommand（mceInsertRawHTML，false，htmlcontent）;

然而，第二个函数的问题是，在调用后，插入位置被设置为后期区域的开头（没有希望根据它调用它）浏览器范围等）。在接近结尾的地方，我发现这个函数可以用第一个函数恢复插入内容末尾的插入位置：

The issue for this second function, however, is that the caret position is set to the beginning of the post area after it has been called (with no hope of recalling it based on the browser range, etc.). Somewhere near the end I discovered that this function works to restore the caret position at the end of the inserted content with the first function:

tinyMCE。 activeEditor.focus（）;

此外，它还将插入符号位置恢复到插入内容的末尾，而不必计算长度插入的文字。缺点是它只适用于第一个插入功能，它似乎在IE 7和IE 8中引起问题（可能比TinyMCE更多的是WordPress故障）。

In addition, it restores the caret position to the end of the inserted content without having to calculate the length of the inserted text. The downside is that it only works with the first insertion function which seems to cause problems in IE 7 and IE 8 (which might be more of a WordPress fault than TinyMCE).

我知道，这是一个罗嗦的答案。请随意提出问题以便澄清。

A wordy answer, I know. Feel free to ask questions for clarification.

这篇关于设置光标/插入位置的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！