web-dev-qa-db-ja.com

tinyMCEを削除してから追加し直すにはどうすればよいですか？

TinyMCEエディターをページに追加して削除し、再度追加しようとしていますが、エラーが発生しています。

パートAを実行してからパートBを実行すると、パートAよりもエラーが発生します。

Error: g.win.document is null
Source File: tiny_mce/tiny_mce.js Line: 1

パートA

        js += "            tinyMCE.init({ ";
        js += "                'mode' : 'exact', \n";
        js += "                'elements' : '" + ctrl.ID + "Editor', \n";
        js += "                'plugins' : 'insertdatetime,TVCMSLink,TVCMSImage',\n";
        js += "                'theme' : 'advanced',\n";
        js += "                'theme_advanced_layout_manager' : 'SimpleLayout',\n";
        js += "                'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',\n";
        js += "                'theme_advanced_buttons2' : '',\n";
        js += "                'theme_advanced_buttons3' : ''\n";
        js += "            });\n";

パートB

        js += "                        tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove();\n";

編集：

上記はJavaScriptを作成するバックエンドスピネットです...以下は完全なJavaScript関数です。最初にダイアログを開いて動作すると、コンテンツはエディターにあり、エラーはありません。閉じるボタンをクリックすると、ダイアログが閉じます。関数を再度実行すると、ダイアログが表示されますが、エディターは空であり、上記のエラーがあります。

function show_HP1B0() {
$('.EditLink').hide();
$.ajax({
    type: 'post',
    url: 'genericHandler.ashx',
    data: 'cmd=select&tableName=ExtraBlocks&id=4',
    dataType: 'json',
    success: function(data) {
        $('#HP1B0Editor').html(data['rows'][0]['Content']);
        alert($('#HP1B0Editor').html());
        tinyMCE.init({                 'mode' : 'exact', 
            'elements' : 'HP1B0Editor', 
            'plugins' : 'insertdatetime,Link,Image',
            'theme' : 'advanced',
            'theme_advanced_layout_manager' : 'SimpleLayout',
            'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',
            'theme_advanced_buttons2' : '',
            'theme_advanced_buttons3' : ''
        });
        var dlg = $('#ctl00_EXTRA_HTML_0_HP1B0Editor').dialog({
            modal: false,
            draggable: false,
            position: 'center',
            zIndex: 99999,  // Above the overlay
            width: 370,
            title: 'Content Block Editor',
            closeText: '',
            open: function () {
                $('body').css('overflow', 'hidden');
                if ($.browser.msie) { $('html').css('overflow', 'hidden'); } $('<div>').attr('id', 'loader').appendTo('body').show();
            },
            close: function () { $('body').css('overflow', 'auto'); if ($.browser.msie) { $('html').css('overflow', 'auto'); } $('#loader').remove(); },
            buttons: {
                'Save': function () {
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                },
                'Cancel': function () {
        alert('HP1B0Editor');
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                }
            }
        }).parent();
        dlg.appendTo(jQuery('form:first'));
    },
    error: function(data) {
        $('.EditLink').show();
        $('#HP1B0Editor').html('Error');
    }
});
}
javascriptjqueryhtmltinymcewysiwyg
34
Justin808

エディターインスタンスを完全に削除してエラーを回避するには、次を使用します。

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

インスタンスを再初期化するには：

tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);

DOMでTinyMCEエディターを移動する場合は、removeControlとaddControlも必要です。そうしないと、JSエラーが発生することに注意してください。

TinyMCE 4現在、インスタンスを削除して再初期化するメソッドは...

エディターインスタンスを完全に削除してエラーを回避するには、次を使用します。

tinymce.EditorManager.execCommand('mceRemoveEditor',true, editor_id);

インスタンスを再初期化するには：

tinymce.EditorManager.execCommand('mceAddEditor',true, editor_id);
72
Thariama

パーティーに遅れたが、それは誰かの頭痛を救うかもしれない。バージョン4.2.4（2015-08-17）でうまくいったのは次のとおりです。

tinymce.EditorManager.editors = [];

その後、同じ動的に作成されたdivでエディターを再初期化できます

tinymce.init({selector:"#text"});
28
Eric

これは私のために働く：

if (typeof(tinyMCE) != "undefined") {
  if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
    tinyMCE.editors=[]; // remove any existing references
  }
}
15
dageddy

今やることが可能になりました

tinymce.remove("#id .class or tag");
13
jberculo

異なる設定のエディターがさらにある場合、これは設定を保持して再起動する方法です。

tinymce.EditorManager.editors.forEach(function(editor) {
    // code injection
    var old_global_settings = tinymce.settings;
    tinymce.settings = editor.settings;
    tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
    tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
    tinymce.settings = old_global_settings;
});
7
rioted

OK。注意の言葉。

たとえば、tinymceインスタンスを追加/削除したい合計5つのテキストエリアがある場合。

[〜＃〜] and [〜＃〜]

特定のページでこれを複数回行いたい場合は、要件に合った代替ソリューションを探す方が良いでしょう。

