Welcome !! Now 2010.02.09 17:56 (JST)

TinyMCE(3.1.0.1a)

[ スニペット ]

TinyMCEは、MODxに標準で搭載されている、リッチテキストエディタです。HTMLがわからない方でも、手軽にドキュメントを作成できます。

また、カスタマイズも柔軟で、機能も非常に豊富です。ワードの表を貼り付けて、そのまま<table>タグに変換する機能などもあります。

参照ページ：MODx - TinyMCE wiki／TinyMCE

 本家 - TinyMCE wiki／TinyMCE website

テスト環境

  • サーバ：さくらインターネット 　
    • PHP 5.2.6
    • MYSQL 4.0.27
  • サーバ：XREA 　
    • PHP 5.2.3
    • MYSQL 5.1.20-beta
  • MODx： 0.9.6.1系
  • TinyMCE(3.1.0.1a)

TinyMCEを利用する前に

システムコンフィグレーションの指定

MODxには、標準で、TinyMCEがバンドルされていますので、新たに、TinyMCEを導入する必要はありません。ただし、MODx設定で、リッチテキストエディタの設定を行う必要があります。

  1. ツール＞MODx 設定＞インターフェースとその他の機能 で「はい」を選択します※全ユーザ共通※
  2. 使用エディタを選択します（通常はTinyMCEひとつですが、必要に応じて他のリッチテキストエディタを導入することもできます）
  3. フロントエディタの言語で「Japanese-utf8」を選択します※全ユーザ共通※

通常、上記３つを指定すれば、TinyMCEを使用することが出来ます。「ドキュメントの作成」をしてみましょう。

文章を入力する

ドキュメントの作成・編集領域を開くと以下のようになっています。

TinyMCEの編集画面

これは、テーマ（後述）「Content Editor」が選択されている例です（MODxをインストール直後は、デフォルトで「Content Editor」が選択されています）。

文書作成領域には、ワープロのような感覚で、文書を作成していくことが出来ます。

強調する

↓　強調してみます

強調結果

強調されました（強調のスタイルは、CSSの知識があれば、「太字で赤字」のように、変更することが出来ます）

htmlを見る

興味のある方は、htmlソースを見てみましょう。そこで編集することもできます。

ボタン群

↓「HTML」ボタンをクリック

htmlソース

ソースを確認できます。

このように、HTMLの知識がない方でも、文章を入力していくだけで、かんたんにHTMLコードを書くことができます。

その他のシステムコンフィグレーション

先の説明で説明しなかった残りのシステムコンフィグレーションについて説明します。（ツール＞MODx 設定＞インターフェースとその他の機能）

CSSファイルへのパス

※全ユーザ共通※

リッチテキストエディタ内（つまり、作成・編集画面の『内容』の中）で適用させたいCSSファイルを指定します。未指定の場合、デフォルトでは選択したテーマにより以下のCSSファイルが利用されます。

  • simple ... tinymce309/jscripts/tiny_mce/themes/simple/skins/default/content.css
  • Advanced ... tinymce309/jscripts/tiny_mce/themes/advanced/skins/default/content.css
  • Content Editor ... 同上
  • Custom... 同上

例えば、自分で作ったCSSファイルをアップロードし、その場所を指定します。

/assets/templates/TinyMCE/cube-black_liq_x.css

（上記はひとつの例です）

独自CSSを適用した編集領域

テーマ

テーマには、以下の４種類が用意されています。

  • simple
  • Advanced
  • Content Editor
  • Custom

Custom以外は、システムによってプラグインなどが既にセットされているテーマで、ユーザが変更することは出来ません。ボタン構成やプラグインの変更を行いたい場合は、Customを選択します。

また、ツールバーの位置はテーマごとに固定されていてユーザが変更することは出来ません。以下の通りになっています。

  • simple ... コンテンツエリアの下
  • Advamced ... コンテンツエリアの下
  • Content Editor ... コンテンツエリアの上
  • Custom ... コンテンツエリアの上

したがって、もし、simpleのボタン構成で、ツールバーを上にしたければ、テーマは、Customを選び、ボタンとpluginをセットします。

カスタムテーマのプラグイン設定

テーマで「Custom」を選択したときに、利用したいプラグインをカンマ（,）で区切って、記述します。デフォルトでは、以下が入力されています。

