javascript - code - wysiwyg editor bootstrap 4

Pegue el contenido como texto plano en el editor de summernote

Question

Necesito copiar y pegar algo de contenido en mi editor de summernote. Pero cuando pegue, toma el estilo de la página desde donde lo copié. Necesito pegarlo como texto simple. ¿Hay alguna solución?

Answer 1

Después de v0.7.0, cada devolución de llamada debe ser envuelta por el objeto de devolución de llamada. (source)

Entonces, si está utilizando summernote de v0.7.0 o superior, la respuesta de jcuenod ahora podría reescribirse como:

$(''.summernote'').summernote({
callbacks: {
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData(''Text'');
e.preventDefault();
// Firefox fix
setTimeout(function () {
document.execCommand(''insertText'', false, bufferText);
}, 10);
}
}
});

Answer 2

Utilice la onPaste llamada onPaste

Use la opción onPaste para definir una devolución de llamada que eliminará las etiquetas e insertará manualmente el texto.

$editor.summernote({
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData(''Text'');
e.preventDefault();
document.execCommand(''insertText'', false, bufferText);
}
});

Crédito: https://github.com/summernote/summernote/issues/303

Resolver problemas de Firefox:

Es posible que aún tengas problemas con Firefox. Si es así, envuelva document.execCommand en una función de temporizador para retrasar un poco su ejecución:

setTimeout(function(){
document.execCommand( ''insertText'', false, bufferText );
}, 10);

Actualización para v0.7.0 +

La posición de las devoluciones de llamada en las opciones se cambia después de v0.7.0
Después de v0.7.0, cada devolución de llamada debe ser envuelta por el objeto de devolución de llamada. (source)

Esto significa que el código original debe escribirse como

$editor.summernote({
callbacks: {
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData(''Text'');
e.preventDefault();
document.execCommand(''insertText'', false, bufferText);
}
}
});

Gracias a Mathieu Castets por señalar esto (así que si este bit le ayudó, ¡aumente su respuesta!)

TL; DR: Aquí hay una demo funcional

Answer 3

La devolución de llamada onPaste funciona muy bien, pero estaba teniendo problemas con el manejo diferente de los saltos de línea en diferentes navegadores. Así que se me ocurrió la siguiente solución, que utiliza html-linebreaks:

$(".htmleditor").summernote({
callbacks: {
// callback for pasting text only (no formatting)
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData(''Text'');
e.preventDefault();
bufferText = bufferText.replace(//r?/n/g, ''<br>'');
document.execCommand(''insertHtml'', false, bufferText);
}
}
});

Answer 4

Se las arregló para hacer un horrible trabajo de hack para IE11. Lamentablemente, esto también solicitará un permiso de pegado del usuario. Si alguien descubre una sugerencia mejor, soy todo oídos.

var trap = false;
$(document).ready(function () {
$(''#summernote'').summernote({
callbacks: {
onPaste: function (e) {
if (document.queryCommandSupported("insertText")) {
var text = $(e.currentTarget).html();
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData(''Text'');
setTimeout(function () {
document.execCommand(''insertText'', false, bufferText);
}, 10);
e.preventDefault();
} else { //IE
var text = window.clipboardData.getData("text")
if (trap) {
trap = false;
} else {
trap = true;
setTimeout(function () {
document.execCommand(''paste'', false, text);
}, 10);
e.preventDefault();
}
}
}
}
})
})

JSFiddle