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