web-dev-qa-db-ja.com

tinyMCEを使用したtextareaのsetContent

私はいくつかのテキストエリアを持っていますが、それらはすべて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"
});

なぜこれが機能しないのかわかりません。tinyMCEWebサイトの例を使用しています http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent

javascripttinymcetextarea
17
Miloš

私には解決策があります（いくつかの要素を提供してくれたThariamaより）

TinyMCEを使用してtextareaのコンテンツを設定するには、tinyMCEを初期化する前にtextareaに入力する必要があります。また、応答は次のとおりです。

  1. Textareaを作成します。

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

  2. Textareaのコンテンツを設定します。

    $('#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
Miloš

これで問題は解決すると思います

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 です。

16
Ryan Monreal

Tinymceバージョン4の場合

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

エディタを初期化した後でもうまくいきます。

12
Tom

これを使う

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

動作しません。エディターのコンテンツを設定します。

エディタのソースhtml要素（textarea）を設定するには、直接使用して設定する必要があります

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

あなたのエディタはtextareaと同じではないことに注意する必要があります！

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

Selected_article_titleにHTMLタグが含まれていないことを確認してください。

0
Moses Kirathe

以下は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
Shane McQuillan

msoタグを含むコンテンツ（たとえば、番号付きリストを含むOutlook2013から生成されたhtmlコンテンツ）を設定すると、リスト要素が失われます。 tinymce.activeEditor.setContent（foo）またはtextareaコンテンツを最初に設定してからtinymceを初期化で設定すると同じ結果が得られますが、リスト要素が正しく表示されず、左揃えになっています。しかし、setContent(foo, { format:'raw' })を使用して設定すると、リスト要素が適切に表示されます。どうして？

0
superuser000001