OpenPNE 3

web/js/tiny_mce/tiny_mce_src.js

1-var tinymce = {
2:    majorVersion : '3',
3:    minorVersion : '2.7',
4-    releaseDate : '2009-09-22',
5-

IE9 で tiny_mce が動作しない問題はいくつも記事がヒットする。 http://stackoverflow.com/questions/6912211/tinymce-not-working-in-ie9

tiny_mce のバージョンを上げてこの問題を解消するのが（バージョンアップによる副作用がなければ）好ましいが、 OpenPNE が IE9 をどのようにサポートするかという別の問題も絡んでくる。

IE8 対応についても同様だが、 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> を記述することで問題が生じないようにするという方針も考えられる。 IE の過去互換モードを使用して回避するか、それを用いずに IE のバージョン間の際を考慮して対応する（つまり tiny_mce のバグを解消する）かのどちらかが考えられる。

ちなみに、このチケットで扱う内容の対象外かもしれないが、 IE6/7 で文字装飾ボタンの間隔が大きく開いているのは IE6/7 の CSS の解釈に不備があるためであり、これは CSS の追記で修正できる。

考察¶

現在 TinyMCE のバージョン 3.2.7 を用いているのは、単にそのバージョンに上げた時点で（おそらく）最新版だったためであると考えられる（2009年10月14日に OpenPNE-3.1.4 で TinyMCE-3.2.7 が組み込まれている e24edf33 ）。

つまり現在の最新版 3.4.4 にバージョンアップするべきではない理由は特にない。

そして、TinyMCE をバージョンアップせずとも IE 独自の meta 要素によるエミュレーションにより IE9 でも（互換モードで表示させることで）動作するように対応することはできるが、IE9 をネイティブのまま動作しないようにすることは好ましい対応ではない（IE9 の新仕様を使わせないことは、IE のバージョンアップを否定することを意味する）。

IE9 に対して互換モードを用いるようにする、という対応は、それ以外に対応策がなく、互換モードで扱わせてしまうことによるデメリットが許容できるような限定的な場面に限って行うという方針であるべきである。

こうしたことを考慮すると、本問題の本質的な解決策は TinyMCE のバージョンアップであると考えられる。

メモ: tiny_mce/tiny_mce_src.js の renderMenu と tiny_mce/plugins/openpne/editor_plugin.js.src の renderMenu との差分 (手作業で抽出したので変なホワイトスペースが入っている可能性はある）

$ diff -b -u /tmp/original /tmp/openpne
--- /tmp/original    2011-09-01 14:57:08.000000000 +0900
+++ /tmp/openpne    2011-09-01 14:59:34.000000000 +0900
@@ -1,3 +1,4 @@
+// copied from tiny_mce/tiny_mce.js.src (ver 3.4.4), and does not use "t.editor" 
 renderMenu : function() {
     var t = this, m, i = 0, s = t.settings, n, tb, tr, w, context;

@@ -25,11 +26,11 @@
             style : {
                 backgroundColor : '#' + c
             },
-            'title': t.editor.getLang('colors.' + c, c),
+            // 'title': t.editor.getLang('colors.' + c, c),
             'data-mce-color' : '#' + c
         });

-        if (t.editor.forcedHighContrastMode) {
+        if (t.editor && t.editor.forcedHighContrastMode) {
             n = DOM.add(n, 'canvas', { width: 16, height: 16, 'aria-hidden': 'true' });
             if (n.getContext && (context = n.getContext("2d"))) {
                 context.fillStyle = '#' + c;
@@ -54,6 +55,7 @@

     DOM.addClass(m, 'mceColorSplitMenu');

+
     new tinymce.ui.KeyboardNavigation({
         root: t.id + '_menu',
         items: DOM.select('a', t.id + '_menu'),

1. 63d8b3f0
2. 9c785df7
3. 15411d5d
   • このチケットの問題ではないが、絵文字パレットの表示位置を変更した。
   • これまでの仕様と異なることになるが、本文エリアに被さるように絵文字パレットが表示されるのは利便性が低いと判断した。
4. efb3f429
   • このチケットの問題ではないが、 IE6/7 で文字装飾ボタンの間隔が広くなっている問題を解消した。
5. 8c2c373c
   • このチケットの問題ではないが、テキストモードでのカラーパレットの表示位置が、ウィンドウが基点であることを前提としており、カスタマイズなどで「パレットの親要素（厳密には、文字装飾ボタンを囲う div#diary_body_buttonmenu の要素）よりも先祖の要素に position プロパティで static 以外の指定されている場合」に「テキストモードでのカラーパレットの表示位置が想定位置から大幅にずれる」という問題があったのを解消した。

このチケットの問題に対しては、1個目と2個目の修正のみで良いかもしれませんが、3個目から5個目の修正も併せてこのチケットで扱いました。

5個目の修正を note-11 のレビュー後に追加したのでコメントしておきます（5個目の修正内容自体を追加することに問題はないと思います）。

前述の通り、このチケットの内容だけ考えれば1個目と2個目の修正のみで良いのですが、改善も併せて3個目と4個目を行いました。しかし5個目の問題も認識しており、これも併せて行ってしまっても良いのではないかと思ったので追加しました。

もし3個目以降の修正を取り込んでしまうことが問題であると判断し得る場合は、直近のリリースまでに指摘をお願いします。指摘内容に則して対応をしたいと思います。ただし、チケットが完了となりリリースが行なわれてしまった後で、ここでの修正が不適切であると判断された場合は別チケットで改めて扱うことを予定します。

note-10 に対して¶

tiny_mce/tiny_mce_src.js の renderMenu と tiny_mce/plugins/openpne/editor_plugin.js.src の renderMenu との差分

についてですが、プレビューモードでのカラーパレット (var t = this) において、 t.editor が undefined であるため t.editor.* を直接参照している箇所を修正しました（※）。

※しかしながら、 tiny_mce/tiny_mce_src.js 側では renderMenu において t.editor が何らかのオブジェクトであることを前提としていることを考えると、 tiny_mce/plugins/openpne/editor_plugin.js.src 側で t.editor を用意できていないことが本質的な誤りなのではないかとも思っている。が、どこを修正すべきか分からなかったので t.editor がオブジェクトとして扱えないことを前提とするコードへと書き換えた（以下参照）。

• // 'title': t.editor.getLang('colors.' + c, c),
  • 「 t.editor があれば」という記述への変更が難しかったのでコメントアウトしました。
• if (t.editor && t.editor.forcedHighContrastMode) {
  • 「 t.editor があれば」という記述を追加しました。（「 t.editor && 」を追加）

この 2 箇所を変更しました。 note-10 で示されている下方の差分：

@@ -54,6 +55,7 @@

     DOM.addClass(m, 'mceColorSplitMenu');

+
     new tinymce.ui.KeyboardNavigation({
         root: t.id + '_menu',
         items: DOM.select('a', t.id + '_menu'),

は入っていないと思います（が、もしかしたら誤操作で不要な空白類が混在しているかもしれません）。

問題の背景¶

note-21 で指摘された問題は、TinyMCEで入力された要素（スタイル）をOpenPNE独自にパースする処理について、TinyMCEのバージョンと入力者が使うブラウザによって、出力される要素が異なること（例えば「太字」の装飾に b 要素が使われたり strong 要素が使われたりする）が根本的な原因でした。

これには、OpenPNE独自のJS（plugins/openpne/editor_plugin.js）側で、あるブラウザのときはこの要素を独自タグに変換する、といったことを列挙して記述していたようです。しかし今回のTinyMCEのバージョンアップで、この列挙にあてはまらないパターン（例えば Safari ブラウザで strong 要素が使われるケース）が発生したために、独自タグに変換されない要素が生じてしまったようです。

生じている問題¶

このチケットの対応後（TinyMCE-3.4.4 へのバージョンアップ後）に、 Safari, Chrome にて、プレビューモードで「太字」「斜体」の装飾を行いテキストモードに戻すと、 op:b, op:i ではなく strong, em タグでマークアップされてしまっている（※）。

以前のコメントに示した実装者テスト項目で示すと、以下の動作が Safari, Chrome にて正常ではなかったことになる。

• (20) プレビューモードで文字装飾を行い、テキストモードに変えたときに、それぞれの装飾に対応した独自タグ（<op:*>）が出力される

※これにより何が問題かという話だが、テスターから報告された問題点は「続けてプレビューモードにしたときに装飾が反映されない」というものだった。例えば太字に関して、 strong タグが出力されていても装飾が反映されればいいかという点だが、これはそもそも意図していないはずであり、独自タグを用意している意図がなくなってしまう（ <strong> を独自タグだと言い張るのは可能かもしれないが、それは想定していないはずである）。

余談だが、逆にバージョンアップ前は打消線で装飾すると Safari, Chrome で strike タグになってしまう問題があるようだ（今回の検証中に発見した）。

対応方針の検討¶

対応方針を考えるため、 web/js/tiny_mce/plugins/openpne/editor_plugin.js.src で、「プレビューモードからテキストモードにモードを変更した瞬間に、プレビューモードで入力されていた要素（スタイル）を独自タグに変換する処理」の変更履歴を追ってみた。

1. master ブランチで editor_plugin.js.src を git blame して行の差分履歴の大半を占めたコミットログ
   

   commit 9ec05e7c567acaed0e74356b8a228b45d8d08208
   Author: ebihara <ebihara@8bbc783d-d51a-0410-adab-8fa69d43f207>
   Date:   Wed Dec 17 16:48:49 2008 +0000
   
       #3194:added ability to set widets to home
   
       git-svn-id: https://trac.openpne.jp/svn/OpenPNE3/trunk@9582 8bbc783d-d51a-0410-adab-8fa69d43f207
   

2. trac.openpne.jp のチケット 3194 http://trac.openpne.jp/ticket/3194 から追ったリビジョン 9582
   • http://trac.openpne.jp/changeset/9582
   • 9582 時点の web/js/tiny_mce/plugins
     • http://trac.openpne.jp/browser/OpenPNE3/trunk/web/js/tiny_mce/plugins?rev=9582
3. ここから辿れる web/js/tiny_mce/plugins/openpne/editor_plugins.js.src の最終リビジョン
   • http://trac.openpne.jp/log/OpenPNE3/trunk/web/js/tiny_mce/plugins/openpne/editor_plugin.js.src?rev=9582
4. 9151: コピー元のブランチのリビジョンログを辿る
   • http://trac.openpne.jp/log/OpenPNE/trunk/public_html/js/tiny_mce/plugins/openpne/editor_plugin.js.src?rev=9151
5. 7138: コピー元のブランチのリビジョンログを辿る
   • http://trac.openpne.jp/log/OpenPNE/branches/stable-2.12.x/public_html/js/tiny_mce/plugins/openpne/editor_plugin.js.src?rev=7139
6. 7131: コピー元のブランチのリビジョンログを辿る
   • http://trac.openpne.jp/log/OpenPNE/branches/stable-2.12.x/public_html/js/tiny_mce/plugins/openpne/editor_plugin.js?rev=7131
7. 6703: コピー元のブランチのリビジョンログを辿る
   • http://trac.openpne.jp/log/OpenPNE/trunk/public_html/js/tiny_mce/plugins/openpne/editor_plugin.js?rev=6703
8. 6347: コピー元のブランチのリビジョンログを辿る
   • http://trac.openpne.jp/log/OpenPNE/branches/work/ebihara/prj_deco_diary/public_html/js/tiny_mce/plugins/openpne/editor_plugin.js?rev=6347
9. strong, strike, em 要素をそれぞれ b, s, i 要素に変換する処理を追加した変更
   • http://trac.openpne.jp/changeset/6254

web/js/tiny_mce/plugins/openpne/editor_plugin.js.src
532 行目

if (!tinymce.isWebKit) {  // not safari
    s = tinymce.trim(s);
    rep('/<(\/?)strong>/gi', '<\1b>');
    rep('/<(\/?)strike>/gi', '<\1s>');
    rep('/<(\/?)em>/gi', '<\1i>');
    editor.dom.setHTML(editor.getBody(), s);
}

この部分の if 文を外す（ WebKit, つまり Safari や Chrome でもこの処理を行う）ようにすれば、今回の問題は解消されるようだ。

修正内容の確認¶

このコメントを書いている時点で考えなければならないのは、 http://trac.openpne.jp/changeset/6254 の修正を行ったときと同じ視点で、現状のブラウザの状況に合わせて同様の修正を追加することです。

• WebKit に対しても strong, strike, em 要素を変換する処理を行うようにするだけで良いのか
  • むしろもともと WebKit を対象外にしていた理由はなんだろうか（WebKit でもこの処理を通してしまってもよいが通す必要がないから対象外にしていたのか、WebKit ではこの処理を通してしまうと問題があったのか）
• WebKit (for Safari) に向けた処理を削除するなどしなくてもよいか
  • なんでそもそも for safari とかいったコードを書く必要があったのだろうか
• 他のブラウザで同様の問題が起こっていないか

これらが、特に確認しなければならない点です。現状の web/js/tiny_mce/plugins/openpne/editor_plugin.js.src のソース（本チケットの8個目の修正時点）は次のURLから確認できます。

https://github.com/openpne/OpenPNE3/blob/ed49d5bd970f2e640f1bc9bd6f852b9eceaaf5bb/web/js/tiny_mce/plugins/openpne/editor_plugin.js.src#L525

また、この修正に併せて、 convertHtmlTagToDecoTag() メソッドの一般化（より簡潔な記述）などが可能かどうかも検討しておきたいです。

余談ですが、 590行目 の "// for safari" というコメントは、恐らく fontSize の分岐が加わった時点で不適切なコメントとなっています。 if (org_tagname == 'span') を通り必要な処理が施されるのは Safari (WebKit) だけではありません。コメントの記述も可能なら改善しておきたいです。

note-23 で editor_plugins.js.src の修正の経緯を示していますが、 http://trac.openpne.jp/changeset/5911 にあるようなコミットで対応した問題が、今回のバージョンアップによる仕様変更で再び問題となっているようです。

TinyMCE のコードをきちんと追っていないので、どこを修正することが根本的な対応なのか判断できていませんが、TinyMCE-3.2.7 の仕様（おそらく TinyMCE のバージョンが影響している）に基づいて記述していたコードが、TinyMCE-3.4.4 へのバージョンアップによって、想定通りの動作となっていない箇所がいくつかあります。 note-21 での指摘もその一つですが、 editor_plugins.js.src がどういう状況を前提に処理を行なっているのかを調べないと、こうした若干の不具合を含んだままのリリースとなってしまう危険性があります。

note-23 でも示していますが、本件は TinyMCE がどのような仕様なのかに加え、各種ブラウザがどのように動作するのかまでを把握していないと、あるケースにおける問題を網羅的に知ることができません（テスト項目が作れません）。

直近では、プレビューモードからテキストモードに変えた際に、改行が倍になってしまう問題が見つかっており、 http://trac.openpne.jp/changeset/5911 を取り消すような形で修正を行えば解消されるようですが、 br 要素を \n 2個分に変換すべきなのか、1個分に変換すべきなのか直ぐに判断ができません（なぜ古いコードでは2個にしていたのか）。

editor_plugins.js.src の記述内容が妥当かどうかについて見直したほうが良いと思いますが、この件については OpenPNE-3.6.0 リリース後の対応となっても良いと思います。つまり別チケットで扱うことになるかもしれません。

note-30 まででは、細かい不具合が見つかった場合に都度修正を行なっていましたが、OpenPNE-3.6RC1 のリリースに併せて、これ以上の不具合については別チケット扱いとします。

ここまでの修正内容を本チケットで扱うこととします。OpenPNE-3.6RC1 リリース後に、もし本チケットに対して差し戻しがあった場合も、既にバックポートチケットを完了にしている関係で別チケットで対応することにします。