使用 tinyMCE 设置文本区域的内容答案

【问题标题】：setContent of an textarea with tinyMCE使用 tinyMCE 设置文本区域的内容
【发布时间】：2012-07-31 14:51:54
【问题描述】：

我有一些文本区域，它们都使用 tinyMCE。

我想设置具体textarea的内容，但是找不到怎么做。

我试过这个：

 tinyMCE.get('title').setContent(selected_article_title);

这是我的文本区域：

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

这里是我的 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"
});

我不知道为什么这不起作用，我使用的是 tinyMCE 网站 http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent 中的示例

【问题讨论】：

标签： javascript tinymce textarea

【解决方案1】：

我想这会解决你的问题

它适用于 TinyMCE v:4。.

// Sets the HTML contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html');

// Sets the raw contents of the activeEditor editor
tinyMCE.activeEditor.setContent('<span>some</span> html', {format : 'raw'});

// Sets the content of a specific editor (my_editor in this example)
tinyMCE.get('my_editor').setContent(data); // here my_editor is the id of a specific editor

// Sets the bbcode contents of the activeEditor editor if the bbcode plugin was added
tinyMCE.activeEditor.setContent('[b]some[/b] html', {format : 'bbcode'});

代码链接是TinyMCE setContent

【讨论】：

【解决方案2】：

我有解决方案（感谢 Thariama，他给了我一些元素）

要使用 tinyMCE 设置 textarea 的内容，我们需要在初始化 tinyMCE 之前填写 textarea。另外，回复如下：

创建文本区域：

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

设置textarea的内容：

$('#title').html(selected_article_title);

初始化 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"
});

它已经完成了！享受吧。

【讨论】：

【解决方案3】：

对于 tinymce 版本 4，

tinymce.get('title').setContent(selected_article_title);

工作得很好 - 在初始化编辑器之后也是如此。

【讨论】：

【解决方案4】：

在 TinyMCE 5 中，您可以使用 setContent() 方法执行此操作。

假设您已使用id=”myTextarea” 初始化文本区域上的编辑器。首先使用相同的 id 访问编辑器，然后调用 setContent()。例如：

tinymce.get('myTextarea').setContent('<p>Hello world!</p>');

或者，您可以访问 活动编辑器，而不是通过 id 访问编辑器：

tinymce.activeEditor.setContent('<p>Hello world!</p>');

更多信息和示例在这里：https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce。

【讨论】：

'#myTextarea' 不起作用。在没有 jquery 样式选择器的情况下引用它。即只是'myTextarea'

【解决方案5】：

使用这个

tinyMCE.get('title').setContent(selected_article_title);

行不通。它将设置您的编辑器内容。

要设置编辑器源 html 元素（文本区域），您需要直接使用来设置它

$('#title').html(selected_article_title);

你需要知道你的编辑器和文本区域不是一回事！

【讨论】：

谢谢@Thariama，但这对我不起作用。我的文本区域还是空的。
8 年后，这拯救了我的一天。第二行代码更新了 textarea，并聚焦到 Text 视图中。

【解决方案6】：

如果您设置的内容包含 mso 标签，（从 Outlook2013 生成的 html 内容，例如包含编号列表），您会丢失列表元素。通过 tinymce.activeEditor.setContent(foo) 设置或 先设置 textarea 内容然后初始化 tinymce 给出相同的结果，我们无法正确看到列表元素，它们是左对齐的.但是如果我们使用setContent(foo, { format:'raw' }) 设置，我们可以正确地看到列表元素。为什么？

【讨论】：

【解决方案7】：

以下内容适用于 tinymce 版本 4，并且在拖动时不会将编辑器显示为文本区域：

function initializeEditors() {
    var editorContent = {};
    $("#photo-list").sortable({
        start: function (e, ui) {
            $('.attachment-info').each(function () {
                var id = $(this).attr('id');
                editorContent[id] = tinyMCE.get(id).getContent();
            });
        },
        stop: function (e, ui) {
            $('.attachment-info').each(function () {
                var id = $(this).attr('id');
                tinymce.execCommand('mceRemoveEditor', false, id);
                tinymce.execCommand('mceAddEditor', true, id);
                tinyMCE.get(id).setContent(editorContent[id]);
            });
        }
    });
}

【讨论】：

【解决方案8】：

$('#title').html(selected_article_title);

确保 selected_article_title 不包含任何 html 标签。

【讨论】：

【解决方案9】：

我只是写了这个而不是 setContent

const textarea = document.querySelector('#title')
textarea.innerHTML = selected_article_title

成功了

【讨论】：