Twig対応HTMLエディター FOR EC-CUBE 4.2/4.3

主な機能:

• 商品詳細、フリーエリア、ページ、ブロック、ニュースなどを、TinyMCE を使って WYSIWYG 編集できます。
• 各コンテンツ領域(ページ、ブロック、フリーエリア等)において、WYSIWYG モードでは Twig 構文部分の編集は制限されますが、HTML 要素の編集は可能です。
• Twig 構文の編集は、TinyMCE のコードモードで快適に行えます。シンタックスハイライト機能が、HTML タグや Twig タグを色分け表示し、コードの可読性を高めます。
• 商品詳細ページの CSS もエディターに取り込まれるため、編集内容をフロント画面に近い状態で確認できます。
• 画像ファイル管理には、無料の Flmngr サービスを利用できます。API キーを取得して設定するだけで、すぐに使い始められます。
• TinyMCE のテーマ設定や、独自の CSS を追加することも可能です。デザインの自由度を高められます。
• 設定画面で HTML パーツをテンプレートとして設定でき、編集画面で簡単に挿入できます。
• EC-CUBE の標準機能では動画タグが制限されていますが、本プラグインのカスタマイズにより、TinyMCE を使って挿入した動画をページ上で表示できるようになります。

ご注意:

Twig内容ある場合は、編集できるHTMLは自動的に

<div class="ed-part">
...
<!--closepart-->
</div>


で囲まれているので、コードモードで、このdivタグとコメントを削除しないでください。

設定画面

• HTMLエディタを有効化: 各機能の有効化設定
• 商品プレビュー用開始タグ&閉じタグ: 商品詳細、フリーエリアのプレビュー時フロントのCSSが反映されるための設定です。初期値はEC-CUBEのデフォルトテンプレートのための設定となります。ご利用中のテーマに合わせて設定してください。
• 新着情報プレビュー用開始タグ&閉じタグ: 新着情報のプレビュー時フロントのCSSが反映されるための設定です。初期値はEC-CUBEのデフォルトテンプレートのための設定となります。ご利用中のテーマに合わせて設定してください。
• プレビュー用cssファイルURL: プレビュー時フロントのCSSが反映されるための設定です。初期値はEC-CUBEのデフォルトテンプレートのための設定となります。ご利用中のテーマに合わせて設定してください。
• エディタのテーマ: TinyMCEのテーマを選んでください
• Twigがない場合でも<div class="ed-part">タグを自動追加: オフの場合は自動追加しない
• 追加CSS: EC-CUBE のデフォルトテーマでは、画像が自動的に 100% 表示される仕様となっている場合があります。お客様が編集した HTML で指定された画像サイズが正しく反映されるように、ed-part クラスに対する CSS をデフォルトで設定しています。これにより、お客様が意図した通りの画像サイズで商品ページを表示させることが可能です。デフォルトテーマ以外のテーマをご利用の場合、必要に応じて CSS の設定を修正してください。
• Flmngr: 毎回画像をアップロードする代わりに、TinyMCEにファイルマネージャー機能をFlmngrを利用して統合されました。ご利用するにはAPIKeyを取得してください。
• Twig 関数 append_to_head の追加により、ページ、ブロック、フリーエリアなど、Twig が利用可能なあらゆる場所から、この関数を使って HTML の HEAD セクションに stylesheet や javascript を追加できるようになります。

新着情報管理ではコンテンツを編集したり、画像を挿入したりすることが可能です。

ページ編集画面ではTinyMCEのチェックボックスでエディターを切り替え可能です。また、TinyMCEのソースコードモードでもTwigやHTMLタグの編集が可能です。WYSIWYGモードではTwigタグがグレーと表示され編集不可になりますが、ソースコードモードで下記DIVタグで編集したいHTMLの部分を囲んで記入すれば、WYSIWYGモードでは囲まれたコンテンツのみ編集可能になります。

<div class="ed-part">
...
<!--closepart-->
</div>

システムは HTML タグを自動的に認識し、ed-partという

ブロック編集でTwig対応

商品説明とフリーエリアの編集

テンプレート機能