web-dev-qa-db-ja.com

summernoteエディターでコンテンツをプレーンテキストとして貼り付ける

Summernoteエディターで一部のコンテンツをコピーして貼り付ける必要がありますが、貼り付けると、コピー元のページのスタイルが使用されます。プレーンテキストとして貼り付ける必要があります。解決策はありますか？

javascripthtmlsummernote
29
Revathy kr

onPaste コールバックを使用します

onPaste オプションを使用して、タグを取り除き、テキストを手動で挿入するコールバックを定義します。

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

クレジット： https://github.com/summernote/summernote/issues/3

Firefoxの問題の解決：

Firefoxにまだ問題がある可能性があります。その場合、ラップdocument.execCommand実行を少しだけ遅らせるタイマー関数：

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

V0.7.0以降の更新

V0.7.0以降、オプション内のコールバックの位置が変更されました
v0.7.0以降、すべてのコールバックはコールバックオブジェクトによってラップされる必要があります。 （source）

これは、元のコードを次のように記述する必要があることを意味します

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

これを指摘してくれたMathieu Castetsへの謝辞（したがって、このビットが助けになったなら、彼の答えを支持してください！）

TL; DR：機能的なデモ

70
jcuenod

V0.7.0以降、すべてのコールバックはコールバックオブジェクトによってラップされる必要があります。 http://summernote.org/deep-dive/#callbacks

したがって、v0.7.0以降のsummernoteを使用している場合、jcuenodの答えは次のように書き換えられます。

$('.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

OnPaste-callbackはうまく機能しますが、異なるブラウザーでの改行の異なる処理に問題がありました。そこで、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);
        }
      }
    });
4
Theo

IE11で恐ろしいハックを機能させることができました。悲しいことに、ユーザーからの貼り付けの許可も求められます。誰かがより良い提案を見つけた場合、私はすべて耳です。

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