はじめに

Bootstrapを使ったWYSIWYGエディタであるsummernoteで、改行時にデフォルトの<p>タグから<br>タグに変更する方法を調べたので備忘録として残したいと思います。

通常のWYSIWYGエディタでは、Enterで新たな段落生成(<p>)、Shift+Enterで改行(<br>)という挙動が一般的です。今この記事を書いているWordPressのエディタもそうなっています。

これを、Enterを押したときに<br>タグで改行されるように変更します。

最初は簡単にできると思ったが・・

他のWYSIWYGエディタなんかでは設定で改行モードを変更できたりするので、はじめは同じようなノリで簡単にできるだろうと思っていました。

しかし、『summernote p br』などでググっても思っていたようなページは見つからず、Githubのページにヒットしました。

Is it possible to default to <br> instead of <p> on enter?
https://github.com/summernote/summernote/issues/546

上記ページを読んでみると、どうやら設定で簡単に変更することは今のところできないようです・・。

ただ、その後で下記の記事を発見しました。

Summernote insert single line break instead of paragraph on pressing enter
http://cheesefather.com/2018/07/summernote-insert-single-line-break-instead-of-paragraph-on-pressing-enter/

GithubのIssueページにも同じような方法が載っていたのでこれがベストソリューションかと思いやってみたところ、一見するとできたように思えましたが、 $(this).summernote("pasteHTML", "<br><br>"); と<br>タグが連続しているため、空白行で改行すると余分な改行が増えてしまうという問題がありました。

かと言って $(this).summernote("pasteHTML", "<br>"); と<br>を1つにしてしまうとカーソルが下の行に移動しなくなってしまうので、少しカスタマイズして、強引ですが下記のような方法で解決することにしました。

解決方法

"<br><br>" ではなく、 "<br>&#8203;" とHTMLエンティティの「ゼロ幅スペース」を代わりに挿入しています。これだと見た目上はスペースが分からず、カーソルもしっかり下の行に移動してくれます。(コピーしてテキストエディタなどに貼り付けるとスペースがあることが分かります)

そうして、サーバ側(今回はPHP)でPOSTされた時にこのゼロ幅スペースを削除してあげることにしました。

あまりスマートな方法ではないですが、以上がsummernoteで改行のときに<p>タグから<br>タグに変更する方法となります。