style,advimage,advlink,searchreplace,print,contextmenu,paste,fullscreen,nonbreaking,xhtmlxtras,visualchars,media

カスタムボタン

テーマで「Custom」を選択したときに利用するボタンをカンマ（,）で区切ってそれぞれの行に記述します。各ボタンは、カスタムテーマのプラグイン設定で、そのボタンを含むプラグインを指定していなければなりません。

インスタンス

設定例：
カスタムボタン設定例
TinyMCEでの表示
TinyMCEでの表示

CSSスタイルセレクタ

利用中のCSSファイルで定義しているクラスを指定できます。

例えば、CSSで以下のように定義している場合：

.booktitle {
  font-family:palatino, georgia, "times new roman", serif;
  font-size:1.2em;
  font-weight:bold;
  font-style:italic;
}
.author {
  font-family:monospace;
  font-size:1em;
  font-weight:bold;
}

CSSスタイルセレクタには以下のように書きます。

表示名1=CSSクラス名;表示名2=クラス名2

セミコロンで区切って複数指定できます。例えば、上記の例ならば、以下のようになります。

本のタイトル=booktitle;著者=author

これは、テーマで、simple 以外を選択しているとき、「スタイル」という項目で選択できます（んが、Advancedだとセレクタが開かないですね。バグ？）

スタイルセレクタ

上記は、TinyMCEの編集画面で見たところです。これを適用すると以下のようになります。

<span class="booktitle">対象文字列</span>

...かなりイヤですね（笑）。

注意点

全ユーザ共通の項目以外の項目は、ここで指定した設定より、ユーザ＞ユーザ管理＞ユーザ名＞ユーザタブで設定した「TinyMCEの設定」の方が優先されます。

プラグイン設定

管理画面＞リソース＞リソース管理＞プラグイン＞設定タブ　で行います。プラグイン設定には、既に値が入力され、それが、「パラメータ表示の更新」以下に表示されています。

設定を変更する場合は、「パラメータ表示の更新」の値を変更します。

Custom Parameters

「パラメータの表示と更新」にない、パラメータをセットしたいときに、この欄に値を入力します。このオプションは、simple以外のテーマに有効です。また、このオプションは、マネージャとfront-endの両方に有効です。

書式

パラメータ名 : 値,
パラメータ名 : 値

カンマで区切って複数指定可能です。コロン（:）の前後にスペースを入れるよう推奨されています。

インスタンス

force_br_newlines : true,
forced_root_block : ''

この設定を行うと、編集中に「enter」キーを押下したとき、パラグラフを挿入するのではなく、<br />を挿入します。

その他のコンフィグレーションは、こちら

Block Formats

simple 以外のテーマを選択しているときに、使用可能な「フォーマット」の内容を設定します。コンマで区切って複数指定可能です。デフォルトでは以下がセットされています。

p,h1,h2,h3,h4,h5,h6,div,blockquote,code,pre,address

フォーマットをセレクト中

上図は、TinyMCEの編集画面で見たところです。

※あ、なんだこれは？Block Format のなかに、「code」が入っているぞ？！パラメータのタイトルから Block をとるか、デフォルトの入力値から code をとるかどっちかにして欲しい。。うーん。まあ、前後関係から見ると、code を取りさるべきか。

※絶対コードを取るべきです。こんなコードを吐きます。

<p><code>block format の中に「code」が入っている！<br /></code></p>

勘弁して...。

Entity Encoding

特殊文字のエンコーディングを指定します。以下を選択できます。

  • name ... 文字実体参照に変換
  • numeric　... 数値文字参照に変換（HTMLソースを見る（TinyMCEの）と普通の文字まで数字文字参照になっていてぎょっとするが、バグなのか？Fxのソースで見ると文字で表示されている）
  • raw ... 「& < > " '」以外は、 変換しない（だと思うんですけど）

Entities

エンティティ化したい文字の数字とキャラクタをカンマで区切って入力する。

インスタンス

165,yen,38,amp

ここで指定されたキャラクタがEntiry Encodingで変換されるみたいなことが書いてあるんだけど、\とか、スペースとか、&なんかは、ここに書かなくても、変換されるんで、、何に使うんだろうか。以前のバージョンの名残かも？

Path Options

画像のソースやリンクのパスの形式を指定します。デフォルト「docrelative」。

  • rootrelative ... 絶対パスを使用する（例：/assets/images/images.gif）
  • docrelative ... 相対パスを使用する（例：../../images.gif）
  • fullpathurl ... URIを含むフルパスを使用する（http://www.liolion.infor/assets/images/images.gif）

