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

Question

我有一些带有tinyMCE的文本框。

我想要设置特定文本框的内容，但是我找不到方法。

我尝试了以下代码：

 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。

- Milos Cuculovic

Answer 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。

- Ryan Monreal

Answer 2

我有解决方案（感谢给我提供一些元素的Thariama）

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

1. 创建textarea：

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

   设置 textarea 的内容：

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

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

完成了！祝你使用愉快。

- Milos Cuculovic

Answer 3

对于 tinymce 的版本 4，

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

在初始化编辑器后，工作得非常好。

- Tom

Answer 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。

- Ben Long

---

#myTextarea没有起作用。请使用非jQuery样式的选择器引用它，即只需使用'myTextarea'。 - bendecko

Answer 5

使用这个

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

无法工作。它将设置您的编辑器内容。

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

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

您需要意识到，编辑器并不等同于文本区域！

- Thariama

---

谢谢@Thariama，但这对我没有用。我的文本区仍然是空的。 - Milos Cuculovic

8���后，这拯救了我的一天。第二行代码已经更新了文本区域，并将焦点聚焦到文本视图中。 - davewoodhall

Answer 6

所有给出的答案对我都不起作用（使用v6.4.2）。 我认为内容设置得太早了，即使在TinyMCE初始化后放置代码，更改也根本不会被注意到。

幸运的是，解决方法并不太麻烦。 尝试了一些超时后，我注意到只有过了一段时间才能起作用。如果在init_instance_callback选项中设置内容，则一定会起作用。

示例：

const content = "..."
const textarea = document.querySelector('#title');
tinymce.init({
  target: textarea,
  ...
  init_instance_callback(editor) {
    editor.setContent(content);
  }
});

- Mac Lotsen

---

你明白了。如果你需要在初始化之后设置内容，而不是使用 _setTimeout_，可以使用 async + await 逻辑。例如，在异步函数中使用 await tinymce.init(，然后稍后使用 tinyMCE.get('title').setContent( 将起作用。 - CPHPython

Answer 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]);
            });
        }
    });
}

- Shane McQuillan

Answer 8

我刚刚写了这段代码，代替了setContent

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

它运行成功了

- Ssadiq Roy

Answer 9

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

请确保selected_article_title不包含任何HTML标签。

- Moses Kirathe

Answer 10

我来晚了一点，但是自从tinyMCE 5版本以后，你应该使用：

tinymce.activeEditor.execCommand('mceInsertContent', false, 'My new content');

- thooyork