Joomla!, Microsoft Word, etc.

Joomla!

JCE導入

Details
Written by: fuku-chang
Category: Joomla!

エディターをTinyMCEからJCEに移行します。

Summary

  • Joomla!に用意されているエディターはTinyMCEとCodeMirrorですので、WYSIWYGタイプのエディターはTinyMCE一択です
  • テキストの入力について大きな不満はないのですが、TinyMCEでの画像挿入時に、Mediaと行ったり来たりする手間が耐えられなくなってきました
  • そこで、高機能・高評価のJCEを導入し、移行します

Download

JCE

JCE Core

  • 有償版のJCE Proはサブスクリプションによる支払いとなります
    • 年間€39(2025/07/19為替換算6737.58円)は、年金生活のおじさんにはとても手が出ません
  • JCE Coreが無償版となります
    • Coreの名のとおり、一般の使用には十分な機能を備えています
    • トップページ(Home)をスクロールすると、Pro €39 per yearの左にCre Freeと表示されているので、ここからDownloadします

      • 因みに「Freeは何処にあるのかな」と、Downloadから辿ると、彷徨います

Setup

Installing

  1. System > System Dashboard > Manage blk > Extensions
  2. Extensions: Manage > Install Extensions
  3. Upload Pakage File > Upload & Install Joomla Extension
  4. パッケージファイル(zip)をドラッグアンドドロップするとインストール開始

Changing the default editor

  • Editorはユーザーが任意指定できますが、デフォルトをJCEに変更します
  1. System > System Dashboard > Setup blk > Grobal Configuration
  2. Site tab > Site blk > Default Editor
  3. Editor - TinyMCE Editor - JCE
  4. Save
  • TinyMCEの挙動を確認したい場合は、User Profireから一時的にEditorを変更します
  1. Users: Edit Profile > Basic Settings tab > Basic Settings blk > Editor
  2. - Use Default - Editor -TinyMCE

Insert image

  • JCEではInsert Imageボタンをクリックすると、Image Managerが開きます
  • 上部ペインが挿入する画像の詳細設定
  • 下部ペインでは画像を選択したり、新たにフォルダを作成(A)し、アップロード(B)することが可能です
    • cf. TinyMCEのInsert / Edit Imageでは、Source項目へのパス指定のみのため、事前にMediaにて当該画像のURLを確認する必要があります
      また、Uploadが同ダイアログからできません

Code Editor

Font Awesome

  • TinyMCEでは、i要素を挿入する際、空白文字のエスケープ を要素で囲む必要がありました
  • また、挿入した結果、i要素はem要素に変換されてしまいます
  • これに対し、JCEではデフォルトの状態で、問題なくi要素を挿入することが可能で、Font Awesomeのサイトからコピーしたコードをそのまま貼り付けることができます(空白文字を入れる必要がありません)

Youtube

  • default profileではYoutubeを埋め込むiframe要素を挿入することができません
  • セキュリティ対策の観点から不許可としていると思われます
  • Youtubeの普及等から、HTML 4で非推奨とされたiframe要素もHTML 5で非推奨が外され、HTML Living Standardでもこれを踏襲しているそうです
  • セキュリティ上のリスクを回避する手段としてsandbox属性の適切な設定が必須となってます
Reference
 Setting
  1. Components > JCE - Control Panel > Editor Profises
  2. Default - check on
  3. Copy
  4. Copy of Defaultを開く
  5. Setup tab > Details blk > Title:
  6. 任意の名称に修正
  7. Setup tab > Details blk > Description:
  8. 任意の内容に修正
  9. Plugin Parameters tab > left-pain: Media Support >
    Plugin Parameters tab - left-pain: Media Support
    • Media Supportは右ペインを少々スクロールしたところにあります
  10. Allow IFrames
    • No Local Content and Supported Media Only
    • 上記設定に変更すると、Supported Mediaを更に細かく選択することができます
  11. Save
  12. StatusをDefaultから修正したプロファイルに変更します
iframe element - sandbox attribute
  • BLACKFLAG氏が上記サイトで案内している5件の許可項目は次のとおりです
YouTubeを埋め込む際にsandbox属性で必要な値は下記の5つです。
・allow-scripts：スクリプトの実行を許可します。
・allow-popups：ポップアップウィンドウの表示を許可します。
・allow-popups-to-escape-sandbox：ポップアップウィンドウがサンドボックスを抜け出せるようにします。
・allow-same-origin：同一オリジンからのリクエストを許可します。
・allow-top-navigation：トップレベルナビゲーションを許可します。BLAKFLAGHTMLのsandbox属性でGoogleマップやYouTubeをセキュリティ制限をかけて埋め込む方法
Sample

<iframe src="https://www.youtube-nocookie.com/embed/I8j7XJxew7s?si=sVFUA6qrLuoxLCs-" width="560" height="315" title="YouTube video player" allowfullscreen="allowfullscreen" referrerpolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" frameborder="0" sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"></iframe>