在光标所在的TinyMCE编辑器中插入文本

时间:2012-11-15 08:36:12

标签: javascript jquery tinymce cursor-position

我一直试图在聚焦的段落元素(<p>)中将文本插入到TinyMCE编辑器中,正好在光标所在的位置,但没有运气!!

var elem = tinyMCE.activeEditor.dom.get('tinymce');
var child = elem.firstChild;
while (child) {
    if (child.focused) {
        $(child).insertAtCaret("some text");
    }
    child = child.nextSibling;
}

如果有人知道如何解决这个问题,我将非常感激。

4 个答案:

答案 0 :(得分:84)

您应该使用命令mceInsertContent。 请参阅TinyMCE documentation

tinymce.activeEditor.execCommand('mceInsertContent', false, "some text");

答案 1 :(得分:9)

上面的答案很好,但值得指出的是,这可以用来插入任何HTML。

例如:

tinymce.activeEditor.execCommand('mceInsertContent', false, " <b>bolded text</b> ");

将在当前光标位置插入粗体文本。

其他一些有趣的观察结果:

mceInsertRawHTML 也有效,但往往会将光标放在我的tinyMCE版本的当前行的开头,但是ymmv。

mceReplaceContent 同样适用,但在我的情况下,当光标位于当前内容的末尾时,效果不佳。

再次,请参阅the documentation了解详情。

答案 2 :(得分:1)

如果使用弹出窗口,则可以使用:

tinyMCEPopup.editor.execCommand('mceInsertLink', false, 'some content goes here');

// mceInsertLink将内容插入当前光标或插入符号位置。 //如果编辑器没有聚焦,则插入将位于编辑器的第一行内容中。

如果要插入HTML标签和javascript变量,则可以使用,例如:

<script type='text/javascript'>

    var my_var= "some value";
    var my_var_two = 99;

    tinyMCEPopup.editor.execCommand('mceInsertLink', false, 
                    '<span >[' + my_var + ', ' + my_var_two + ']</span>');       
    tinyMCEPopup.close(); // too close the popup window

</script>

如果在PHP文件中,则可以使用相同的策略,仅使用PHP而不是JavaScript,例如:

<script type='text/javascript'>
    tinyMCEPopup.editor.execCommand('mceInsertContent', false, 
               '<span >[' + <?php echo $my_php_var; ?> +']</span>'); 
</script>

您还可以将PHP变量(假设您位于.php文件中)分配给Javascript变量,并在编辑器内容插入中使用它们,例如:

<script type='text/javascript'>

    var my_var= "<?php echo $my_php_var; ?>";
    var my_var_two = "<?php echo $my_php_var_two_or_a_function_call; ?>";

    tinyMCEPopup.editor.execCommand('mceInsertLink', false, 
                     '<span >[' + my_var + ', ' + my_var_two + ']</span>');       
    tinyMCEPopup.close(); // too close the popup window

</script>

答案 3 :(得分:0)

如果您的页面上有多个编辑器,那么我想在此添加另外一件事。

tinyMCE.get('idOfEditor').execCommand('mceInsertContent', true, 'your text goes here')