web-dev-qa-db-fra.com

Coller le contenu en texte brut dans l'éditeur de sommation

J'ai besoin de copier coller du contenu dans mon éditeur de sommation. Mais quand je le colle, cela prend le style de la page d'où je l'ai copié. J'ai besoin de le coller en texte brut. y-a-t'il une solution?

javascripthtmlsummernote
29
Revathy kr

Utilisez le onPaste Rappel

Utilisez l'option onPaste pour définir un rappel qui supprimera les balises et insérera manuellement le texte.

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

Crédit: https://github.com/summernote/summernote/issues/3

Résoudre les problèmes de Firefox:

Vous pouvez toujours avoir des problèmes avec Firefox. Si oui, enveloppez document.execCommand dans une fonction timer pour retarder un peu son exécution:

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

Mise à jour pour v0.7.0 +

La position des rappels dans les options est modifiée après la version 0.7.0
Après la version 0.7.0, tous les rappels doivent être encapsulés par un objet de rappels. (source)

Cela signifie que le code d'origine doit être écrit comme

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

Remerciements à Mathieu Castets pour l'avoir signalé (donc si cela a aidé, votez pour sa réponse!)

TL; DR: Voici une fonction démo

70
jcuenod

Après la v0.7.0, tous les rappels doivent être encapsulés par l'objet callbacks. http://summernote.org/deep-dive/#callbacks

Donc, si vous utilisez summernote à partir de la version 0.7.0 ou supérieure, la réponse de jcuenod pourrait maintenant être réécrite comme suit:

$('.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);
        }
    }
});
24
Mathieu Castets

Le rappel onPaste fonctionne très bien mais j'avais des problèmes avec la gestion différente des sauts de ligne dans différents navigateurs. J'ai donc trouvé la solution suivante, qui utilise des sauts de ligne html:



    $(".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);
        }
      }
    });
4
Theo

A réussi à faire un horrible hack pour IE11. Cela demandera malheureusement également une autorisation de collage à l'utilisateur. Si quelqu'un trouve une meilleure suggestion, je suis à l'écoute.

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

2
Tom Glover