Comment faire coller Tinymce en texte brut par défaut


103

Googlé 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 automatiquement le bouton "coller comme texte"?

Je vous remercie

Réponses:


59

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

Le problème est que le plugin Paste réinitialise automatiquement le collage de texte brut à chaque collage. Donc, tout ce que nous devons faire - le faire reculer. Le code suivant devrait vous 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.


Je pense que c'est en raison de l'absence du plugin paste que j'ai créé exemple de travail - jetez un oeil 92.248.232.12/tinymce/examples/simple.html tinyMCE.init ({... oninit: "setPlainText", plugins: "paste" .. ..});
er-v

5
Excellente réponse, même si j'ai trouvé que j'obtenais des erreurs JS liées à la définition de "ed". C'était simple à corriger en supprimant simplement la ligne tinyMCE.get ("elm1") et en mettant ed comme premier paramètre de la méthode setPlainText: par exemple "function setPlainText (ed) {...".
drmonkeyninja

8
Dans les versions ultérieures de tinymce, certaines options ont été ajoutées pour résoudre ce problème. paste_text_sticky_default: trueet paste_text_sticky: truedans votre config devrait faire l'affaire. (J'utilise 3.5.0.1)
Greg

@ er-v des suggestions sur la façon de conserver la chaîne formatée tinyMCE en utilisant un formulaire: stackoverflow.com/questions/17247900
...

13
Je viens d'essayer .init({ plugins: ["paste"], paste_as_text: true }), et cela fonctionne comme un charme avec TinyMCE 4.1, sans avoir besoin d'une fonction supplémentaire.
Rémi Breton

149

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

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

5
Oui, les autres approches n'ont pas fonctionné, mais c'est le cas.
Tim

2
@Tim L'approche indiquée dans la réponse à cette question est spécifique à TinyMCE 3.x. Si vous utilisez TinyMCE 4 ou supérieur, l'approche de cette réponse fera l'affaire.
Leonardo Montenegro

Il existe un plugin ou une option pour à peu près tout dans TinyMCE .. pas étonnant que ce soit le meilleur!
supersan

1
Merci pour la solution, mais cela signifie en fait que je dois penser à modifier le fichier de configuration à chaque fois que les plugins sont mis à jour?
Mike

84

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;
    });
  }
....
})

11
Pour ce que ça vaut, je pense que votre solution est meilleure que la réponse choisie.
arikfr

@Dariusz Lyson, des suggestions sur la façon de conserver la chaîne formatée tinyMCE à l'aide d'un formulaire? : stackoverflow.com/questions/17247900/…
codeObserver

9
J'obtiens une erreur javascript, dont la onInitpropriété edn'est pas définie. Unable to get property 'add' of undefined or null reference
Tim

35

Je viens de rencontrer celui-ci moi-même et j'ai découvert qu'à partir de TinyMCE 3.4.2, vous pouvez simplement:

paste_text_sticky: true,
paste_text_sticky_default: true

... ce qui était bien.


2
+1 pour ces options de configuration, n'oubliez pas d'ajouter le plugin paste au tableau des plugins!
Fredszaq

3
L'éditeur autorise toujours le collage de texte autre que du texte brut lorsque j'utilise cette approche.
Tim

7

Je pense que le moyen le plus simple serait le suivant:

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

1

N'est-il pas préférable d'utiliser:

var ed = tinyMCE.activeEditor;

au lieu de:

var ed = tinyMCE.get('elm1');

Je suis d'accord, j'ai pu faire fonctionner mon script en utilisant activeEditor au lieu de get ('elm1'), j'ai également publié dans ma réponse votre code + code accepté comme réponse et cela fonctionne très bien
GibboK

Ceci est un commentaire dirigé vers la réponse de er-v . Cela ne répond pas à la question. Une fois que vous aurez une réputation suffisante, vous pourrez commenter n'importe quel message .
Tous les travailleurs sont essentiels

1

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

Cependant, ce n'est toujours pas parfait. Voici donc un script qui déclenche également tout 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

Sans plug-in: écoutez l'événement de collage, obtenez les données du presse-papiers

Si vous ne pouvez pas ou ne souhaitez pas utiliser un plug-in pour une raison quelconque, vous pouvez créer votre propre fonction de rappel "coller en texte brut" comme ceci:

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

Remarque: il a été créé pour TinyMCE 3.5.x. La compatibilité peut varier selon la version.


1
Excellente solution pour 3.x - aucune des autres réponses ne fonctionnait dans mon cas
Rolf Pedro Ernst

1

si vous utilisez un fichier .yml, ajoutez le plugin pasteetpaste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true

-1

Je ne suis pas sûr que ce soit possible, car "coller en texte clair" effectue en fait un nettoyage sur le texte avant de l'ajouter à la fenêtre. Si vous collez simplement des données dans la fenêtre, aucune opération ne peut être effectuée. (À moins que vous ne vous soyez connecté au onChangeou à quelque chose), mais ils pourraient finir par corriger du code qui avait déjà été collé et ainsi, le `` double fixer ''.


-1

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

Puis:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.