Cómo hacer pegar tinymce en texto plano por defecto

103

Lo busqué en Google miles de veces. Nadie ofrece una solución completa de cómo hacer que Tinymce pegue en texto sin formato de forma predeterminada y elimine cualquier formato sin hacer clic en el botón "pegar como texto".

¿Alguna idea de cómo implementar eso? ¿O cómo habilitar el botón "pegar como texto" automáticamente?

Gracias

Ryan
fuente

Respuestas:

59

EDITAR: esta solución es para la versión 3.x, para la versión 4.x lea la respuesta de @Paulo Neves

El problema es que el complemento Pegar restablece automáticamente la pasta de texto sin formato en cada pasta. Así que todo lo que tenemos que hacer es retrasarlo. El siguiente código debería ayudar.

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

....
});

La definición 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;
            });
        }
    }

Así que ahora siempre será claro.

er-v
fuente
Creo que se debe a la ausencia del complemento de pegado que he creado. Ejemplo de trabajo: eche un vistazo a 92.248.232.12/tinymce/examples/simple.html tinyMCE.init ({... oninit: "setPlainText", plugins: "paste" .. ..});
er-v
5
Gran respuesta, aunque he descubierto que obtengo errores JS relacionados con la definición de "ed". Esto fue fácil de solucionar simplemente eliminando la línea tinyMCE.get ("elm1") y colocando ed como el primer parámetro del método setPlainText: por ejemplo, "function setPlainText (ed) {...".
drmonkeyninja
8
En versiones posteriores de tinymce, se agregaron algunas opciones para solucionar este problema. paste_text_sticky_default: truey paste_text_sticky: trueen su configuración debería hacer el truco. (Estoy usando 3.5.0.1)
Greg
@ er-v cualquier sugerencia sobre cómo conservar la cadena formateada tinyMCE usando un formulario: stackoverflow.com/questions/17247900/…
codeObserver
13
Solo lo probé .init({ plugins: ["paste"], paste_as_text: true }), y funciona como un encanto con TinyMCE 4.1, sin la necesidad de una función adicional.
Rémi Breton
149

Para el tinyMCE 3X o 4X las cosas han cambiado un poco. ahora puedes hacer esto y funciona bien.

tinymce.init({
    plugins: "paste",
    paste_as_text: true
});
Paulo Almeida
fuente
5
Sí, los otros enfoques no funcionaron, pero este sí.
Tim
2
@Tim El enfoque que se muestra en la respuesta de esta pregunta es específico TinyMCE 3.x. Si está utilizando TinyMCE 4 o más grande, el enfoque en esta respuesta será suficiente.
Leonardo Montenegro
Hay un complemento u opción para casi cualquier cosa en TinyMCE ... ¡no es de extrañar que sea el mejor!
supersan
1
Gracias por la solución, pero esto en realidad significa que debo recordar editar el archivo de configuración cada vez que se actualizan los complementos.
Mike
84

He resuelto este problema con este código.

tinyMCE.init({
...
plugins : "paste",
paste_text_sticky : true,
setup : function(ed) {
    ed.onInit.add(function(ed) {
      ed.pasteAsPlainText = true;
    });
  }
....
})
Dariusz Lyson
fuente
11
Por lo que vale, creo que su solución es mejor que la respuesta seleccionada.
arikfr
@Dariusz Lyson, ¿alguna sugerencia sobre cómo conservar la cadena formateada tinyMCE mediante un formulario? : stackoverflow.com/questions/17247900/…
codeObserver
9
Recibo un error de JavaScript, cuya onInitpropiedad edno está definida. Unable to get property 'add' of undefined or null reference
Tim
35

Me encontré con este y descubrí que a partir de TinyMCE 3.4.2 puedes simplemente:

paste_text_sticky: true,
paste_text_sticky_default: true

... lo cual estuvo bien.

Stovroz
fuente
2
+1 para estas opciones de configuración, ¡no olvide agregar el complemento de pegado a la matriz de complementos!
Fredszaq
3
El editor todavía permite pegar otro texto que no sea sin formato cuando uso este enfoque.
Tim
7

Creo que la forma más fácil sería esta:

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

¿No es mejor usar:

var ed = tinyMCE.activeEditor;

en vez de:

var ed = tinyMCE.get('elm1');
Asen Mitov
fuente
Estoy de acuerdo, pude hacer que mi script funcionara usando activeEditor en lugar de get ('elm1'), también publiqué en mi respuesta su código + código aceptado como respuesta y está funcionando muy bien
GibboK
Este es un comentario dirigido a la respuesta de er-v . Esto no proporciona una respuesta a la pregunta. Una vez que tengas suficiente reputación , podrás comentar cualquier publicación .
Todos los trabajadores son esenciales
1

Para su información, TinyMCE ha mejorado esto implementándolo como una opción predeterminada en el complemento de pegado. Más información: http://www.tinymce.com/wiki.php/Plugin:paste

Sin embargo, todavía no es perfecto. Así que aquí hay un script que también se desconecta de todo 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', '');
            });

        },

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

laarsk
fuente
1

Sin complemento: escuche el evento de pegado, obtenga datos del portapapeles

Si no puede usar o no quiere usar un complemento por cualquier motivo, puede crear su propia función de devolución de llamada "pegar como texto sin formato" así:

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: Esto fue creado para TinyMCE 3.5.x. La compatibilidad puede variar según la versión.

gfullam
fuente
1
Excelente solución para 3.x - ninguna de las otras respuestas funcionó en mi caso
Rolf Pedro Ernst
1

si usa un archivo .yml, agregue el complemento pasteypaste_as_text: true

default:
  plugins:
    - paste
  paste_as_text: true
LifterCoder
fuente
-1

No estoy seguro de que esto sea posible, ya que "pegar como texto sin formato" en realidad realiza una limpieza en el texto antes de agregarlo a la ventana. Si simplemente pega datos en la ventana, no se pueden realizar operaciones. (A menos que haya conectado a onChangeo algo así), pero es posible que termine arreglando el código que ya se había pegado y, por lo tanto, 'arreglando dos veces'.

Mitch Dempsey
fuente
-1

Hice lo siguiente:

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

Y entonces:

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