web-dev-qa-db-fra.com

Comment puis-je retirer tinyMCE puis le rajouter?

J'essaie d'ajouter l'éditeur tinyMCE à ma page, de le supprimer, puis de le rajouter à nouveau, mais des erreurs se produisent.

Lorsque je lance la partie A, puis la partie B, puis de nouveau la partie A, j'obtiens l'erreur suivante: 

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

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

Partie b

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

Modifier:

Ce qui précède représente les spinets de base qui créent le JavaScript. Ci-dessous, la fonction JavaScript complète. La première fois, la boîte de dialogue s'ouvre et fonctionne, le contenu est dans l'éditeur et il n'y a pas d'erreur. Lorsque je clique sur le bouton de fermeture, la boîte de dialogue est fermée. Lorsque je lance à nouveau la fonction, la boîte de dialogue s'affiche, mais l'éditeur est vide et l'erreur ci-dessus apparaît.

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

Pour supprimer proprement une instance d’éditeur et éviter les erreurs, utilisez:

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

Pour réinitialiser l'instance, utilisez:

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

Sachez que lorsque vous déplacez des éditeurs TinyMCE dans le DOM, vous devez également utiliser removeControl et addControl, sinon des erreurs JS se produiraient.

A partir de TinyMCE 4 les méthodes pour supprimer et réinitialiser une instance sont maintenant ...

Pour supprimer proprement une instance d’éditeur et éviter les erreurs, utilisez:

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

Pour réinitialiser l'instance, utilisez:

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

En retard à la fête, mais cela pourrait sauver la tête à quelqu'un. Voici ce qui a fonctionné pour moi sur la version 4.2.4 (2015-08-17):

tinymce.EditorManager.editors = [];

Ensuite, je pourrais ré-initier un éditeur sur le même div créé dynamiquement

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

Cela fonctionne pour moi:

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

Il est maintenant possible de simplement faire 

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

Si vous avez plusieurs éditeurs avec des paramètres différents, c'est le moyen de les redémarrer en conservant les paramètres.

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

D'accord. juste un mot de prudence. 

Si vous avez, par exemple, un total de 5 zones de texte où vous souhaitez ajouter/supprimer des occurrences tinymce.

ET 

vous souhaitez le faire plusieurs fois sur une page donnée, il est alors préférable de rechercher une solution alternative à votre besoin.

Pourquoi? .. parce que même si tout fonctionnerait bien, tout le détachement et le réattachement de tinymce prendrait beaucoup temps d'exécution. Le navigateur vous proposera d’arrêter le script, etc.

source: ma propre expérience dans laquelle j'ai essayé de conserver différents espaces de texte dans des divs cachés séparés et de les montrer à l'utilisateur si nécessaire.

4
Rakesh

Essaye ça: 

 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

Pour supprimer l'éditeur tinymce existant et ajouter de nouveaux besoins, élimination du tableau tinymce.EditorManager.editors. Cette solution fonctionne dans les deux cas: 1. Si vous ne possédez qu'un seul éditeur et que vous souhaitez le supprimer et le rajouter. 2. Si vous avez plusieurs éditeurs et que vous souhaitez supprimer un éditeur spécial et l'ajouter à nouveau.

console.log(tinymce.EditorManager.editors);

Cela vous donnera une vue du tableau et de l'index exact de l'éditeur que vous souhaitez supprimer. Par exemple, un exemple de sortie de la console ci-dessus peut être:

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

Voici la sortie de la console lorsque j'ai deux éditeurs tinymce sur textareas: # textarea-1 et # textarea-2 Supposons que je veuille supprimer # textarea-2 et l'ajouter de nouveau, puis procédez comme suit:

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

Ensuite, vous pouvez l'ajouter à nouveau simplement en utilisant init:

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

Si vous n'avez qu'un seul texte associé à l'éditeur tinymce, dites: # textarea-1 et que vous voulez le supprimer et le réinitialiser, vous pouvez simplement vider le fichier tinymce.EditorManager.editors en:

tinymce.EditorManager.editors = [];

Et puis vous pouvez ajouter en utilisant la commande init comme expliqué ci-dessus. Travaillé pour moi sans aucune erreur.

J'espère que ça aide

1
Learner

Juste le mettre à jour!

si vous regardez ceci pour réinitialiser le contenu de l'éditeur, au lieu de le détruire et de l'initialiser à nouveau, vous pouvez simplement changer le contenu comme ceci

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

Essaye ça:

    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

Au début j'ai utilisé:

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

Mais ces commandes étant asynchrones, la commande add échouera souvent. Pour contourner le problème, je voudrais:

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

Mais je détestais cette solution car elle paraissait plus lente pour l'utilisateur et vous ne pouviez même pas être sûr que 500 millisecondes suffiraient si l'ordinateur était lent.

Maintenant j'utilise:

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

Je ne sais pas pourquoi cela fonctionne, mais cela fonctionne et ce code ne présente aucun des problèmes asynchrones de l'ancien code que j'avais utilisé.

Essayez-le ici: https://jsfiddle.net/g0u059au/

0
Bjørn Stenfeldt

Toutes les solutions ci-dessus n'ont pas fonctionné pour moi ... Cela a bien fonctionné dans mon événement popup

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

de la documentation tinymce

0
mehmet

Pour ce que ça vaut, j'ai fini par faire ceci:

  1. Essayez de supprimer l'éditeur juste avant que je l'ajoute à la page (cela a fonctionné pour chrome)
  2. Avant de supprimer l'éditeur, déclenchez une sauvegarde. C'était important pour Firefox pour une raison quelconque.

Voici à quoi ressemblait l'ajout de l'éditeur:

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

J'ai eu un clic explicite qui a supprimé l'éditeur:

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