Javascript 使用 tinyMCE 设置文本区域的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11780766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
setContent of an textarea with tinyMCE
提问by Milo?
I have some textareas and all of them are with tinyMCE.
我有一些 textareas，它们都带有 tinyMCE。
I would like to set the content of the specific textarea, but I can't find how.
我想设置特定文本区域的内容，但我找不到如何设置。
I have tryed this:
我试过这个：
tinyMCE.get('title').setContent(selected_article_title);
here is my textarea:
这是我的文本区域：
<textarea style="width: 95%;" name="Title" id="title"></textarea>
And here my tinyMCE init:
这里是我的 tinyMCE init：
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"
});
I don't know why this is not working, I am using the exemple from the tinyMCE website http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent
我不知道为什么这不起作用，我正在使用 tinyMCE 网站http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent 中的示例
采纳答案by Milo?
I have the solution (thans to Thariama who gives me some elements)
我有解决方案（感谢 Thariama，他给了我一些元素）
To set the content of an textarea using tinyMCE, we heve to fill in the textarea before init the tinyMCE. Also, the response is as follows:
要使用 tinyMCE 设置 textarea 的内容，我们必须在初始化 tinyMCE 之前填充 textarea。此外，响应如下：
Create the textarea:
<textarea style="width: 95%;" name="Title" id="title"></textarea>Set the content of the textarea:
$('#title').html(selected_article_title);Init the 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" });
创建文本区域：
<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" });
And it's done ! Enjoy.
大功告成！享受。
回答by Ryan Monreal
I think this will solve your problem
我认为这将解决您的问题
it works fine for TinyMCE v:4..
它适用于 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'});
the link for the code is TinyMCE setContent
代码链接是TinyMCE setContent
回答by Tom
For tinymce version 4,
对于 tinymce 版本 4，
tinymce.get('title').setContent(selected_article_title);
works just fine - also after initializing the editor.
工作得很好 - 也在初始化编辑器之后。
回答by Thariama
Using this
使用这个
tinyMCE.get('title').setContent(selected_article_title);
won't work. It will set your editor content.
不会工作。它将设置您的编辑器内容。
To set the editor source html element (the textarea) you will need to set it directly using
要设置编辑器源 html 元素（textarea），您需要直接使用
$('#title').html(selected_article_title);
You need to be aware that your editor is not that same as the textarea!
您需要注意您的编辑器与 textarea 不同！
回答by Ben Long
In TinyMCE 5, you can do this using the setContent()method.
在 TinyMCE 5 中，您可以使用该setContent()方法执行此操作。
Let's say you have initialized the editor on a textarea with id=”myTextarea”. First access the editor using that same id, then call setContent(). For example:
假设您已使用id=”myTextarea”. 首先使用相同的 id 访问编辑器，然后调用setContent(). 例如：
tinymce.get('#myTextarea').setContent('<p>Hello world!</p>');
Or, instead of accessing the editor by id, you can access the active editor:
或者，您可以访问活动编辑器，而不是通过 id 访问编辑器：
tinymce.activeEditor.setContent('<p>Hello world!</p>');
More info and examples here: https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce.
更多信息和示例：https: //www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce。
回答by Shane McQuillan
The following works with tinymce version 4, and doesn't show the editor as a textarea while it's being dragged:
以下适用于 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]);
});
}
});
}
回答by Moses Kirathe
$('#title').html(selected_article_title);
Make sure that selected_article_title does not contain any html tags.
确保 selected_article_title 不包含任何 html 标签。
回答by superuser000001
If you set a content which contains msotags, (a html content generated from outlook2013, which contains numbered list for example), you loose the list elements. Setting through tinymce.activeEditor.setContent(foo)or first setting textarea content and then initializing tinymcegives the same result, we can not see list elements properly, they are left aligned. But if we set using setContent(foo, { format:'raw' })wee see the list elements properly. Why?
如果您设置包含mso标签的内容（从 Outlook2013 生成的 html 内容，例如包含编号列表），则会丢失列表元素。通过tinymce.activeEditor.setContent(foo)设置或先设置 textarea 内容然后初始化 tinymce给出相同的结果，我们无法正确看到列表元素，它们是左对齐的。但是如果我们设置 using setContent(foo, { format:'raw' })wee 可以正确地看到列表元素。为什么？
