JCE、A Content Editor for Joomla

4月 10, 2016

≪≪この記事をすべて読むには約 7 分かかります≫≫

Joomla!用の記事作成用エディタいろいろでJoomla!用のWYSWYGエディタをいくつかテストしましたが、一番実績、信頼ともに文句無く一番だといえるエディタが「JCE」です。

前のエディタいろいろ記事でも最初に取り上げていますが、ボタンを押すと勝手にスクロールしてしまう問題は最終的に何とかできたものの、Joomla3.5.0が出たあたりからJCEが挙動不審になってしまい・・・困っています。

JCE-a-content-editor-for-joomla

JCEの機能

WordPressでも標準採用されているTinyMCEの機能を一部利用して動作します。

エディタのボタン配置

JCEのツールバー
JCEのツールバー

 

TinyMCEをベースにしているせいか、TinyMCEとなんとなく似ています。

今使っているWordPressのTinyMCE
今使っているWordPressのTinyMCE

TinyMCEと違ってボタンを一つずつ位置を変えていくことができます。(やりすぎると他の人の設定したエディタが使いにくくなるので、できるだけ標準を維持するのをお勧めしますが)

エディタに直接関係ないツールのボタンは統合されずに外部に配置されます。

ほとんど無料

最近の流行にしたがって、JCEは基本無料・拡張機能有料で配布されています。他の拡張機能では無料の基本機能だけでは物足りないと感じることも多くありますが、JCEは無料機能だけで不便を感じることはほとんどありません。

サポート

サポートフォーラムがあり、開発者がきめ細かなサポートをしているようです。見ていると、「今日は土曜日で返事が遅くなってごめんね」のような風に書いているので、十分なサポートを得られると思います。

ただし、サポートフォーラムに投稿するには、有料サブスクリプションは必要です。長年開発している人なので、大抵の疑問は検索すれば答えが出ています。

CSSサポート

設定項目も多く、(Joomla!の)TinyMCEでは対応できない、カスタムCSSを適応してWYSWYGできます。(Joomla標準エディタでもできる、かもしれませんがやり方を知りません・・・)

ワンボタンでFont Awesomeを挿入できる「Better Font Awesome」のような便利な拡張機能がJoomlaにはありませんが、JCEの「スタイル」に設定しておけばよく使うアイコンは挿入できるようになります。(注:DxFontAwesomeというプラグインがありますが使い勝手があまり良くありません)

最近経験した(している)問題

ボタンが<a href="#">

各機能が<a href="#">内にJavascriptとして書かれているために、「トップへ戻る」を実装するプラグインを一緒に入れていると押すたびに画面が戻ってしまうのと機能がキャンセルされてしまっていました。

このトラブルはプラグインを書き換えて何とかなりました。

貼り付けできない!!

Joomla! 3.5.0が出たあたりから発症して今も直らない問題が、「貼り付け不能」になってしまった問題です。(正確には貼り付けできています)

不可視のDIV

たとえば、「我輩は猫である」を貼り付けると、

<div id="_mcePaste" class="mcePaste" data-mce-bogus="1″ style="position: absolute; left: 0px; top: -25px; width: 10px; height: 10px; overflow: hidden;">吾輩は猫である</div>

という不可視の<div>エレメントとして文書の一番最後に貼り付けられます。もう一度ペーストをするとペーストした場所に正常に貼り付けられます。

TinyMCE+WebKitブラウザの問題

これは、基本的にはTinyMCEから来ている問題のはずで、ChromeなどのWebKit利用ブラウザで貼り付け操作をするとブラウザによって挿入されてしまいます。

が、TinyMCEでは過去の問題のはずで、JCEでも前に修正されているはずです。が、なぜいま起こっているのかわかりません。

JCEには、WebKitで引き起こされる無駄なコードの削除という設定項目があり、有効にしても直りません。

対策

非WebKitブラウザなら大丈夫

FireFoxとOperaを試しましたが、正常に動作しています。

TinyMCEは大丈夫

私が管理しているサイト全てで起こっていて、2016年4月8日公開のJCE 2.5.16とChrome 49.0.2623.112 mの組み合わせでは解決していません。

エディタをTinyMCEにした場合には問題は起こらないので、TinyMCEのコードを使っているどこかで起こっているかなとはおもうのですが、原因はさっぱりわかりません。近いうちに直ってくれるといいなあ。

原因が判明!プラグインだった

その後、原因が判明しました。投稿フォーム内の文章を校正してくれるプラグインが悪さをしていたようです。JCEのせいだけではありませんでした。

プラグインを削除しなくても一時的に無効にすれば良いようだったので、JCEをまた使えるようになりました。他に、良いエディタがあればいいのですが、Ark Editorは私には重すぎ、Drop Editorは少しだけ足りませんでした。うーん。

Chromeのアップデートで治った

2016年5月上旬の時点で、_mcepasteのバグは消えています。Chromeのバージョンは50.0.2661.94 mです。