什么是设置光标/插入符号位置最好的方法是什么？(What's the best way to

2019-06-18 06:07发布

站内文章 / 后端开发

59 0

姐就是有狂的资本

女 | 书童

私信

如果我将内容放到这个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:

首先你应该做的是要创建的内容的末尾添加一个跨度。

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 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问题（这可能是更WordPress的故障比TinyMCE的的）第一插入功能工作。

罗嗦了答案，我知道了。随意要求澄清的问题。

Answer 3:

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

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

ed.selection.collapse(false);

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

Answer 4:

我发现最好的办法是插入一个临时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的编辑内容，这是一个工作的解决方案。我试过一吨其他脚本，其中包括此页面上的其他，上述由加里谭，安装自定义按钮，TinyMCE的但没有在这种情况下制定出时为我工作的答案。

Answer 5:

正确的解决方法是使用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 6:

所以，这里是从我们的项目解决方案。我们的目标是改变(+)/(-)/(?)字符串为“对飞”，而用户键入相应的图像。

有一个问题：改变字符串图像后，每一次，光标走到图像的开始，而不是结束的预期。

我们添加了其中大部分将光标移动到图像的端部的代码的，所以用户可以W / O中断上“跳跃”光标连续地键入。

关键部分：不要使用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">&nbsp;');
        value = value.replace('(-)', ' <img src="https://url_here/static/task_manager/img/forbidden.png">&nbsp;');
        value = value.replace('(?)', ' <img src="https://url_here/static/task_manager/img/help_16.png">&nbsp;');
        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 7:

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

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

Answer 8:

只是在我自己的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
        }
    });
}

Answer 9:

我从抄袭这个位置。

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 10:

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

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

文章来源: What's the best way to set cursor/caret position?