我有一些文本区域,它们都带有 tinyMCE。
我想设置特定文本区域的内容,但我找不到方法。
我试过这个:
tinyMCE.get('title').setContent(selected_article_title);
这是我的文本区域:
<textarea style="width: 95%;" name="Title" id="title"></textarea>
这里是我的 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"
});
我不知道为什么这不起作用,我正在使用 tinyMCE 网站的示例http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent
我想这会解决你的问题
它适用于 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
我有解决方案(感谢 Thariama 给了我一些要素)
要使用 tinyMCE 设置文本区域的内容,我们必须在初始化 tinyMCE 之前填写文本区域。另外,回复如下:
创建文本区域:
<textarea style="width: 95%;" name="Title" id="title"></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"
});
完成了!享受吧。
对于 tinymce 版本 4,
tinymce.get('title').setContent(selected_article_title);
工作得很好——在初始化编辑器之后也是如此。
在 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.
用这个
tinyMCE.get('title').setContent(selected_article_title);
不会工作。它将设置您的编辑器内容。
要设置编辑器源 html 元素(文本区域),您需要直接使用它进行设置
$('#title').html(selected_article_title);
您需要注意,您的编辑器与文本区域不是一回事!
如果您设置包含 mso 标签的内容(从 outlook2013 生成的 html 内容,例如包含编号列表),您将丢失列表元素。通过 tinymce.activeEditor.setContent(foo) 或 first setting textarea content 然后初始化 tinymce 给出相同的结果,我们无法正确看到列表元素,它们是左对齐的。但是,如果我们使用
setContent(foo, { format:'raw' })
进行设置,我们会正确地看到列表元素。为什么?
以下适用于 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]);
});
}
});
}
$('#title').html(selected_article_title);
确保 selected_article_title 不包含任何 html 标签。
我只是写了这个而不是 setContent
const textarea = document.querySelector('#title')
textarea.innerHTML = selected_article_title
成功了
我参加聚会有点晚了,但是从 tinyMCE 版本 5 开始你应该使用:
tinymce.activeEditor.execCommand('mceInsertContent', false, 'My new content');
所有给出的答案都不适合我(使用 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);
}
});