【Summernote】コピペする時に余計なhtmlタグをペーストしないようにする

WYSIWYGエディタのSummernoteにWordや他の箇所からコピーしてきた文章を、

ペーストしたいという案件がありました。

Summernoteのデフォルトではペースト時にhtmlもペーストされます。

今回の案件ではそれは都合が悪いとの事で、

余分なhtmlはペーストできないようにしました。

プラグインsummernote-cleanerを使う

まずは、結果から。

検索したところsummernote-cleanerというプラグインがあり、

これを使う事で解決しました。

まずはダウンロード

GitHubからsummernote-cleaner.jsをダウンロードしてきます。

そして、summernoteの本体があるディレクトリに追加します。

/summernote/summernote-cleaner.jp

日本語を設定する

ソースを確認すると、日本語対応はされていませんでしたので、

自分で設定します。

先ほどダウンロードしてきたsummernote-cleaner.jpを開きます。

13行目あたりにある、’en-US’の下に’ja-JP’を追記します。

 $.extend(true, $.summernote.lang, {
    'en-US': {
      cleaner: {
        tooltip: 'Cleaner',
        not: 'Text has been Cleaned!!!',
        limitText: 'Text',
        limitHTML: 'HTML'
      }
    },
    'ja-JP': {
        cleaner: {
            tooltip: 'クリーナー',
            not: 'htmlタグが削除されました!!!',
            limitText: 'テキスト',
            limitHTML: 'HTML'
        }
    },
  });

tooltipはエディタのツールに表示されるボタンの文言。

notはhtmlが削除された時に表示されるアラートの文言。

limitTextはテキストの文字数をカウントしているラベルの文言。

limitHTMLはhtmlの文字数をカウントしているラベルの文言。

文字数カウントはエディタの下に表示されます。

プラグンを読み込む

該当ページでプラグインを読み込みます。

<script src="/summernote/summernote-bs4.min.js"></script>
<script src="/summernote/summernote-cleaner.js"></script>

初期化の時にオプションを設定する

Summernoteを初期化する際にオプションを追加します。

cleaner：を追加。

$('.summernote').summernote({
    cleaner:{
          action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
          newline: '<br>', // Summernote's default is to use '<p><br></p>'
          notStyle: 'position:absolute;top:0;left:0;right:0', // Position of Notification
          icon: '<i class="note-icon">[Your Button]</i>',
          keepHtml: false, // Remove all Html formats
          keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>'], // If keepHtml is true, remove all tags except these
          keepClasses: false, // Remove Classes
          badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
          badAttributes: ['style', 'start'], // Remove attributes from remaining tags
          limitChars: false, // 0/false|# 0/false disables option
          limitDisplay: 'both', // text|html|both
          limitStop: false // true/false
    }
});

引用：https://github.com/DiemenDesign/summernote-cleaner

ペースト時だけhtmlを削除したい場合は、actionをpasteに差し替えておくだけでOKです。

ツールにクリーナーのボタンを追加する場合、

toolbarに[‘cleaner’,[‘cleaner’]]を追加します。

$('.summernote').summernote({
    toolbar:[
        ['cleaner',['cleaner']], // The Button
        ['style',['style']],
        ['font',['bold','italic','underline','clear']],
        ['fontname',['fontname']],
        ['color',['color']],
        ['para',['ul','ol','paragraph']],
        ['height',['height']],
        ['table',['table']],
        ['insert',['media','link','hr']],
        ['view',['fullscreen','codeview']],
        ['help',['help']]
    ],
    cleaner:{
          action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
          newline: '<br>', // Summernote's default is to use '<p><br></p>'
          notStyle: 'position:absolute;top:0;left:0;right:0', // Position of Notification
          icon: '<i class="note-icon">[Your Button]</i>',
          keepHtml: false, // Remove all Html formats
          keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>'], // If keepHtml is true, remove all tags except these
          keepClasses: false, // Remove Classes
          badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
          badAttributes: ['style', 'start'], // Remove attributes from remaining tags
          limitChars: false, // 0/false|# 0/false disables option
          limitDisplay: 'both', // text|html|both
          limitStop: false // true/false
    }
});

引用：https://github.com/DiemenDesign/summernote-cleaner

ボタンとペースト時にhtmlを削除したいので、actionをbouthにしておきます。

ペースト時に残しておくhtmlを設定する

コピペしてきてくる際に、htmlはいらないけれども、

改行はそのままがいいという事もありますよね。

そんなときはkeepOnlyTagsを編集しておきましょう。

keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>'],

オプションについては、英語ですがコメントアウトで説明があるので、

読むだけでも楽しいです。

とても簡単に余分なhtmlをペーストできないようになりました。