web-dev-qa-db-fra.com

Comment faire tinymce coller en texte brut par défaut

Googlé il des milliers de fois, personne ne donne une solution complète sur la façon de faire coller Tinymce en texte brut par défaut et de supprimer toute mise en forme sans cliquer sur le bouton "coller en tant que texte".

Des idées sur la façon de mettre en œuvre cela? ou comment activer le bouton "coller en tant que texte" automatiquement?

Merci

javascriptjquerytinymce
97
Ryan

EDIT: cette solution concerne la version 3.x, pour la version 4.x, lisez la réponse de @Paulo Neves

Le problème est que le plug-in Paste réinitialise automatiquement le texte brut collé à chaque collage. Donc, tout ce que nous devons faire - le ramener. Le code suivant devrait aider.

tinyMCE.init({
...
oninit : "setPlainText",
plugins : "paste"

....
});

La définition de setPlainText

 function setPlainText() {
        var ed = tinyMCE.get('Elm1');

        ed.pasteAsPlainText = true;  

        //adding handlers crossbrowser
        if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) {
            ed.onKeyDown.add(function (ed, e) {
                if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45))
                    ed.pasteAsPlainText = true;
            });
        } else {            
            ed.onPaste.addToTop(function (ed, e) {
                ed.pasteAsPlainText = true;
            });
        }
    }

Alors maintenant, ce sera toujours clair.

56
er-v

Pour le tinyMCE 3X ou 4X, les choses ont un peu changé. Maintenant, vous pouvez le faire et cela fonctionne bien.

tinymce.init({
    plugins: "paste",
    paste_as_text: true
});
137
Paulo Almeida

J'ai résolu ce problème avec ce code

tinyMCE.init({
...
plugins : "paste",
paste_text_sticky : true,
setup : function(ed) {
    ed.onInit.add(function(ed) {
      ed.pasteAsPlainText = true;
    });
  }
....
})
83
Dariusz Lyson

Je viens juste de tomber sur celui-ci et de découvrir qu'à partir de TinyMCE 3.4.2, vous pouvez simplement:

paste_text_sticky: true,
paste_text_sticky_default: true

... qui était Nice.

35
stovroz

Je pense que le moyen le plus simple serait ceci:

tinymce.init({
   ...
   paste_as_text: true,
   plugins: "paste",
   ...
});
6
brothers28

Sans plug-in: Écouter un événement coller, obtenir les données du presse-papier

Si vous ne pouvez pas utiliser ou ne voulez pas utiliser de plug-in pour quelque raison que ce soit, vous pouvez créer votre propre fonction de rappel "coller en texte brut" comme suit:

tinyMCE.init({

    // ...,

    setup: function (editor) {

        // Listen for paste event, add "Paste as plain text" callback
        editor.onPaste.add(function (editor, e) {

            // Prevent default paste behavior
            e.preventDefault();

            // Check for clipboard data in various places for cross-browser compatibility.
            // Get that data as text.
            var content = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

            // Let TinyMCE do the heavy lifting for inserting that content into the editor.
            editor.execCommand('mceInsertContent', false, content);
        });
    }
});

Note: Ceci a été créé pour TinyMCE 3.5.x. La compatibilité peut varier selon les versions.

1
gfullam

Pour info, TinyMCE a amélioré cela en l'implémentant comme une option par défaut dans le plugin paste. Plus d'infos: http://www.tinymce.com/wiki.php/Plugin:paste

Cependant, ce n'est toujours pas parfait. Donc, voici un script qui déclenche également tous les HTML:

// Paste
        paste_auto_cleanup_on_paste : true,
        paste_remove_spans: true,
        paste_remove_styles: true,
        paste_retain_style_properties: false,

        paste_preprocess : function(pl, o) 
        {    // Replace <div> with <p>
            o.content = o.content.replace(/<div>/gi, "<p>");    
            o.content = o.content.replace(/<\/div>/gi, "</p>");
            o.content = o.content.replace(/<\r\n/gi, "\n");
            o.content = o.content.replace(/<\n\n/gi, "\n");
            o.content = o.content.replace(/<\n\n/gi, "\n");

            // Replace empty styles
            o.content = o.content.replace(/<style><\/style>/gi, "");    

            o.wordContent = true;            
        },

        paste_postprocess : function(pl, o) 
        {    //console.log(o.node.innerHTML);
            var ed = pl.editor, dom = ed.dom;

            // Remove all tags which are not <p> or <br>
            tinymce.each(dom.select('*', o.node), function(el) 
            {    if (el.tagName.toLowerCase() != "p" && el.tagName.toLowerCase() != "br") 
                {    dom.remove(el, 1); // 1 = KeepChildren
                    console.log(el.tagName);
                }
                dom.setAttrib(el, 'style', '');
            });

        },

Source: http://www.tinymce.com/forum/viewtopic.php?pid=60121#p60121

1
laarsk

Ne vaut-il pas mieux utiliser:

var ed = tinyMCE.activeEditor;

au lieu de:

var ed = tinyMCE.get('Elm1');
1
Asen Mitov

J'ai fait comme suit:

var pastePlainText = function() {
    // No need to pass in an ID, instead fetch the first tinyMCE instance
    var ed = tinyMCE.get(0); 
    ed.pasteAsPlainText = true;  

    //adding handlers crossbrowser
    if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) {
        ed.onKeyDown.add(function (ed, e) {
            if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45))
                ed.pasteAsPlainText = true;
        });
    } else {            
        ed.onPaste.addToTop(function (ed, e) {
            ed.pasteAsPlainText = true;
        });
    }
};

Et alors:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
0
Helge