设置光标/插入位置的最佳方法是什么？

Question

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

我正在使用tinyMCE.execCommand("mceInsertRawHTML", false, content);插入内容,我想将光标位置设置为内容的结尾.

双方document.selection并myField.selectionStart不会为这方面的工作,我觉得好像这将是由TinyMCE的支持(通过的东西,我不能在他们的论坛上找到)或它会是一个非常丑陋的黑客.

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

稍后(2):我可以使用document.getElementById('content_ifr').contentDocument.getSelection();将选择作为字符串,但不是我可以使用的选择对象getRangeAt(0).一点一点地进步.

Answer 1

首先,您应该在要创建的内容的末尾添加一个范围.

var ed = tinyMCE.activeEditor;

//add an empty span with a unique id
var endId = tinymce.DOM.uniqueId();
ed.dom.add(ed.getBody(), 'span', {'id': endId}, '');

//select that span
var newNode = ed.dom.select('span#' + endId);
ed.selection.select(newNode[0]);

这是TinyMCE开发人员在编写Selection.js时使用的策略.阅读底层资源可以极大地帮助解决这类问题.

Answer 2

在这个问题上花了超过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故障).

一个罗嗦的答案,我知道.随意提出问题以便澄清.

Answer 3

将光标移动到最后是如此简单,以至于我无法相信已经在网上其他地方发布的可怕的kludges来做到这一点.Spocke先生的回答最初并没有帮助,但最终API文档为我提供了答案."选择所有内容,然后折叠选择":

ed.selection.select(ed.getBody(), true); // ed is the editor instance

ed.selection.collapse(false);

我希望这可以帮助其他人,因为这个帖子是最早出现在谷歌中的人之一.

Answer 4

我找到的最好的方法是插入带有temp id的内容,然后使用我在advlink插件中找到的一些技巧来提供焦点.

希望这可以帮助.

            var ed = tinyMCE.activeEditor;

            ed.execCommand('mceInsertContent', false, '<a id="_mce_temp_rob" href="http://robubu.com">robubu.com</a>');

            //horrible hack to put the cursor in the right spot
            ed.focus(); //give the editor focus
            ed.selection.select(ed.dom.select('#_mce_temp_rob')[0]); //select the inserted element
            ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
            ed.dom.setAttrib('_mce_temp_rob', 'id', ''); //remove the temp id

如果您从弹出窗口执行此操作,我认为您还需要添加

        tinyMCEPopup.storeSelection();

在关闭弹出窗口之前.

对于任何试图将Wordpress自定义元框中的内容插入TinyMCE编辑器的人来说,这是可行的解决方案.我尝试了大量其他脚本,包括本页面上的另一个脚本,上面的答案是Gary Tan,在安装自定义TinyMCE按钮时对我有用但在这种情况下没有用.

Answer 5

正确的解决方案是使用tinyMCE api tinymce.dom.Selection

http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.Selection

语法是这样的:

var rng = tinymce.DOM.createRng();  // the range obj
var newNode = editor.dom.select(...    // find the correct selector so that newNode is the element of your editor text
rng.setStart(newNode.firstChild, 0); // 0 is the offset : here it will be at the beginning of the line.
rng.setEnd(newNode.firstChild, 0);
editor.selection.setRng(rng);

它有效我自己用它.