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

Question

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

我使用 tinyMCE.execCommand("mceInsertRawHTML", false, content); 插入内容，我想将光标位置设置到内容的末尾。

document.selection 和 myField.selectionStart 都不适用于此，我觉得 TinyMCE 将支持这一点（通过我找不到的东西）在他们的论坛上）否则这将是一个非常丑陋的黑客行为。

后来：变得更好； 我刚刚发现，当您在 WordPress 中加载 TinyMCE 时，它会将整个编辑器加载到嵌入式 iframe 中。

稍后 (2)： 我可以使用 document.getElementById('content_ifr').contentDocument.getSelection(); 将选择作为字符串获取，而不是选择对象我可以使用 getRangeAt(0) 。 一点一滴的进步。

Answer 1

将光标移动到末尾是如此简单，以至于我不敢相信网上其他地方发布的可怕的组装来做到这一点。 Spocke 先生的回答最初并没有什么帮助，但最终 API 文档为我提供了答案。 “选择所有内容，然后折叠所选内容”：

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

ed.selection.collapse(false);

我希望这对其他人有帮助，因为该线程是 Google 中第一个出现的线程之一。

Answer 2

我发现的最好方法是插入带有临时 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 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]);

这是TinyMCE开发者自己在编写Selection.js时使用的策略。 阅读底层源代码对于解决此类问题非常有帮助。

Answer 4

在这个问题上花费了超过 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 5

在小版本 5 中

editor.selection.setCursorLocation(editor.getBody(), editor.getBody().childElementCount);

Answer 6

这是适合我的解决方案：

// 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 7

所以，这是我们项目的解决方案。 我们的目标是在用户键入时“即时”将 (+)/(-)/(?) 字符串更改为适当的图像。

有一个问题：每次将字符串更改为图像后，光标都会到达图像的开头，而不是按预期到达末尾。

我们添加了将光标移动到图像末尾的大量代码，以便用户可以连续键入而不会中断“跳跃”光标。

关键部分：除了使用 editor.getBody 之外，还有一种更优雅的方法来创建临时范围，并在必要的操作后立即将其删除。

if (value.match(/\([+?-]\)/)) {
        // set current cursor via span
        editor.selection.setContent('<span id="temp-span"/>');

        // refresh Content with new span
        value = editor.getContent();

        // changing (+)/(-)/(?) to the appropriate image "on the fly"
        value = value.replace('(+)', ' <img src="https://url_here/static/task_manager/img/add.png"> ');
        value = value.replace('(-)', ' <img src="https://url_here/static/task_manager/img/forbidden.png"> ');
        value = value.replace('(?)', ' <img src="https://url_here/static/task_manager/img/help_16.png"> ');
        if (this.state.editor) {
            editor.setContent(value);

            // move cursor to the latter span
            var newNode = editor.dom.select('span#temp-span');
            editor.selection.select(newNode[0]);
            editor.selection.setContent('');
        }
        // and refreshing content again w/o span
        value = editor.getContent();
    }

Answer 8

正确的解决方案是使用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);

它有效，我自己使用它。

Answer 9

我在当前插入符位置插入 html 内容（不停留在该 html 父元素中），如下所示：

editor.insertContent( '<div>My html inserted code here...</div>' + ' ' , {format: 'html'} );

末尾的空白将确保进一步键入的文本将放置在插入的 div 元素之外。

Answer 10

我抄袭了这个

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 11

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

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

Answer 12

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

使用 @robyates 答案的一部分，我所做的是将一个临时 HTML 元素放在 2 个 [code] 标记之间，将焦点放在它上，然后完全删除 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
        }
    });
}