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」に修正しました。

Solutions

ソリューション

ホームページ作成

Webサイト制作・運用保守

コーポレートサイト/サービスサイト/オウンドメディアサイト/LP/EC

ウェブマーケティングの技術を使ってホームページの作成や保守を承っております。

Webのお悩み

Webのご相談・サポート

運用のお困りごと/集客のお困りごと/運用担当が居なくなったなど

Webに関するお困りごとや、お悩みなどのご相談、サポートを承っております。

その他、アクセス解析、広告運用、SNSサポートなどWebに関する事全般承っております。

詳しく見る