Kupuの設定 [Plone3.3]

インストール

Plone 3.3.2 付属の kupu は 1.4.15 であるが、テーブルクラスに日本語を指定すると文字化けする。そのため当面 1.4.13 にバージョンダウンして利用する。問題ない場合は、バージョンダウンする必要はない。

インストール

$PLONE_INSTANCE : /usr/local/Plone/zinstance (Plone のインスタンス)

kupu 1.4.13 を http://plone.org/products/kupu よりダウンロードしてインストールする。

mv kupu-1-4-13.tgz $PLONE_INSTANCE/src/

次にインスタンス内の buildout.cfg を設定する。

  [productdistros]
   :
  urls =
        :
+     src/kupu-1-4-13.tgz

最後に設定を反映する。

# bin/buildout
# bin/plonectl stop; bin/plonectl start

 

設定

リファレンス一覧を日本語化

Plone に管理者でログインし、サイト設定→Visual editor のライブラリより次のように設定する。

- Title string:Home
- Title string:Current folder
- Title string:My recent items
- Title string:Recent items
+ Title string:ホーム
+ Title string:現在のフォルダ
+ Title string:最近利用したアイテム
+ Title string:最近のアイテム

パラグラフのスタイルの日本語化

Plone に管理者でログインし、サイト設定→Visual editor のコンフィグでパラグラフのスタイルを次のように設定する。

大見出し|h2
中見出し|h3
リテラル|pre
補記|p|discreet
リード文|div|pullquote
付記|p|callout
ハイライト|span|visualHighlight
奇数行|tr|odd
偶数行|tr|even
見出しセル|th|
改ページ(印刷時)|div|pageBreak
回り込み解除|div|visualClear

パラグラフのスタイルの追加

Plone に管理者でログインし、サイト設定→Visual editor のコンフィグでパラグラフのスタイルを設定する。例えば、小見出しとして、

<h4 class="Subsubheading"></h4>

のようなスタイルを定義するには、

小見出し|h4|Subsubheading

のように行を追加する。ここで定義した小見出しが選択できるようになる。別途CSSを定義しておく必要がある。工学では次のように設定する。

大見出し|h2
中見出し|h3
小見出し|h4
囲み枠|div|relatedlink
囲み枠(背景あり)|div|relatedlink-gray
リテラル|pre
補記|p|discreet
ハイライト|span|visualHighlight
ハイライト(薄桃)|span|visualHighlight-pink
ハイライト(薄緑)|span|visualHighlight-green
文字色(赤)|span|visualtextcolor-red
取消線|span|visualtext-decoration
見出しセル|th|
見出しセル(20%)|th|heading-20
見出しセル(25%)|th|heading-25
見出しセル(33%)|th|heading-33
見出しセル(40%)|th|heading-33
見出しセル(50%)|th|heading-50
見出しセル(薄桃)|th|heading-pink
見出しセル(薄桃20%)|th|heading-pink20
見出しセル(薄桃25%)|th|heading-pink25
見出しセル(薄桃33%)|th|heading-pink33
見出しセル(薄桃40%)|th|heading-pink40
見出しセル(薄桃50%)|th|heading-pink50
見出しセル(薄緑)|th|heading-green
見出しセル(薄緑20%)|th|heading-green20
見出しセル(薄緑25%)|th|heading-green25
見出しセル(薄緑33%)|th|heading-green33
見出しセル(薄緑40%)|th|heading-green40
見出しセル(薄緑50%)|th|heading-green50
改ページ(印刷時)|div|pageBreak
回り込み解除|div|visualClear

テーブルスタイルの日本語化

Plone に管理者でログインし、サイト設定→Visual editor のコンフィグで表を次のように設定する。

plain|薄い枠線
invisible|枠線非表示
listing|ファンシーリスティング
grid listing|ファンシーグリッドリスティング
vertical listing|ファンシーヴァーティカルリスティング

テーブルスタイルの追加

Plone に管理者でログインし、サイト設定→Visual editor のコンフィグで表の項目を設定する。例えば、「表(枠表示)」として、

<table class="engtbl">

のようなクラスを定義するには、

engtbl|表(枠表示)

のように行を追加する。ここで定義したテーブルスタイルが選択できるようになる。別途CSSを定義しておく必要がある。工学では次のように設定する。

basic1|基本
basic2|基本(幅自動)
plain|基本(枠なし)
history|年表・研究室一覧(特殊)
shortcut|2列専用デザイン(特殊)

リファレンス一覧に Recent Items と My recent items を表示しない

Plone に管理者でログインし、サイト設定→Visual editor のライブラリで Recent Items と My recent items を削除すれば良い。

内部リンクにUIDを利用する

UIDを利用してリンクすることで、リンク先のショートネームを変更した場合もリンク切れとならないようにすることができる。Plone に管理者でログインし、サイト設定→Visual editor のコンフィグで設定する。

UID を使用してリンク : ON

 

その他

Kupu上での画像アップロード時に、日本語ファイル名からのIDの変換をPloneと同一とする

デフォルトではファイル名に使われている日本語は削除されてしまう。portal_skins/kupu_plone/kupuUploadImage をスキンフォルダにコピーして編集する。

  name = name.split('/')[-1] # Throw away any path part.
+ name = context.plone_utils.normalizeString(name)

同一サイト内のリンクが相対パスに変換されないようにする

portal_skins/kupu_plone/kupuploneeditor.js を編集する

  • 同一Plone内のみ変換

  if (resolveuid != -1) {
      str = tag + url.substr(resolveuid+1)+'"';
      return str;
  }
+ var link_tags = document.getElementsByTagName('link');
+ for (i=0; i<link_tags.length; i++) {
+     if(link_tags[i].rel=='home') { var portal_url = link_tags[i].href; }
+ }
+ if (url.indexOf(portal_url) == -1) {
+     str = tag + url +'"';
+     return str;
+ }
  var urlparts = url.split('#');