携帯サイト用リッチエディタ

[nana]

こんにちは。

携帯サイトを作成されている方に質問です。

Modxでサイトを作成しており、携帯サイトも作成する事になりました。
コンテンツの表示を携帯用にしてみましたが、外部CSSがきかないので
別ドキュメントで作成する事にしましたが、リッチエディタ(TinyMCE)内での
表示で困っています。

状況
・PC用と携帯用のページがそれぞれある。
・TinyMCEに、エディター中で使用するCSSを指定している。

・携帯用のページは、PC用のCSSを使わずインラインでデザインをしている。
・携帯用のページをTinyMCEで修正する時にPC用のCSSが適用されないようにしたい。
　※今は、h1などのタグを付けると、PC用のCSSと携帯のインラインの両方が適用されてしまいます。

思いつく対応方法は、
PC用と携帯用に別のリッチエディタを2つ入れる事くらいしか思いつきません、

他によい方法はありますか？
そもそも、携帯サイトが同じModxで作成できればなんでもいいです。

[yama]

PC用と携帯用のページの違いはテンプレートの違いだったりしますか？だったら、ちょっと考え中のアイデアがありますが。

[nana]

はい、テンプレートの違いです。
主にデザインです。h1の背景など。。

[yama]

すんなり実装できるかどうかは分かりませんが、ManagerManagerのmm_rulesに相当するものをTinyMCEで実装できると便利ではと考えてます。mce_rulesという感じで。

コード: 全て選択

content_css('/style/mobile.css', '3');

たとえばこう書けば、ID=3のテンプレートを設定しているページではmobile.cssが使われる。という感じです。

[sama55]

多少難易度が高い操作になりますが、下の方法はどうでしょ？

１．テンプレート変数を１つ新規に作成

　タイプ：　file / text
　初期値：　ツール　＞　グローバル設定　＞　インタフェースとその他の機能　＞　「CSSファイルへのパス」　と同じ設定

２．ManagerManagerのルール

　PC/モバイルの各テンプレートIDをキーに、１のデンプレート変数にPC/モバイルそれぞれのCSSファイルへのパスを初期設定。

３．プラグインの追加

　・OnRichTextEditorInitイベントをフェッチするプラグインを新規に作成。
　・MODxAPIで１のテンプレート変数を取得後、$modx->config['editor_css_path']を書き換える。
　・「プラグインの実行順」で、TinyMCE Rich Text Editorプラグインより前で処理されるように設定。

※同じ論理で、$modx->config['tinymce_css_selectors']なんかも変えられるはず。
※TinyMCE Rich Text Editorプラグインそのものをハックすれば、TinyMCEの動きをいくらでもカスタマイズできるはず。
　　但し、プラグインのアップグレードが簡単にできなくなるので、プラグインをダイレクトに触ることはお勧めできません。

[yama]

プラグインを作るならそこで$modx->documentObject['template']を見て$modx->config['editor_css_path']を書き換えると一発かも。

もしかすると最新のTinyMCEプラグイン(3.3.2)だと、スタイルシートの設定は上書きせずに追加で読み込む仕様になってた気がします。1.0.3リリース直前にそんな感じのコードが入った記憶がありますが、試してないのでよく分かりません。もしそうだとすると、ここでハマる可能性がありますね。

[sama55]

プラグインを作るならそこで$modx->documentObject['template']を見て$modx->config['editor_css_path']を書き換えると一発かも。

そうですね。

２．ManagerManagerのルール
　PC/モバイルの各テンプレートIDをキーに、１のデンプレート変数にPC/モバイルそれぞれのCSSファイルへのパスを初期設定。

上記は大嘘つきました（すんません）。ManagerManagerのmm_default関数は組み込み済の特定なフィールド（pub_dateとか）しか処理できないので、テンプレ変数の初期値をコントロールする方式自体に無理がありました。

[sama55]

こんな感じ？

１．注意と前準備

１．１　RTEの設定はユーザーごとにも変更できる

ユーザー　＞　ユーザー管理　＞　個別ユーザー　＞　詳細設定　でグローバル設定のtinyMCE関連の設定と同じことが設定できる点に注意。

１．２　tinyMCEプラグインの設定値を変更

tinyMCEプラグインには予めtiny用のCSSが設定されている。グローバル設定やプログラム的にCSSを変える場合は下を削る必要がある。

コード: 全て選択

content_css : "assets/plugins/tinymce/style/content.css",

２．サンプルプラグイン　※あくまでサンプルですよー　＾＾；

プラグイン名：　ChangeCSSPath
設定：　特になし
システムイベント：　OnRichTextEditorInitをチェック
コード：　※

コード: 全て選択

// Handle event
$e = &$modx->Event; 
switch ($e->name) { 
  case "OnRichTextEditorInit":
    if ($modx->documentObject['template'] == 99) { // 99 is template number
      $modx->config['editor_css_path'] = 'assets/templates/modxhost/layout.css' ;
    } else {
      $modx->config['editor_css_path'] = 'assets/templates/modxhost/layout.css' ;
    }
    break;
  default :
    return; // stop here - this is very important. 
    break; 
}

※プラグインを追加すると、OnRichTextEditorInitでの実行順はtinyMCE >> ChangeCSSPath　の順になります。
　「イベント発生時のプラグインの実行順を編集」をクリックして、ChangeCSSPath >> tinyMCE の順にします。

[nana]

皆様ありがとうございます！

sama55さんがまとめてくださったやり方で試して、結果はのちほどご報告させていただきますね。

携帯サイトですが、docomoは、外部CSSが使えるのは去年に発売(発表？)されたiモードブラウザ2.0端末からですが、
皆様は外部CSSで作成されているのでしょうか。
これは、別に質問した方がいいかもですね。

[nana]

少し変更して思うとおりの動きができるようになりました。

コード: 全て選択

if($modx->documentObject['template'] == 99 ) 

の部分ですが、プラグイン内ではこの値を取得できないようだったので以下のようにしました。

コード: 全て選択

global $content; $template = $content['template']; 

ありがとうございました！