TinyMCEの設定を弄ってみた

TinyMCEの設定を変更

このNibbleblogの投稿画面にはTinyMCEというJavaScript製WYSIWYGエディターが利用されているが、br要素など空要素のタグの使われ方が気に入らなかったのでNibbleblogを弄ることにした。以下の2つのスクリプトを次のとおり修正。

• /admin/views/page/includes/content.bit（ページ投稿画面用スクリプト）
• /admin/views/post/includes/content.bit（記事投稿画面用スクリプト）

スクリプトの修正内容

2つのスクリプトの修正内容は同じ。

tinymce.init({
    //以下の2行を追加
    schema : 'html5',
    element_format : 'html',

要は使用テーマに合わせてスキーマをHTML5にしただけ。これで<br />が<br>になった。ついでに、よく使いそうなblockquote要素等を挿入できるよう同じスクリプトへ次のとおり追加。

style_formats: [
    {title : 'Heading 1', block : 'h1'},
    {title : 'Heading 2', block : 'h2'},
    {title : 'Heading 3', block : 'h3'},
    //ここから追加
    {title : 'Blockquote', block : 'blockquote'},
    {title : 'Citation', inline : 'cite'},
    {title : 'Quotation', inline : 'q'},
    {title : 'Code', inline : 'code'},
    //ここまで追加
    {title : 'Preformatted', block : 'pre'},
    {title : 'Console', block : 'pre', classes: 'nb-console'}
],

二重引用符の問題が浮上

二重引用符（ダブルクォーテーション）だけHTMLエンティティの"に変換（エスケープ）されない。TinyMCEではなくNibbleblogのJavaScriptコードの問題だと思うんだけど、コードを追っても原因は分からなかった。