JCE(JoomlaContentEditor) - フリーの最強エディタ
2007年 6月 15日
| 名前 | JCE(JoomlaContentEditor) | 種類 |
  |
|---|---|---|---|
| 検証バージョン | 1.1.6 | ライセンス | GPL |
JCE1.5の記事はこちら
-
高いカスタマイズ性と機能をあわせ持つWYSIWYGエディタ
-
JCE自体にプラグインがあり、好みに応じて機能を追加できる
-
プラグインの中でもイメージマネージャとアドバンスドリンクは必須
-
作者へ寄付する事でさらに高度なプラグインを入手することも可能
ダウンロードとインストール
上記開発元もしくはJoomla! Extention Directoryへアクセスし、最新のファイルをダウンロードします。インストールは管理画面のインストーラメニューから行ってください。 （参考:コンポーネントのインストール、モジュールのインストール、プラグインのインストール）
またプラグインは公開するのを忘れないでください。
日本語化ランゲージパックのインストール
当サイトで日本語ランゲージパックを作成しました。必要に応じてダウンロードセクションからダウンロードしておきます。
ランゲージパックをインストールするには、メニューの「コンポーネント」→「JCE Admin」→「JCE Languages」を選択します。
「Install」をクリックします。
「参照」を押して日本語化ファイルを選択し、「Upload File & Install」をクリックしてインストールします。
「Upload Language - Success」と表示されたら、再度「コンポーネント」→「JCE Admin」→「JCE Languages」を選択します。
「Japanese UTF-8 files for JCE 1.1.6 and Plugins」のチェックをONにして画面右上の「公開」をクリックします。
?
初期設定
デフォルトのエディタをJCEに設定します。メニューの「サイト」→「グローバルコンフィグレーション」を選択します。
サイトタブをクリックし、デフォルトのエディタを「JCE Editor Mambot」に設定し保存します。
メニューの「マンボット」→「サイトマンボット」を選択し、表示された一覧の中から「JCE Editor Mambot」をクリックします。「Charset/Encoding」というパラメータに「UTF-8」と入力し保存します。
エディタを使う
コンテンツアイテムを開くとJCEエディタが表示されます。
書式の設定、表の作成など一般的なワープロソフトと同様の操作でコンテンツを作成することができます。ワープロソフトを使った事があれば感覚的に操作できると思いますので詳細は割愛しますが、ここでは特に便利な「イメージマネージャ」と「アドバンスドリンク」の使い方を紹介します。
イメージマネージャを使用した画像の挿入
「イメージマネージャ」は記事中に画像を挿入するプラグインです。ファイルのアップロード、コピーや削除などのファイル管理、画像の設定がコンテンツの編集画面から行うことができます。Joomla!の「メディアマネージャ」の出番はほとんどなくなるかもしれません。
イメージマネージャは下記アイコンをクリックすると起動します。
表示されたウインドウの上部は画像の設定を行うエリア、下部はファイル管理やアップロードに使用するエリアです。
画面下部のエクスプローラを使用し、画像をアップロードするディレクトリまで移動します。
「アップロード」をクリックします。
アップロード画面が表示されます。「参照」を押してアップロードするファイルを選択し、OKをクリックします。
アップロードしたファイル名が表示されますので、クリックするとプレビューが右側に表示されます。
ファイルのアップロード時に「アップロード後にファイルを選択」にチェックしておくと自動的に選択されるので便利です。
ファイル名をクリックしても「Retrieving Data」と表示されプレビューが表示されない場合があります。この場合、次のような作業を試してみてください。
- ブラウザのキャッシュを削除する
- NortonInternetSecurityを使用している場合、広告ブロックをOFFにする?
必要に応じて画像の設定を行います。説明（Alt属性）やタイトル（title属性）、表示方法に関する設定などが可能です。
「挿入」を押せば画像を挿入できます。 
?
アドバンスドリンクを使用したリンクの挿入
アドバンスドリンクを使うとJoomla!のコンテンツを直接指定してリンクを挿入することができるようになります。
リンクを挿入する文字（画像）を選択し下記アイコンをクリックします。
アドバンスドリンクが表示されます。
「コンテンツリンク」からリンク先のコンテンツを選択します。下図はコンテンツアイテムへリンクする例です。その他セクション、カテゴリ等も選択可能です。
「挿入」を押せばリンクが設定されます。
ツールバーのカスタマイズ
JCEではツールバーをカスタマイズすることができます。ボタンのレイアウトを変えたり、使用しないボタンを隠すなど、自分好みのエディタにすることができます。
メニューの「コンポーネント」→「JCE Admin」→「JCE Layout」を選択します。
JCEレイアウトマネージャが表示されます。
ボタンのレイアウトを変更するには、アイコンに重ねてドラッグしレイアウトする箇所でドロップします。
JCEプラグインの設定
ツールバーに配置されたアイコンはそれぞれ独立したプラグインとなっています。例えば使用しないアイコンを消してスッキリしたい場合、そのプラグインを無効にすることで非表示になります。
メニューの「コンポーネント」→「JCE Admin」→「JCE Plugin」を選択します。
JCEプラグインの一覧が表示されます。消したいアイコンを非公開にすることでエディタ上に表示されなくなります。下図はHelpを非表示にする場合。
また名前にリンクが設定されているプラグインは、クリックすると設定画面が表示されます。ここでは各プラグインのデフォルト値やアクセス権などを設定できます。
プラグイン（マンボット）の設定
エディタの初期設定を変更することができます。
メニューの「コンポーネント」→「JCE Admin」→「JCE Configuration」を選択します。
設定画面が表示されます。なお、設定画面は日本語化されません。
設定項目の詳細は以下のとおり。
| 項目 | 説明 |
| Editor Width | エディタの幅をピクセルで入力します。 |
| Editor Height | エディタの高さをピクセルで入力します。 |
| Default Editor State | エディタの状態を設定します。ONにしないとエディタは表示されません。 |
| Compressed Version | Yesなら圧縮モードで動作します。少しだけエディタの読み込みが早くなるかもしれません。環境に依存するようです。 |
| Absolute Paths | Yesならスクリプトやイメージを絶対パスで読み込みます。 |
| Relative URLS | Yesなら絶対パスを相対パスに変換します。 |
| Editor Toggle Label | エディタのON/OFFを切り替える機能を持つラベルの文字を入力します。 |
| Text Direction | 文字方向を選択します。日本語ならLeft To Rightですね。 |
| Charset/Encoding | データを送受信する時にヘッダとして使用する文字エンコードを入力します。日本語なら「utf-8」。 |
| Inline Table Editing | ？ |
| Template CSS classes | Yesならテンプレートで使用されているCSSをエディタにも適用します。 |
| Custom CSS Classes | エディタに適用するCSSのファイル名を入力します。例えばフロントエンドで背景に黒を指定している場合、上記のTemplate CSS classesをYesにしていると、エディタの背景も黒で表示されるため文字が見づらくなる事があります。しかしTemplate CSS classesをNoにしてしまうと、テンプレートのCSSで指定したクラスが使用できません。そんな時、背景を白にするCSSを記述したファイルを作成し、テンプレートのCSSファイルと同じ位置に保存します。そのファイル名をここで入力します。 |
| Newlines | 改行時の要素について選択します。「P Elements」ならP要素で、「BR Elements」ならBR要素でマークアップされます。 |
| Toolbar | ツールバーの配置を選択します。「Top」なら上部、「Bottom」なら下部にツールバーが配置されます。 |
| Cleanup HTML | HTMLをクリーンアップするか |
| Fix Table Elements | ？ |
| Fix List Elements | リスト要素（UL,OL）をValidなXHTMLへ変換するか |
| Mambot Mode | ？ |
| Entity Encoding | エディタ内で使用するエンティティ文字の表現方法を選択します。「Named」なら名前表現、「Numeric」なら数値表現、「Raw」ならそのまま書き込みます。 |
| Convert Fonts to Spans | YesならFont要素をSpan要素に変換します。Font要素は非推奨ですのでYesがお勧めです。Span要素ならCSSにて装飾が行われます。 |
| Font Size Type | 文字サイズのタイプを選択します。「Length」なら10ptのようなポイント指定、「Absolute-size」ならx-smallのような絶対サイズ指定になります。 |
| Prohibited Elements | 使用を禁止する要素を指定します。ここで指定した要素をエディタ内で使用した場合、自動的にコードから削除されます。 |
| Extended Elements | ？ |
| Event Elements | ？ |
| Allow Javascript | JavaScriptの動作を許可するグループを選択します。 |
| HTML Height | HTML編集モードを選択した時に表示されるウインドウの高さを入力します。 |
| HTML Width | HTML編集モードを選択した時に表示されるウインドウの幅を入力します。 |
| Preview Height | プレビューを選択した時に表示されるウインドウの高さを入力します。 |
| Preview Width | プレビューを選択した時に表示されるウインドウの幅を入力します。 |
| Template Colors | JCEのカラーピッカーで使用する色を「#004489」のように新しく定義できます。複数定義する場合、カンマで区切り、最大18個まで定義できます。 |
新たにプラグインを入手する
エディタに機能を追加する無償のプラグインが作者のサイトで公開されています。必要に応じてインストールしてください。入手できるプラグインは以下の通り。
| プラグイン名 | 機能 |
| JCE Joomlaboard | Joomlaboardを使っていないので不明 |
| JCE Joomla | mosimageとmospagebreakをエディタから挿入できる機能 |
| JCE IFrame | インラインフレームを挿入する機能 |
| JCE Fireboard | Fireboardを使っていないので不明。 |
| JCE Doclink | DocManへのリンクを作成する機能 |
さらに高度なプラグインを手に入れる
JCEの作者であるRyan Demmer氏に$20を寄付すると、さらに高度なプラグインを入手できます（1年間）。あくまで寄付という形式でありライセンスはGNU GPLですので、複数のサイトで使用してもOKなようです。ダウンロードできるプラグインは次の通り。
| プラグイン名 | 機能 |
| JCE ImageManagerExtended |
イメージマネージャをさらに高度にしたプラグイン。イメージマネージャとの違いは以下の通り。
|
| JCE Template Manager | 既存のHTMLを取り込める？（使用していないので不明） |
| JCE Media Manager | 各種メディアファイルを挿入可能（Quicktime, Windows Media, Flash, Flash Video, Google Video, Youtube, Shockwave, Real Media） |
| JCE File Manager | 各種ファイルへのリンクをアイコン、日付、サイズとともに設定できる。（このページのJCEをダウンロードしたリンクがそれ） |
| JCE Captions | 画像にキャプションを設定可能（画像の説明文とか） |
| JCE Advanced Link Extended |
アドバンスドリンクをさらに高度にしたプラグイン。アドバンスドリンクとの違いは以下の通り。
|
( 0 Votes )
| < 前 |
|---|
Joomla!の道しるべではJoomla!に関する各種サポートを承ります。