なぜでしょうか？。すべてがうまくいくとしても、tinymceのすべてのデタッチと再アタッチには、実行にmuch時間がかかるからです。ブラウザは、スクリプトを停止するかどうかを提案します。

source：異なるtextareasを別々の非表示divに保持して、必要に応じてユーザーに表示しようとした私自身の経験。

4
Rakesh

これを試して：

 tinymce.remove();

    setTimeout(function () {
    tinymce.init(
        {
        selector: 'textarea',
        menubar: false,
        height: "300",
        plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor ksfm',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help'
        ],
        toolbar: 'undo redo | fontselect fontsizeselect styleselect | alignleft aligncenter alignright alignjustify | bold italic underline strikethrough | link table | ksfm'
        }
        );

    }, 1);
3
Kamil Smrčka

既存のtinymceエディターを削除し、tinymce.EditorManager.editors配列の新しいニーズクリアランスを追加します。このソリューションは、両方の場合に機能します。1.エディターが1つだけで、それを再度削除して追加する場合。 2.複数のエディターがあり、特別なエディターを削除して再度追加する場合。

console.log(tinymce.EditorManager.editors);

これにより、削除したいエディターの配列と正確なインデックスが表示されます。たとえば、上記のコンソールの出力例の1つは次のとおりです。

Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]

これは、textareasに2つのtinymceエディターがある場合のコンソールの出力です。＃textarea-1と＃textarea-2＃textarea-2を削除して再追加したい場合は、次のように実行できます。

tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array

その後、initを使用して簡単に再度追加できます。

tinymce.init({
    selector:'#ts-textarea-2'
});

Tinymceエディターに関連付けられたtextareaが1つしかない場合、＃textarea-1を指定して、削除して再初期化する場合は、tinymce.EditorManager.editorsを空にするだけです。

tinymce.EditorManager.editors = [];

そして、上記で説明したように、initコマンドを使用して追加できます。エラーなしで私のために働いた。

それが役に立てば幸いです

1
Learner

更新するだけです！

エディターのコンテンツをリセットするためにこれを見ている場合、それを破壊して再度初期化する代わりに、このようなコンテンツを単に変更することができます

var editor = tinymce.get('editor_id'); //the id of your textarea
editor.setContent(content);  //any html as string
1
azerafati

これを試して：

    var default_value_1 = 'test';
    var default_value_2 = 'test';

    tinyMCE.remove();

    tinyMCE.init({
        selector: '#id_element_1',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code',
        toolbar: "code formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat"
    }).then(function(editors){
        editors[0].setContent(default_value_1 || '');
    });

    tinyMCE.init({
        selector: '#id_element_2',
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help code',
        toolbar: "code formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat"
    }).then(function(editors){
        editors[0].setContent(default_value_2 || '');
    });
0
nthaih

最初に使用したもの：

tinymce.execCommand('mceRemoveEditor', true, id);
tinymce.execCommand('mceAddEditor', true, id);

ただし、これらのコマンドは非同期で実行されるため、addコマンドは失敗することがよくあります。回避策として、私は：

tinymce.execCommand('mceRemoveEditor', true, id);
setTimeout(function() {
    tinymce.execCommand('mceAddEditor', true, id);
}, 500);

しかし、私はこの解決策が嫌いでした。なぜなら、ユーザーにとっては遅いように見えたからです。コンピューターが遅い場合でも500ミリ秒で十分であるとは言えませんでした。

今私は使用しています：

tinymce.remove(id);
tinymce.init({
    selector: id
});

なぜこれが機能するのかはわかりませんが、機能します。このコードには、私が使っていた古いコードにあった非同期の問題はありません。

ここで試してください： https://jsfiddle.net/g0u059au/

0
Bjørn Stenfeldt

上記のすべての解決策は私にとってはうまくいきませんでした...これは私のポップアップ終了イベントでうまくいきました

var editor = tinyMCE.get('txtMailingText');
if (editor!=null) {
    editor.destroy();
}
0
Alexander
// Remove all editors bound to divs
tinymce.remove('div');

// Remove all editors bound to textareas
tinymce.remove('textarea');

// Remove all editors
tinymce.remove();

// Remove specific instance by id
tinymce.remove('#id');

tinymceドキュメントから

0
mehmet

その価値のために、私はこれをやった：

  1. ページに追加する直前にエディターを削除してみてください（これはChromeで機能しました）
  2. エディターを削除する前に、保存をトリガーします。これは、何らかの理由でfirefoxにとって重要でした。

エディターを追加すると次のようになります。

  $(function() {
    tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'fred');
    #{tinymce_javascript(:simple_editor, {height: 150, :selector => 'fred'})}
  });

  $(document).on('click', '.tinyMCE-save', function(event) {
    tinyMCE.triggerSave();
    return true;
  });

明示的なクリックでエディターが削除されました。

<a href="#" class="tinyMCE-save cool-js-click-handler">Cancel</a>
0
John Naegle