タイプ | |
有料/無料 | 無料 |
ライセンス | GPL |
執筆時のバージョン | 1.5.1 |
ユーザ登録の要否 | 不要 |
- ここに掲載している記事は執筆時点のものです。内容が古くなっている事もありますのでご注意下さい。
- ここで紹介しているエクステンションの利用を推奨するものではありません。ご利用は自己責任でお願いします。
- ご自分が利用しているエクステンションの最新情報は常に確認しましょう。様々なエクステンションで日々脆弱性が見つかっており、あなたのサイトがクラックの被害に遭わないとも限りません。脆弱性情報はこちら。
- とにかく高機能で設定の種類が豊富なWYSIWYGエディタ。
- div,abbr,pre,deleteなど、様々なタグの入力もサポート
- 表の作成、画像のアップロード、挿入、リンクの挿入も簡単にできる。
- テンプレートのCSSファイルに記述したクラスを、エディタ内で利用することが可能。
- JCE独自のグループを機能を搭載し、このグループ単位でユーザが利用可能な機能を制限したり、エディタの初期設定を変更したりできる。例えばフロントエンドの登録ユーザには必要最低限のボタンだけ表示し、管理者ユーザには全てのボタンを表示するなど。
- 高機能すぎて初心者には使いにくいかも。
インストール
開発元からコンポーネント(com_jce_xxx.zip)およびプラグイン(plg_jce_xxx.zip)をダウンロードし、バックエンドから通常の方法でインストールします。その後、Joomla!の基本設定から「デフォルトWYSIWYGエディタ」を「Editor - JCE 1.X.X」を選択します。
「コンポーネント」→「JCE Administration」→「Control Panel」でコントロールパネルを表示した際に、サーバの環境によっては「Fix Plugins」「Fix Groups」のボタンを表示される事があります(おそらくデータベースのバージョンが古い場合)。この場合、それらのボタンをクリックしておきます。
コントロールパネルを表示した際に「ERROR LOADING FEED DATA」と表示されることがありますが、これはJCE開発元のRSSを取得できなかった事によるエラーです(RSSフィードのURLが変更になったため)。気になるようであれば「エクステンション」→「モジュール管理」→「管理者」→「JCE Latest News」を開き、「Feed URL」を「http://www.joomlacontenteditor.net」に設定すればJCEの最新ニュースを表示できます。
日本語化
当サイトのダウンロードセクションから日本語ランゲージパックをダウンロードできます。保存後、バックエンドの「コンポーネント」→「JCE Administration」→「install」からランゲージパックをインストールします。Joomla!のエクステンションをインストール方法と同じですので迷うことはないでしょう。インストールすると自動的に日本語化されます。
JCEの編集機能
JCEの機能全て紹介するのは無理があるので、個人的に便利だと思う機能を紹介します。
クラスの割り当て
テンプレートのCSSファイルに記述したクラスを、記事作成時に割り当てる事ができます。よく利用する書式をあらかじめCSSファイルに記述しておけば、一括で書式を設定できるので便利。
各種ブロック要素の設定
heading要素、p要素、div要素、dt要素、dd要素などのブロック要素を簡単に設定できます。これらの要素は自由に追加・削除が可能。
テキストの貼り付け
通常の貼り付けの場合、コピー元に設定されていた書式・リンクなども貼り付いてしまいますが、この機能を使えばテキストのみを貼り付けることができます。
画像の挿入
画像を挿入するにはイメージマネージャを使用します。
イメージマネージャでは画像をアップロードできます。アップロードした画像に対して代替テキスト(Alt属性)や配置(float)、余白 (margin)、線(border)を設定する事が可能。また設定した内容は右上のプレビューで直ぐに確認できます。
ロールオーバー(Rollover)タブではロールオーバー(マウスを乗せると画像が切り替わる効果)が設定できます。
高度タブでは画像のCSSスタイルを直接記述したり、テンプレートのCSSに記述されたクラスの割り当て、title属性の付与などが行えます。
リンクの挿入
TinyMCE等では直接URLを指定しなければなりませんが、JCEのリンク挿入機能は「セクション」「カテゴリ」「メニュー」の構造を基にクリックだけでリンクを設定できます。
これがリンク挿入機能。各セクション、カテゴリ、メニューからマウスクリックしていくとURLが自動で入力されます。
エディタのON/OFF切り替え
エディタの左上部に表示されている「show/hide」をクリックするとエディタのON/OFFを素早く切り替える事ができます。なお「show /hide」の表示は好きな文字に変更する事が可能です(例:表示/非表示など)
JCEの設定
「コンポーネント」→「JCE Administration」→「Configuration」を選択するとJCEの各種設定が行えます。設定画面の左側はエディタ共通の設定になっており、変更するとJCEを使用している全員に対して変更が反映されます。ここではエディタの幅や高さ、入力を禁止する要素、改行時にp要素でマークアップするかbr要素で改行するか、エディタに適用するCSSファイルなどが設定できます。
設定画面右側は新しいグループを作成した際の初期値になります(グループについては後述)。JCEインストール直後には「作者」以上のユーザが「Default」というグループに属していますので、ここで設定を変更しても実際のエディタには反映されない事に注意してください。変更するにはグループの設定を変更します。
グループ機能について
JCEのグループ機能を使用する事で、Joomla!のユーザ/グループ/コンポーネント単位でJCEの設定を変更する事ができます。例えば管理者ユーザにはJavaScript挿入を許可し、登録ユーザには許可しないなどです。
グループ編集画面では、JCEグループに属するJoomla!グループ、ユーザなどが個別に選択できます。
「グループレイアウトエディタ」ではこのグループに表示するボタンをドラッグアンドドロップで変更できます。管理者ユーザには全てのボタンを表示し、一般ユーザには一部のボタンしか表示しないなどが可能です。なお行単位でドラッグできます。
「追加プラグイン」では、エディタにボタンで表示されない機能について有効/無効を切り替えます。「Context Menu」にチェックすると、エディタ上で右クリックした時にJCE独自の右クリックメニューが表示されます。「Inline Popups」にチェックすると、設定に使用する各種ダイアログボックスをJCEが描画します。チェックしない場合はブラウザが描画します。それ以外はよくわかりません
画面右側ではエディタの設定や各プラグイン(イメージマネージャ等)の初期設定を変更できます。ここで設定した内容は、このグループに属するメンバーに反映されます。
サブスクリプションプラグインについて
$20をSubscription(寄付、定期購読)する事で、さらに高機能なプラグインをダウンロードする事ができます。ダウンロード期間は料金を支払った日から1年間です。これらのプラグインはGNU GPLのライセンスで配布されていますので、複数のサイトで利用してもOKという大盤振る舞いっぷりです。このようなすばらしいエクステンションを開発し、しかも無料で公開している作者様に感謝の意を込めて是非サブスクリプションしましょう。
以下にサブスクリプションプラグインを紹介します。
イメージマネージャExtended(日本語ファイルではイメージマネージャEXと表記)
標準のイメージマネージャを高機能化したプラグインです。どこが高機能かと言えば、まずファイルアップロード時。画像のサイズ変更(Resize)、回転(Rotate)、サムネイル画像の作成(Thumbnail)がアップロードと同時にできてしまうことです。
またアップロードした後でも、サーバ上に保存した画像に対してサイズの変更、サムネイル作成が可能です。サイズ変更は直接画像が変更されますが、サムネイル作成は画像と同じ階層に「thumbnails」というフォルダが作成され、その中にサムネイルが保存されます。
それ以外にも上部のタブに「ポップアップ(Popup)」と「ツールチップ」が追加されます。ポップアップは小さい画像をクリックし大きい画像を表示する際に使用します(詳しくは後述)。また「ツールチップ」は、画像にマウスオーバーしたときに表示したい内容を設定できます。
ファイルマネージャ
記事にファイルへのリンクを挿入することができます。リンクテキスト、アイコン、ファイルのサイズ、日付も併せて挿入可能です。Word、 Excel、PDFなど様々なファイル形式に対応しています。
実際にファイルを挿入するとこんな感じになります。
メディアマネージャ
各種メディアファイル(Quicktime, Windows Media, Flash, Flash Video, Google Video, Youtube, Shockwave, Real Media, DivX)を記事中に挿入できるプラグインです。
選択した形式に応じてオプションが設定できます(以下はFlashを選択した場合)
テンプレートマネージャ
よく利用するレイアウトや文章を作成し、後で使い回すための機能です。JCEのエディタ上でレイアウトなどを作成し、テンプレート作成ボタンを押すとテンプレートが作成できます。もちろんDreamweaverなどで作成しアップロードしてもOKです。これ以外にも機能があるようですがよくわかっていません。詳しくはこちらを参照。
キャプション
画像にキャプション(説明文)を簡単に付けることができます。配置や背景色、マージンなども設定可能です。
実際に挿入するとこんな感じに。なおキャプションで挿入した場合、div要素でレイアウトされますので、テーブルレイアウト嫌いの方にもおすすめ。
Tips
ポップアップ画像を設定する
サムネイル画像をクリックすると大きい画像が表示されるようなリンクを設定する場合、JCEのイメージマネージャExtendedを使用すれば素早くできます。
まずJCEの開発者サイトから「JCE Utilities」をダウンロードします。これは無料でダウンロードできます。なおJCE UtilitiesはJCEのプラグインではなく、Joomla! のプラグインですので、「エクステンション」→「インストール/アンインストール」からインストールして下さい。またプラグインを有効にしてください。
画像のアップロード時に「サイズ変更」をチェックし、クリックした後に表示される画像サイズを入力します。また「サムネイル」をチェックし、サムネイル画像のサイズを設定します。このサムネイルが記事に挿入する画像になります。もちろんアップロード後にこれらの作業を行っても構いません。
ファイルをアップロードしたら、「Popup」のタブに切り替え「有効」にチェックします。
その後アップロードした画像を選択すると、サムネイルを使用するかのメッセージが表示されるので「はい」を選択します。
そのまま挿入すると、記事にはサムネイル画像が貼り付きます。
記事を保存しフロントエンドで確認するとポップアップして表示されるはずです。以下のような感じです。
ユーザ専用の画像フォルダを用意する
複数のユーザでサイトを編集している場合、デフォルトの設定だと全てのユーザが「images/stories」を参照するため、誰がアップロードしたのかわからなくなったり、また他のユーザの画像を誤って削除してしまったりと問題が起こる可能性があります。JCEでは、ユーザ毎に専用の画像フォルダを割り当てる事ができます。
ユーザが所属するJCEグループの編集画面を開き、「プラグインオプション」の「ファイルディレクトリパス」を「images/stories/$username」のようにします。$usernameは変数であり、実際のユーザ名に置き換えられます。またユーザ名以外にも「$id(Joomla!のユーザID)」「$usertype(Joomla!のグループ名)」「$group(JCEのグループ名)」などの変数を使用できます。
設定後、該当するユーザでログインします。イメージマネージャを起動したタイミングで専用のフォルダが作成され、その場所がユーザのルートフォルダになります。
メモ
- リンクする記事をキーワードで検索できる「Advanced Link」がそのうちリリースされるかも?