Kupuにスタイルを追加する

Kupuは非常によくできたビジュアルエディタです。気に入っているのは、プルダウンメニューによって選択範囲に適用するタグとクラスを指定できることです。

デフォルトでは下記のようなセットが用意されています（Plone3.1.5）。

• Heading：h2タグ
• Subheading：h3タグ
• Literal：preタグ
• Pull-quote：pullquoteクラス属性を持つdivタグ（<div class="pullquote">）
• Discreet：discreetクラス属性を持つpタグ
• Call-out：calloutクラス属性を持つpタグ
• Highlight：visualHighlightクラス属性を持つspanタグ

細かい点にはあまり気にせず使っていたのですが、下記のような困ったことを感じていました。

• Pull-quoteはblockquoteタグを使いたい。
• インラインに適用できるDiscreetが欲しい。ただしブロック要素適用の（既存の）Discreetも残したい。
• codeタグが使いたい。
  
• emタグが使いたい。

といったところです。Pull-quoteに関しては既存のものを変更し、その他のものに関しては新しくスタイルを追加したいというのが現状です。

Kupuのスタイルを変更・追加

Kupuの設定は「サイト設定」→「Visual editor」から行います。さまざまな設定を行うことができますが、スタイルの設定はページ下部で行うことが可能です。

ページ下部のスタイル欄のStyles入力項目がそれです。1行に1つのスタイルを設定します。

Heading|h2
Subheading|h3
Literal|pre
Pull-quote|div|pullquote
Discreet|p|discreet
Call-out|p|callout
Highlight|span|visualHighlight
Odd row|tr|odd
Even row|tr|even
Heading cell|th|
Page break (print only)|div|pageBreak
Clear floats|div|visualClear

書式は

スタイル名｜タグ｜クラス名

ですので私の場合は下記のように変更・追加を行いました（クラス名はオプションですので省略可能です）。

• Pull-quote|blockquote
• Discreet-inline|span|discreet
• Code|code
• Emphasis|em

最後に保存ボタンを押すと、めでたくこれらのスタイルを使うことができるようになりました。