Come fare in modo che tinymce incolli in testo normale per impostazione predefinita


103

Cercato su Google migliaia di volte, nessuno fornisce una soluzione completa su come far incollare Tinymce in testo normale per impostazione predefinita e rimuovere qualsiasi formattazione senza fare clic sul pulsante "incolla come testo".

Qualche idea su come implementarlo? o come abilitare automaticamente il pulsante "incolla come testo"?

Grazie

Risposte:


59

EDIT: questa soluzione è per la versione 3.x, per la versione 4.x leggi la risposta da @Paulo Neves

Il problema è che il plug-in Paste reimposta automaticamente la pasta di testo normale su ogni incolla. Quindi tutto ciò che dobbiamo fare è rimetterlo a posto. Il codice seguente dovrebbe aiutare.

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

....
});

La definizione di 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;
            });
        }
    }

Quindi ora sarà sempre chiaro.


Penso che sia a causa del plug-in incolla assente che ho creato un esempio funzionante: dai un'occhiata a 92.248.232.12/tinymce/examples/simple.html tinyMCE.init ({... oninit: "setPlainText", plugins: "paste" .. ..});
er-v

5
Ottima risposta, anche se ho riscontrato di ricevere errori JS relativi alla definizione di "ed". Questo era semplice da risolvere rimuovendo semplicemente la riga tinyMCE.get ("elm1") e inserendo ed come primo parametro del metodo setPlainText: eg "function setPlainText (ed) {...".
drmonkeyninja

8
Nelle versioni successive di tinymce, sono state aggiunte alcune opzioni per prendersi cura di questo. paste_text_sticky_default: truee paste_text_sticky: truenella tua configurazione dovrebbe fare il trucco. (Sto usando 3.5.0.1)
Greg

@ er-v qualche suggerimento su come a persistere la stringa formattata utilizzando un modulo TinyMCE: stackoverflow.com/questions/17247900/...
codeObserver

13
Appena provato .init({ plugins: ["paste"], paste_as_text: true })e funziona a meraviglia con TinyMCE 4.1, senza la necessità di una funzione aggiuntiva.
Rémi Breton

149

Per il tinyMCE 3X o 4X le cose sono leggermente cambiate. ora puoi farlo e funziona bene.

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

5
Sì, gli altri approcci non hanno funzionato ma questo funziona.
Tim

2
@Tim L'approccio mostrato nella risposta a questa domanda è specifico TinyMCE 3.x. Se stai usando TinyMCE 4 o più grande, l'approccio in questa risposta andrà bene.
Leonardo Montenegro

C'è un plugin o un'opzione per qualsiasi cosa in TinyMCE .. non c'è da stupirsi che sia il migliore!
supersan

1
Grazie per la soluzione, ma questo in realtà significa che devo ricordarmi di modificare il file di configurazione ogni volta che i plugin vengono aggiornati?
Mike

84

Ho risolto questo problema con questo codice

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

11
Per quel che vale, penso che la tua soluzione sia migliore della risposta selezionata.
arikfr

@ Dariusz Lyson, qualche suggerimento su come persistere la stringa formattata tinyMCE utilizzando un modulo? : Stackoverflow.com/questions/17247900/...
codeObserver

9
Ottengo un errore javascript, che la onInitproprietà di ednon è definita. Unable to get property 'add' of undefined or null reference
Tim

35

Mi sono imbattuto in questo io stesso e ho scoperto che a partire da TinyMCE 3.4.2 puoi semplicemente:

paste_text_sticky: true,
paste_text_sticky_default: true

... che era carino.


2
+1 per queste opzioni di configurazione, non dimenticare di aggiungere il plug-in incolla all'array del plug-in!
Fredszaq

3
L'editor consente ancora di incollare testo diverso dal normale quando utilizzo questo approccio.
Tim

7

Penso che il modo più semplice sarebbe questo:

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

1

Non è meglio usare:

var ed = tinyMCE.activeEditor;

invece di:

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

Sono d'accordo, sono stato in grado di far funzionare il mio script utilizzando activeEditor invece di get ('elm1'), ho anche pubblicato nella mia risposta il tuo codice + codice accettato come risposta e funziona benissimo
GibboK

Questo è un commento diretto alla risposta di er-v . Questo non fornisce una risposta alla domanda. Una volta che avrai una reputazione sufficiente , sarai in grado di commentare qualsiasi post .
Tutti i lavoratori sono essenziali

1

Cordiali saluti, TinyMCE lo ha migliorato implementandolo come opzione predefinita nel plug-in incolla. Maggiori informazioni: http://www.tinymce.com/wiki.php/Plugin:paste

Tuttavia, non è ancora perfetto. Quindi ecco uno script che fa scattare anche tutto l'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', '');
            });

        },

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


1

Senza plug-in: ascolta per incollare l'evento, ottieni i dati degli appunti

Se non puoi utilizzare o non desideri utilizzare un plug-in per qualsiasi motivo, puoi creare la tua funzione di callback "incolla come testo normale" in questo modo:

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

Nota: questo è stato creato per TinyMCE 3.5.x. La compatibilità può variare in base alla versione.


1
Ottima soluzione per 3.x - nessuna delle altre risposte funzionava nel mio caso
Rolf Pedro Ernst

1

se usi un file .yml, aggiungi il plugin pasteepaste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true

-1

Non sono sicuro che ciò sia possibile, dal momento che "incolla come testo normale" esegue effettivamente la pulizia del testo prima di aggiungerlo alla finestra. Se incolli semplicemente i dati nella finestra, non è possibile eseguire alcuna operazione. (A meno che non ti sei agganciato a onChangeo qualcosa del genere), ma potresti finire per correggere il codice che era già stato incollato e quindi, "raddoppiarlo".


-1

Ho fatto come segue:

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

E poi:

tinyMCE.init({
    // ...
    plugins: "paste",
    oninit: pastePlainText // Note, without "
    // ...
})
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.