设置光标/插入符号位置的最佳方法是什么? [英] What's the best way to set cursor/caret position?
问题描述
如果我将内容插入到 TinyMCE 选择的文本区域中，设置光标/插入符号位置的最佳方法是什么?
我正在使用 tinyMCE.execCommand("mceInsertRawHTML", false, content); 插入内容，我想将光标位置设置为内容的末尾.>
document.selection 和 myField.selectionStart 都不适用于这个，我觉得 TinyMCE 会支持它(通过一些我可以在他们的论坛上找不到)否则这将是一个非常丑陋的黑客.
后来:变得更好了；我刚刚发现，当您在 WordPress 中加载 TinyMCE 时，它会在嵌入式 iframe 中加载整个编辑器.
稍后(2):我可以使用 document.getElementById('content_ifr').contentDocument.getSelection(); 将选择作为字符串获取，但不能我可以使用 getRangeAt(0) 的选择对象.一点一点地进步.
在这个问题上花费了 15 多个小时(我知道是奉献精神)后，我找到了一个在 FF 和 Safari 中有效，但在 IE 中无效的部分解决方案.目前，这对我来说已经足够了，尽管我将来可能会继续努力.
解决方法:在当前插入符号位置插入HTML时，最好使用的函数是:
tinyMCE.activeEditor.selection.setContent(htmlcontent);
在 Firefox 和 Safari 中，此功能将在 WordPress 用作 TinyMCE 编辑器的 iframe 中的当前插入符号位置插入内容.IE 7 和 8 的问题是该函数似乎将内容添加到页面顶部，而不是 iframe(即它完全错过了文本编辑器).为了解决这个问题，我添加了一个条件语句基于这段代码，它将使用这个函数而不是 IE:
tinyMCE.activeEditor.execCommand("mceInsertRawHTML", false, htmlcontent);
然而，第二个函数的问题是插入符号位置在被调用后被设置为帖子区域的开头(根据浏览器范围等，没有希望重新调用它).接近尾声时，我发现这个函数可以用第一个函数恢复插入内容末尾的插入符号位置:
tinyMCE.activeEditor.focus();
此外，它还可以将插入符号位置恢复到插入内容的末尾，而无需计算插入文本的长度.缺点是它只适用于第一个插入功能，这似乎会导致 IE 7 和 IE 8 出现问题(这可能比 TinyMCE 更像是 WordPress 故障).
一个冗长的答案，我知道.随时提出问题以进行澄清.
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?
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.
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.
Later: It gets better; I just figured out that, when you load TinyMCE in WordPress, it loads the entire editor in an embedded iframe.
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.
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.
The solution: When inserting HTML at the current caret position, the best function to use is:
tinyMCE.activeEditor.selection.setContent(htmlcontent);
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();
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屋！