※rootrelative を選択すると、「assets/images/images.gif」は、表示されず、「/assets/images/images.gif」および「http://www.liolion.net/assets/images/image.gif」で表示される。

※docrelative　を選択すると、、「assets/images/images.gif」でも「/assets/images/images.gif」でも「http://www.liolion.net/assets/images/image.gif」でも表示される。

※fullpathurl を選択すると、「assets/images/images.gif」は、表示されず、「/assets/images/images.gif」および、「http://www.liolion.net/assets/images/image.gif」で表示される。

当たり前かも知れないが、なんか不思議な気がした（笑）。

Cleanup

↑タイトルが適切でないと思うが...（笑）。大まかに言うと、「enables」を選択していると、XHTMLに準拠したHTMLを吐きます。まちがっても「disables」は、選択しない方が良いでしょう。このオプションいらないと思うんですけど。。デフォルトは「enables」です。

インスタンス

現在太字と訳されているアイコン 現在斜体と訳されているアイコン のマークアップが変わったりします。

disables ... <b>あなたの子どもよ</b><i>マジで？</i>

enables ... <strong>あなたの子どもよ</strong><em>まじで？</em>

というふうに、論理マークアップを行うようになっている。日本語訳を「太字」と「斜体」じゃなくて、「強い強調」と「強調」に、直して欲しい。

その他感想（笑）

また<s>あなたの子どもよ</s>は、

<span style="text-decoration:line-through">あなたの子どもよ</span>

...になり、<u>あなたの子どもよ</u>は、

<span style="text-decoroation:underline;">あなたの子どもよ</span>

...にそれぞれなるんだが、これってどーよ？

しかも、

<span style="text-decoration:line-through;text-decoration:underline">あなたの子どもよ</span>

とかになるのではなく、

<span style="text-decoration:line-through"><span style="text-decoroation:underline;">あなたの子どもよ</span></span>

になるんです。イヤだ、こんなフンドシコード！！（爆）

これはとてもじゃないが、いただけけないのでナントカしたいが。しかし。どこをいじれば良いんだ？つうか、<u>は、考えようがないけど、<s>は、<del>でいいんじゃないのか...？しかし。。このなにかにつけての span の嵐は、どうにかならんのか。。

ボタンとかも自分で作れるのかなあ。まあ、それは追々研究することに。。

Advanced Resizing

TinyMCEの編集画面の縦サイズを可変とするかどうかを指定します。デフォルト「しない（false）」。「true」にすると縦に伸び縮みさせることが出来ます（横は固定）。

Advanced Image Styles

動作せず。というか、Wikiの説明、間違ってないですかね。

Advanced Link Styles

同じく不明。

Disabled Buttons

テーマ「simple」以外を選択しているとき、非表示にしたいボタンをカンマで区切って指定します。

インストタンス

bold,italic,underline

強い強調アイコン 強調アイコン アンダーラインアイコン が表示されません。

Link List

リンクリストを利用するかどうかを設定します。デフォルト「する（enabled）」。リンクダイアログの「一覧から選ぶ」になります。そこでは、公開中のドキュメント一覧が表示されます。

リンクリスト表示中

リンクリスト表示中

Web Theme

Webユーザ（font-end ユーザ）が利用できるテーマを選択します。これは、主に、NewsPublisherなどの投稿ツールを利用するときに設定します。選択できるテーマは、マネージャ用のテーマと同じです。

Web Plugins

Web Theme でカスタムを選択したときに利用するプラグインをここに記述します。カンマで区切って複数指定可能です。

Web Buttons 1 - 4

Web Theme でカスタムを選択したときに利用するボタンをここに記述します。カンマで区切って複数指定可能です。

Web Toolbar Alignment

テーマで、「ContentEditor」または「Custom」を選択しているとき、ツールバーの配置を指定できます。

  • ltr ... 左寄せ（デフォルト）
  • rtl ... 右寄せ

プラグインとボタン

それぞれの役割を解説する予定。

カスタマイズ

スキンを変更する

tinymce.functions.php

$tinymceInit .= " theme : \"".$tinyTheme."\",\n";
$tinymceInit .= " skin : \"o2k7\",\n";　//追加

o2k7はスキン名です。

△ページトップ