TinyMCEとEdit Area

　この２つ、一緒に使おうとしてたけど、結構難しいな。

    <script type="text/javascript">
        editAreaLoader.init({
            id: "hogehoge",
        });
    </script>

    <script type="text/javascript">
        tinyMCE.init({
        mode : "exact", 
        elements : "hogehoge",
        ...
    </script>

　当初、こんな感じにして動的に２つのエディタのオン、オフをしようとしたけど、初期化するタイミングや初期化が終了するタイミングがまちまちなので待ち合わせ処理が難しい。なによりエレメントの動的な管理をJavaScriptで書かなくてはならず面倒。しょうがないので、こんな感じに

    <script type="text/javascript">
        function editInit(){
            editAreaLoader.init({
                id: "hogehoge",
                ...
            });
        }
    </script>

    <script type="text/javascript">
        function mceInit(){
            tinyMCE.init({
            mode : "exact", 
            elements : "hogehoge",
            ...
        }
    </script>
    <script type="text/javascript">
        function procOnload(){
           　if(flg='1'){
                 mceInit();
             }
             else{
                 editInit();
             }
        }
    </script>
 
    <body onoad="procOnload();" >
        ...
    </body>

　これならJavaScritがあまり分からない自分にもちょっとは分かる。単純に各エディタの初期化をファンクション化して、onloadイベントでフラグにより呼び出しているだけ。

　これはちょっとうまくいった。少なくともFireFox,Operaでは。IE7だとどうしてもうまくいかず、と言うより画面すら表示されない。そっけないメッセージには"tynymceは宣言されていません。"

　しょうがないので、各エディタの初期化をファイルに書いておいて、イベントでサーバ側でファイルを読み込んでその内容をHTMLに動的に入れ込む形にした。

　自分の作っているものは、通常はTinyMCEで書くエリアがあり、HTMLをいじりたいときだけ、HTMLを自由にいじらせるが、いかんせんTinyMCEの吐き出すHTMLが汚いので、（整形のキーワードがあったけど、あまり自分には有用でなかった）いったんサーバに飛ばしてJericho HTMLで整形してから、再度クライアント側でEdit Areaで表示すると言うしかけ。

　必ずJerichoの整形が入ってしまって逆によろしくないかもしれないけど、とりあえずはコレでいいや。

arcanum_jp’s blog

おっさんの日記