Entersquare Inc.

【Summernote】コピペする時に改行コードをbrにしたい（メモ帳、テキストエディット）

【Summernote】コピペする時に改行コードをbrにしたい（メモ帳、テキストエディット）

以前、「コピペする時に余計なhtmlタグをペーストしないようにする」という記事を書きました。

オプションで削除しないタグは設定できるのですが、
改行コードでは改行していません。

テキストエディタなどのテキストをコピペした時には改行が無くなってしまいます。

そこで、今回は改行コードも改行させるように一手間かけてみました。

改行コードをbrに置換するように、オプションに指定しておく

今回は改行コードをbrにしたいので、先に置換するタグをbrに指定しておきます。

$('#editor1').summernote({
    //他の設定は省略します
    
    cleaner:{
        action : 'paste' , 
        //▽このnewlineに<br>を入れておきます
        newline : '<br>' ,
        notStyle : 'position:absolute;top:0;left:0;right:0' ,
        icon : 'クリア' ,
        keepHtml : true ,
        keepOnlyTags : [ '<p>' , '<br>' ], 
        keepClasses : false ,
        badTags : [ 'style' , 'script' , 'applet' , 'embed' , 'noframes' , 'noscript' , 'html'], 
        badAttributes : [ 'style' , 'start'], 
        limitChars : false ,
        limitDisplay : 'both' ,
        limitStop : false
    }
});

置換している箇所のコードを書き換える(summernote-cleaner.js)

コピペの際にhtmlを削除するように、プラグインを追加しています。

このファイルがhtmlを削除したり、classを削除したり置換を担当してくれているわけなので、このファイルを直接書き換えていきます。

書き換えるファイル：summernote-cleaner.js

ひとつめ、57行目

if (!options.cleaner.keepClasses) {
    //▼これをコメントアウト
    //var sS = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g;

    //▽これを追加
    var sS = /(class=(")?Mso[a-zA-Z]+(")?)/g
    out = txt.replace(sS, ' ');
}

オプションのDeepClassesをfalseにしていると（classを消すように設定）、
改行コードの\nと\rも一緒にスペースに置換されているので、
\n|\rを削除します。

ふたつめ、60行目

//▼これをコメントアウト
//var nL = /(\n)+/g;

//▽これを追加
var nL = /(\n|\r\n|\r)+/g;

out = out.replace(nL, nlO);

次に、\nだけを「newline」で指定しているタグに置換しているので、
\rや\r\nも指定したタグに置換されるように書き換えます。

これで完了です。

2019/07/06 複数行に対応するよう正規表現を修正

//▽これに修正
var nL = /\r?\n/g;

検索パターン「/(\n|\r\n|\r)+/g」ですと、brに置換する際に複数改行でも一つしか置換できていなかったので、

検索パターンを「/\r?\n/g」に修正しました。

この記事はあなたの役に立ちましたか？