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をペーストできないようになりました。