it-swarm.com.de

Wie entferne ich tinyMCE und füge es dann wieder hinzu?

Ich versuche, den tinyMCE-Editor meiner Seite hinzuzufügen, ihn zu entfernen und dann wieder hinzuzufügen, aber es werden Fehler angezeigt.

Wenn ich Teil A, dann Teil B, Als Teil A erneut ausführen, erhalte ich die Fehlermeldung: 

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

Teil 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";

Teil B

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

Bearbeiten:

Das obige ist das Backend-Spinet, aus dem das JavaScript erstellt wird. Unten sehen Sie die vollständige JavaScript-Funktion. Beim ersten Öffnen wird der Dialog geöffnet und funktioniert, der Inhalt befindet sich im Editor und es ist kein Fehler aufgetreten. Wenn ich auf die Schaltfläche "Schließen" klicke, wird der Dialog geschlossen. Wenn ich die Funktion erneut starte, wird das Dialogfeld angezeigt, der Editor ist jedoch leer und der obige Fehler ist aufgetreten.

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');
    }
});
}
34
Justin808

Um eine Editorinstanz sauber zu entfernen und Fehler zu vermeiden, verwenden Sie Folgendes:

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

Um die Instanz neu zu initialisieren, verwenden Sie:

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

Beachten Sie, dass Sie beim Verschieben von TinyMCE-Editoren im DOM auch removeControl und addControl verwenden müssen, da es sonst zu JS-Fehlern kommt.


Ab TinyMCE 4 Die Methoden zum Entfernen und Reinitialisieren einer Instanz sind jetzt ...

Um eine Editorinstanz sauber zu entfernen und Fehler zu vermeiden, verwenden Sie Folgendes:

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

Um die Instanz neu zu initialisieren, verwenden Sie:

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

Spät zur Party, aber es könnte jemandem die Kopfschmerzen ersparen. Was bei mir in Version 4.2.4 (2015-08-17) funktioniert hat:

tinymce.EditorManager.editors = []; 

Dann könnte ich einen Editor auf demselben dynamisch erstellten div neu starten

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

Das funktioniert für mich:

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

Es ist jetzt möglich, dies einfach zu tun 

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

Falls Sie über mehrere Editoren mit anderen Einstellungen verfügen, können Sie sie auf diese Weise neu starten, wobei die Einstellungen beibehalten werden.

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;
});
6
rioted

OK. Nur ein Wort der Vorsicht. 

Wenn Sie haben, sagen Sie .. insgesamt 5 Textbereiche, in denen Sie Tinymce-Instanzen hinzufügen/entfernen möchten.

UND 

sie möchten dies mehr als einmal auf einer bestimmten Seite tun. Dann ist es besser, nach einer alternativen Lösung für Ihre Anforderungen zu suchen.

Warum? ... denn obwohl alles gut funktionieren würde, wird das Entfernen und erneute Anbringen von tinymce viel Zeit in Anspruch nehmen. Der Browser bietet an, das Skript für Sie anzuhalten usw.

source : Meine eigene Erfahrung, bei der ich versucht habe, verschiedene Textbereiche in separaten, versteckten Divs zu behalten, und sie dem Benutzer bei Bedarf zeigen.

4
Rakesh

Versuche dies: 

 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);
2
Kamil Smrčka

Entfernen Sie den vorhandenen tinymce-Editor und fügen Sie neue Anforderungen für das tinymce.EditorManager.editors-Array hinzu. Diese Lösung funktioniert in beiden Fällen: 1. Wenn Sie nur einen Editor haben und ihn entfernen und erneut hinzufügen möchten. 2. Wenn Sie über mehrere Editoren verfügen und einen speziellen Editor entfernen und erneut hinzufügen möchten.

console.log(tinymce.EditorManager.editors);

Dadurch erhalten Sie einen Überblick über das Array und den genauen Index des gewünschten Editors, den Sie entfernen möchten. Eine Beispielausgabe der obigen Konsole kann beispielsweise sein:

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

Dies ist die Ausgabe der Konsole, wenn ich zwei tinymce-Editoren für Textbereiche habe: # textarea-1 und # textarea-2 Nehmen wir an, ich möchte # textarea-2 löschen und erneut hinzufügen. Dann können Sie Folgendes tun:

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

Dann können Sie es einfach mit init erneut hinzufügen:

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

Wenn Sie nur einen Textbereich mit dem tinymce-Editor verknüpft haben, sagen Sie: # textarea-1 und möchten Sie ihn entfernen und erneut initialisieren, dann können Sie tinymce.EditorManager.editors einfach leeren:

tinymce.EditorManager.editors = [];

Und dann können Sie den init-Befehl wie oben beschrieben hinzufügen. Arbeitete ohne Fehler für mich.

Ich hoffe, es hilft

1
Learner

Aktualisiere es einfach!

wenn Sie dies betrachten, um den Inhalt des Editors zurückzusetzen, können Sie den Inhalt des Editors nicht löschen und erneut initialisieren

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

Versuche dies:

    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

Am Anfang habe ich verwendet:

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

Da diese Befehle jedoch asynchron ausgeführt werden, schlägt der Befehl add häufig fehl. Als Problemumgehung würde ich Folgendes tun:

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

Aber ich hasste diese Lösung, weil sie für den Benutzer langsamer erschien und man sich nicht sicher war, ob 500 Millisekunden ausreichen, wenn der Computer langsam war.

Jetzt verwende ich:

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

Ich bin nicht sicher, warum dies funktioniert, aber es funktioniert und dieser Code hat keine asynchronen Probleme, die der alte Code hatte, den ich verwendet habe.

Versuchen Sie es hier: https://jsfiddle.net/g0u059au/

0

Alle oben genannten Lösungen funktionierten nicht für mich. Dies funktionierte gut in meinem Popup-Ereignis close

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');

aus der Tinymce-Dokumentation

0
mehmet

Für das, was es wert ist, habe ich das getan:

  1. Versuchen Sie, den Editor zu entfernen, bevor ich ihn zur Seite hinzufüge
  2. Bevor ich den Editor entferne, löse ein Speichern aus. Dies war aus irgendeinem Grund für Firefox wichtig.

So sah es aus, den Editor hinzuzufügen:

  $(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;
  });

Ich hatte einen expliziten Klick, der den Editor entfernte:

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