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

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

在这个问题上（奉献，我知道），花费超过15个小时后，我发现，在FF和Safari工作的部分解决方案，但不是在IE浏览器。目前，这对我来说已经足够了，尽管我将来可能会继续努力。

解决方案：当在当前插入位置插入HTML，要使用的最佳功能是：

tinyMCE.activeEditor.selection.setContent(htmlcontent);

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

tinyMCE.activeEditor.execCommand("mceInsertRawHTML", false, htmlcontent);

这个第二个函数的问题，然而，就是插入符位置设置的开始在它被调用后的后区域（根据浏览器范围没有希望回想它等）。附近的某处结束时，我发现，此功能在插入的内容与第一函数的最后恢复插入符位置：

tinyMCE.activeEditor.focus();

此外，它恢复的插入位置的插入结束内容而不必计算插入文本的长度。缺点是它只适用于第一个插入函数，这在IE 7和IE 8中似乎会导致问题（这可能是比TinyMCE更多的WordPress错误）。

一个罗嗦的答案，我知道。随时提出澄清问题。

Answer 2

我抄袭了这个从here。

function setCaretTo(obj, pos) { 
    if(obj.createTextRange) { 
     /* Create a TextRange, set the internal pointer to 
      a specified position and show the cursor at this 
      position 
     */ 
     var range = obj.createTextRange(); 
     range.move("character", pos); 
     range.select(); 
    } else if(obj.selectionStart) { 
     /* Gecko is a little bit shorter on that. Simply 
      focus the element and set the selection to a 
      specified position 
     */ 
     obj.focus(); 
     obj.setSelectionRange(pos, pos); 
    } 
} 

Answer 3

首先你应该做的是在你想创建的内容的末尾添加一个范围。

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]); 

这是书面Selection.js使用TinyMCE的开发者自己的战略。阅读底层的源代码可以为这类问题提供巨大的帮助。

Answer 4

，我发现最好的办法是插入一个临时ID的内容，然后使用一些诡计我在advlink plugin发现给这一重点。

希望这会有所帮助。

  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

它是如此简单，将光标移动到我不能相信已张贴在其他地方上网做这个可怕的组装机结束。 Spocke先生的回答最初并没有帮助，但最终API文档为我提供了答案。 “选择所有内容，然后折叠选择”：

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

ed.selection.collapse(false); 

我希望这可以帮助别人，因为这线程是第一次来在谷歌的一个。

Answer 6

正确的解决方案是使用TinyMCE的API tinymce.dom.Selection

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

的syntaxe是一样的东西：

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); 

它的作品我用这自己。

Answer 7

在当前选择/插入符号位置插入一个DOM节点。

tinyMCE.activeEditor.selection.setNode(tinyMCE.activeEditor.dom.create('img', {src : 'some.gif', title : 'some title'})); 

Answer 8

这是对我的作品的解决方案：

// params: 
// $node: jquery node with tinymce loaded 
// text: text to set at then before caret 
function setTextAndCaretToEnd($node, text) { 
    var ed = window.tinyMCE.get($node.attr("id")); 
    ed.focus(); 
    ed.selection.setContent(text); 
} 

Answer 9

在我自己的2毛钱就扔在这里。这些都没有回答我的问题。我没有放入HTML元素，而是放入一段文本（例如[code][/code]），并且需要光标才能在两者之间移动。

使用@robyates答案的一部分，我所做的是在2 [code]标记之间放置一个临时HTML元素，将注意力集中在它上面，然后完全删除HTML元素。这里是我的代码：

setup : function(ed) { 
    // Add a custom button 
    ed.addButton('codeblock', { 
     title : 'Code Block', 
     text : '[code/]', 
     icon: false, 
     onclick : function() { 
      // Add you own code to execute something on click 
      ed.focus(); 
      //ed.selection.setContent('[code][/code]'); 
      ed.execCommand('mceInsertContent', false, '[code]<span id="_cursor" />[/code]'); 

      ed.selection.select(ed.dom.select('#_cursor')[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.remove('_cursor'); //remove the element 
     } 
    }); 
}