ブログシステムを自作する上で厄介だった点の解消法について。
管理画面を作って、記事を書いて、表示する、 という流れは割と基本的な流れなので、 躓く所が少なく済むと思っていたのですが、 一点困った点が生じました。
それが「改行の扱い」です。
HTML内で改行をしても表示時には無視されてしまいます。 なのでブログ編集画面のテキストボックスに改行込で文章を書いても ブログとして記事を表示する時には1行のテキストになってしまうのです。 意図的に改行するにはBRタグを入れたり、 Pタグで段落分けなどをする必要があります。 かといって各行に手動でタグを埋め込むのも生産的ではありません。
ただ改行をしたい!というだけだったら、まだ話は簡単で、 ’\n'を’<br>’に置換すればよい事になります。 しかしこれは技術ブログ。 プログラムの断片をPREタグで囲って(おまけにSyntaxhighlightして) 表示してみたいなんていう需要もたくさんあります。
entry_text = u''' 改行のテストです。 このテキストをそのままPOSTして表示すると 改行がない文章になってしまいます。''' #こうすることで改行文字をHTMLタグに置換 print entry_text.replace(u'\n', u'<br>')
こんな風に。
そうすると上述の単純置換では、 PREタグの中にも改行タグが入ってしまい、 明らかに邪魔になってしまいます。 最初の設計ではPREタグなど特定のタグで囲まれた部分を 改行置換の範囲から除外するように作っていたのですが、 今回もっとスマートな方法を見つけたので紹介します。
http://ckeditor.com/
要するにブログの編集フォームをJavascriptでWYSIWYG化してしまう のが最善の解だと言う訳です。 これなら改行どころか段落分けも綺麗に対応してくれます。 導入もファイルを設置して、読み込み、タグをクラスで修飾するだけ。 実にお手軽かつパワフルなライブラリです。 CKEditor For WordPressをカスタマイズ ツールバーにボタンを追加する 肝心のSyntaxHighlighterもここを参考にプラグイン導入で解決しました。 別ダイアログが開いて文字のエスケープもやってくれるすごいやつです。 (CKEditor4.x系じゃ動かなかったので,3.xの方を入れなおして使いました)
カスタムも設定ファイルを書き換えるだけで自在に扱えます。 ちょっと高機能なテキストボックスを作りたい時は是非利用してみて下さい。
デモ置いておきます。 クラスをckeditorにしたtextareaを設置するだけです