setContent of an textarea with tinyMCE

问题描述 投票:0回答:11

我有一些文本区域,它们都带有 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

javascript tinymce textarea
11个回答
19
投票

我想这会解决你的问题

它适用于 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


14
投票

我有解决方案(感谢 Thariama 给了我一些要素)

要使用 tinyMCE 设置文本区域的内容,我们必须在初始化 tinyMCE 之前填写文本区域。另外,回复如下:

  1. 创建文本区域:

    <textarea style="width: 95%;" name="Title"  id="title"></textarea>
    
  2. 设置文本区域的内容:

    $('#title').html(selected_article_title);
    
  3. 初始化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"
    });
    

完成了!享受吧。


13
投票

对于 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.


3
投票

用这个

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

不会工作。它将设置您的编辑器内容。

要设置编辑器源 html 元素(文本区域),您需要直接使用它进行设置

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

您需要注意,您的编辑器与文本区域不是一回事!


0
投票

如果您设置包含 mso 标签的内容(从 outlook2013 生成的 html 内容,例如包含编号列表),您将丢失列表元素。通过 tinymce.activeEditor.setContent(foo)first setting textarea content 然后初始化 tinymce 给出相同的结果,我们无法正确看到列表元素,它们是左对齐的。但是,如果我们使用

setContent(foo, { format:'raw' })
进行设置,我们会正确地看到列表元素。为什么?


0
投票

以下适用于 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]);
            });
        }
    });
}

0
投票
$('#title').html(selected_article_title);

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


0
投票

我只是写了这个而不是 setContent

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

成功了


0
投票

我参加聚会有点晚了,但是从 tinyMCE 版本 5 开始你应该使用:

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

0
投票

所有给出的答案都不适合我(使用 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);
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.