TinyMCE初始化后用javascript设置textarea值

Posted 2023-05-07

【中文标题】TinyMCE初始化后用javascript设置textarea值

【英文标题】：Set textarea value with javascript after TinyMCE initializing

【发布时间】：2012-08-01 08:43:05

【问题描述】：

我有一个 textarea，我在该 textarea 上使用 tinyMCE。

我实际上是在打开页面时，在 textarea 中填充一些文本，然后初始化 tinyMCE。

问题是当我尝试在 tinyMCE 初始化后更改 textarea 的值时，什么也没有发生。

这是一个例子。

创建文本区域：

<textarea style="width: 95%;" name="title"  id="title"></textarea>

填充文本区域：

$('#title').html("someText");

初始化 tinyMCE

tinyMCE.init(
        // General options
        mode : "specific_textareas",
        theme : "advanced",
        width: "100%",
        plugins : "pagebreak,paste,fullscreen,visualchars",

        // Theme options
        theme_advanced_buttons1 : "code,|,bold,italic,underline,|,sub,sup,|,charmap,|,fullscreen,|,bullist,numlist,|,pasteword",
        theme_advanced_buttons2 :"",
        theme_advanced_buttons3 :"",
        theme_advanced_buttons4 :"",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        valid_elements : "i,sub,sup",
        invalid_elements : "p, script",
        editor_deselector : "mceOthers"
    );

我想更改 textview 的内容（但不起作用）

我尝试使用与之前相同的方式来初始化 tinyMCE

    $('#title').html("someModifiedText"); // does not work

我也试过删除 tinyMCE：

    if(tinyMCE.getInstanceById('title'))
    removeTinyMCE("title");

与

function removeTinyMCE (dialogName) 
    tinyMCE.execCommand('mceFocus', false, dialogName);
    tinyMCE.execCommand('mceRemoveControl', false, dialogName);

然后再使用：

    $('#title').html("someModifiedText"); // does not work

我没有想法...非常感谢您的帮助....

【参考方案1】：

这里的问题是，如果您在 textarea 中输入文本或 html，您将看不到任何内容。 当 tinymce 初始化时，您的 textarea 会被隐藏。然后您看到的是一个内容可编辑的 iframe，用于编辑和设置内容样式。有几个事件会导致 tinymce 将其内容写入编辑器的 html 源元素（在您的情况下是您的 textarea）。

如果您想设置编辑器的内容（可见），您需要调用类似

tinymce.get('title').setContent('<p>This is my new content!</p>');

您也可以直接使用以下方式访问 dom 元素

tinymce.get('title').getBody().innerHTML = '<p>This is my new content!</p>';

或使用 jQuery

$(tinymce.get('title').getBody()).html('<p>This is my new content!</p>');

【讨论】：

再次感谢 Thariama，我在这里遇到错误：tinymce.get('title') is undefined

参考this。

@goldenparrot，谢谢，我已经尝试过了，但仍然是同样的问题。

您需要使用您的 textareas id，但您也可以使用 tinymce.activeEditor 或 tinymce.editors[0]

setcontent 对我不起作用，但 setContent 可以（大写“C”）

【参考方案2】：

您可以使用tinyMCE.activeEditor.setContent('<span>some</span> html');

Check this Answer

【讨论】：

如果你觉得这个问题是重复的，它应该被标记为这样。请不要发布指向其他 Stack Overflow 问题的链接作为答案。

抱歉没有注意到同一用户的帖子。谢谢你的信息。

很好的解决方案！！

这个答案应该是公认的答案。简单的好解决方案！谢谢@RyanMonreal

【参考方案3】：

这对我有用

$("#description").val(content);

【参考方案4】：

<textarea id="content" name="content">html_entity_decode($yourstringdata)</textarea>

这对我有用，解码您的 html 数据并将其放在开始和结束 textarea 标记之间。

【参考方案5】：

我通过确保在文档准备好后完成setContent 解决了同样的问题，所以首先；

script(type="text/javascript").
  tinymce.init(
    selector: '#title',
    height: 350,
    menubar: false
  );

然后

script(type='text/javascript').
  $(document).ready(function()
    tinymce.get('title').setContent('<span>someText</span> is html');
  )

上面是 pug 的代码，但关键是 - 如前所述 - 将其加载到准备好的文档中。

【参考方案6】：

调用一次

tinymce.triggerSave();

然后tinymce 的值将被转移到原来的textarea 值。因此，您可以从普通的 textarea 获得它。

【参考方案7】：

它对我有用。只需将其放在您的 html 代码中，而不是使用 tinymce

    <textarea> html CONTENT</textarea>

【讨论】：

问题是关于以特定方式使用 tinyMCE，但这里提供的解决方案只是说，不要使用 tinymce，这根本无助于回答问题。