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

Posted 2023-05-07

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

【英文标题】：Inserting text in TinyMCE Editor where the cursor is

【发布时间】：2012-11-03 20:07:37

【问题描述】：

我一直在尝试将文本插入到 TinyMCE 编辑器的焦点段落元素 (<p>) 中光标所在的位置，但没有成功！！

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

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

【问题讨论】：

见***.com/questions/13849115/…

【参考方案1】：

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

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

【讨论】：

但我需要你帮忙做另一件事！对于 IE 浏览器，文本总是插入到开头！我该怎么办？

我将此代码行用于 IE7 和 IE8 没有任何问题。 TinyMCE 适用于 IE6+。也许你的问题在别处。

您何时尝试在 Tiny 中插入文本？使用 TinyMCE 插件按钮？

没有。在掉落活动中！我正在尝试从外部 div 元素中删除文本！但我需要将它准确地放在光标所在的位置。

见***.com/questions/13849115/…

【参考方案2】：

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

例如：

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

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

其他一些有趣的观察：

mceInsertRawHTML 也可以，但在我的 tinyMCE 版本中倾向于将光标放在当前行的开头，但是 ymmv。

mceReplaceContent 也可以，但在我的情况下，当光标位于当前内容的末尾时效果不佳。

再次，请参阅the documentation 了解更多信息。

【参考方案3】：

如果使用弹窗，你可以使用：

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>

【参考方案4】：

如果您的页面上有多个编辑器，我想在此处添加一件事，而您也可以这样做。

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