TinyMCEの設定 [Plone4.0]

インストール

$PLONE_INSTANCE : /usr/local/Plone/zinstance （Plone のインスタンス）

日本語翻訳等を修正するため、開発用ディレクトリにインストールする。バージョンは 1.1.13 にアップデートしておく。http://pypi.python.org/pypi/Products.TinyMCE/1.1.13 よりダウンロードできる。

# tar zxvf Products.TinyMCE-1.1.13.tar.gz
# mv Products.TinyMCE-1.1.13 $PLONE_INSTANCE/src/Products.TinyMCE

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

  eggs =
        :
+     Products.TinyMCE==1.1.13

develop = 
        :
      src/Products.TinyMCE

versions.cfg を変更する

-  Products.TinyMCE = 1.1.10
+ # Products.TinyMCE = 1.1.10

最後に設定を反映する。

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

不具合の修正

Subdued Grid クラスを削除

テーブルの Subdued Grid クラスは設定ページから変更できないため、ソースを変更して削除する。Products.TinyMCE/Products/TinyMCE/skins/tinymce/plugins/table/table.htm.pt を変更する。

- <option value="plain" selected="selected" i18n:translate="Subdued grid">Subdued grid</option>

普通段落に変更した際にclass属性が消えない点を修正

普通段落に変更した際に、class属性が残ってしまうため修正しておく。Products.TinyMCE/Products/TinyMCE/skins/tinymce/tiny_mce_init.js を変更する。

- h['Text'].push('{ title: "' + this.widget_config.labels['label_paragraph'] + '", tag: "p", className: "", type: "Text" }');
+ h['Text'].push('{ title: "' + this.widget_config.labels['label_paragraph'] + '", tag: "p", className: " ", type: "Text" }');

Definition listボタンの翻訳

Definition list ボタンが翻訳されていないので修正する。Products.TinyMCE/Products/TinyMCE/skins/tinymce/plugins/definitionlist/editor_plugin.js を次のように変更する。

- title : 'Definition list',
+ title : 'definitionlist.desc',

次に翻訳を定義する。Products.TinyMCE/Products/TinyMCE/skins/tinymce/langs/ja.js に次のように追加する。

definitionlist:{
desc:"\u5b9a\u7fa9\u578b\u30ea\u30b9\u30c8"
},

設定

スタイルの設定

Plone に管理者でログインし、サイト設定→TinyMCE ビジュアルエディタのレイアウトでパラグラフのスタイルを設定する。例えば、小見出しとして、

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

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

Subsubheading|h4|Subsubheading

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

Heading|h2
Subheading|h3
Subsubheading|h4
Box1|div|relatedlink
Box2|div|relatedlink-gray
Literal|pre
Discreet|p|discreet
Highlight|span|visualHighlight
Highlight(Pink)|span|visualHighlight-pink
Highlight(Green)|span|visualHighlight-green
Letter Color(Red)|span|visualtextcolor-red
Disc|ul|listTypeDisc
Square|ul|listTypeSquare
Circle|ul|listTypeCircle
Image1|ul|listTypeImage1
Image2|ul|listTypeImage2
Numbers|ol|listTypeDecimal
Lower Alpha|ol|listTypeLowerAlpha
Upper Alpha|ol|listTypeUpperAlpha
Lower Roman|ol|listTypeLowerRoman
Upper Roman|ol|listTypeUpperRoman
Definition term|dt
Definition description|dd
Heading cell|th|
Heading cell(20%)|th|heading-20
Heading cell(25%)|th|heading-25
Heading cell(33%)|th|heading-33
Heading cell(40%)|th|heading-40
Heading cell(50%)|th|heading-50
Heading cell(pink)|th|heading-pink
Heading cell(pink20%)|th|heading-pink20
Heading cell(pink25%)|th|heading-pink25
Heading cell(pink33%)|th|heading-pink33
Heading cell(pink40%)|th|heading-pink40
Heading cell(pink50%)|th|heading-pink50
Heading cell(green)|th|heading-green
Heading cell(green20%)|th|heading-green20
Heading cell(green25%)|th|heading-green25
Heading cell(green33%)|th|heading-green33
Heading cell(green40%)|th|heading-green40
Heading cell(green50%)|th|heading-green50
Page break (print only)|div|pageBreak
Clear floats|div|visualClear

表スタイルの設定

Plone に管理者でログインし、サイト設定→TinyMCE ビジュアルエディタのレイアウトで表の項目を設定する。例えば、「Basic Table」として、

<table class="basic">

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

Basic Table|basic

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

Basic Table 1|basic1
Basic Table 2|basic2
No Boader Table 1|noboader
No Boader Table 2|noboader2
Shortcut Table(Unusual)|shortcut

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

UIDを利用してリンクすることで、リンク先のショートネームを変更した場合もリンク切れとならないようにすることができる。Plone に管理者でログインし、サイト設定→TinyMCE ビジュアルエディタのリソースタイプで設定する。

UID を使ってリンク : ON

メニューボタンの追加

編集メニューのボタンの追加・削除はサイト設定→TinyMCEビジュアルエディタより行える。