Backport（バックポート） #2799
IE9 で文字装飾のプレビューモードが正常に動作しない（ tinymce のバージョンを上げる）
100%
説明
概要¶
TinyMCE (tiny_mce) の文字装飾機能について、IE9 ではプレビューモードが正常に動作しない。なお、この問題は OpenPNE 2 でも発生する。
- キャプチャ
- 太字・斜体のような文字装飾ボタンを押しても装飾が機能しない
- 文字色パレット・絵文字パレットは表示されるが、色や絵文字を選んで押下しても装飾が反映されない
- テキストモードに戻せない
- 文字の表示サイズが他のブラウザ（IE8 など）に比べて小さい
これらは後述する原因によるものであり、よりマクロな問題は「IE9 で文字装飾機能（TinyMCE）が動作しない」というものである。
IE9のスクリプトデバッグモードを使用した際に表示されるエラー¶
OpenPNE 3 の場合、テキストモード→プレビューモードの切替時に以下のエラーが表示される。
SCRIPT438: オブジェクトは 'recalc' プロパティまたはメソッドをサポートしていません。 tiny_mce.js, 行 1 文字19997
このエラーが表示された直後にブラウザがフリーズするため、文字装飾ボタンをクリックした場合などのエラーは確認していない。
（蛇足）OpenPNE 2 の場合は上と同じタイミングで以下のエラーが表示される。
SCRIPT438: オブジェクトは 'parentElement' プロパティまたはメソッドをサポートしていません。 tiny_mce.js?r7140, 行 1 文字37913
対象バージョン¶
OpenPNE 3 系の全てのバージョン。
この問題は TinyMCE 側にあり、 IE9 独自の問題に対応したバージョンの TinyMCE を用いていないことが OpenPNE でこの問題が生じる原因である。ただし OpenPNE 側にも問題があるので併せて修正する。
修正方針¶
2009年10月14日に OpenPNE-3.1.4 で TinyMCE-3.2.7 が組み込まれている( e24edf33 )。 TinyMCE-3.2.7 では IE9 に対応しておらず、上記のような問題が生じる。
2011年8月現在、 TinyMCE は 3.4.4 が最新版として公開されており、このリリースまでに IE9 に対する修正がいくつか取り込まれている。
- TinyMCE を 3.4.4 にバージョンアップすることで対応する。
- ただし、 TinyMCE-3.2.7 の実装を前提に記述した OpenPNE 側のコードがあるため、バージョンアップ後に OpenPNE 側で拡張した部分を修正する必要がある。
関連するチケット
関係しているリビジョン
履歴
#1
Minoru Takai が約12年前に更新
- 担当者 を Minoru Takai にセット
#2
Minoru Takai が約12年前に更新
- ステータス を New（新規） から Accepted（着手） に変更
master ブランチでのコミットを取り込むのではなく、 master ブランチにある tiny_mce の関連ファイルに差し替える方針で対応します。
この場合、本チケットでの差分以外にも、別チケットで対応された差分が含まれることになります。
このチケットの元チケットの修正では、
- plugins/opSkinBasicPlugin/web/css/main.css
- web/js/decoration.js.src
- web/js/tiny_mce/*
と、大きく分けて 3 箇所が変更されています。 tiny_mce ディレクトリ内は多くのファイルの差分があります。
この修正を元チケットでする前の master ブランチの web/js/tiny_mce ディレクトリ内と、 stable-3.4.x の現時点での web/js/tiny_mce ディレクトリ内の差分は以下のものだけでした。
- web/js/tiny_mce/plugins/openpne/editor_plugin.js.src
$ diff -u 34x_editor_plugin.js.src master_editor_plugin.js.src --- 34x_editor_plugin.js.src 2012-03-06 23:02:26.000000000 +0900 +++ master_editor_plugin.js.src 2012-03-06 22:57:32.000000000 +0900 @@ -55,7 +55,7 @@ for (var num in s.emoji) { var emoji = s.emoji[num]; for (var i = emoji.start; i <= emoji.end; i++) { - if (i == emoji.start || i % 25 == 0) { + if ((i - emoji.start) % 25 == 0) { tr = DOM.add(tb, 'tr'); } n = DOM.add(tr, 'td'); @@ -502,13 +502,8 @@ var newObj = editor.dom.create(tagname); editor.dom.setAttribs(newObj, args); + editor.dom.replace(newObj, targetObj, true); - if (tinymce.isIE) { - newObj.innerHTML = targetObj.innerHTML; - targetObj.parentNode.replaceChild(newObj, targetObj); - } else { - editor.dom.replace(newObj, targetObj, true); - } tagList = doc.getElementsByTagName(org_tagname); } s = editorDoc.innerHTML; @@ -522,7 +517,7 @@ rep(/<\/?div>/gi,""); // for Safari if (Prototype.Browser.IE) { - rep(/<(\/?)op(b|u|s|i|font|large|small|color)/gi, '<$1op:$2'); + rep(/<(\/?):?op(b|u|s|i|font|large|small|color)/gi, '<$1op:$2'); } rep(/<br\s?\/?[^>]*>/gi,"\n\n");
上記の差分は、
のものです。つまり、この 2 つのチケットの修正を stable-3.4.x ブランチに取り込むことになります。
tiny_mce ディレクトリ外のファイルの差分は次のものです。
$ git di plugins/opSkinBasicPlugin/web/css/main.css
diff --git a/plugins/opSkinBasicPlugin/web/css/main.css b/plugins/opSkinBasicPlugin/web/css/main.css
index 97050ef..41049b6 100644
--- a/plugins/opSkinBasicPlugin/web/css/main.css
+++ b/plugins/opSkinBasicPlugin/web/css/main.css
@@ -1440,6 +1440,7 @@ div.activityBox div.box_list div.box_body ul.operation li {
* toolbar of opWidgetFormRichTextareaOpenPNE
*----------------------------------------------------------------------------*/
div.parts table.mceToolbar {
+ table-layout: auto;
width: auto;
}
$ git di web/js/decoration.js.src diff --git a/web/js/decoration.js.src b/web/js/decoration.js.src index 0145bde..2c70030 100644 --- a/web/js/decoration.js.src +++ b/web/js/decoration.js.src @@ -122,10 +122,13 @@ function op_mce_show_color_table(id, tagname) Element.addClassName(table, 'disabledHideColorTable'); button_container.appendChild(table); + button_container.style.position = "relative"; + button.style.display = "inline-block"; + var buttonContainerPosition = Position.cumulativeOffset(button_container); var buttonPosition = Position.cumulativeOffset(button); - table.style.left = buttonPosition[0] + "px"; - table.style.top = buttonPosition[1] + button.offsetHeight + "px"; + table.style.left = buttonPosition[0] - buttonContainerPosition[0] + "px"; + table.style.top = buttonPosition[1] - buttonContainerPosition[1] + button.offsetHeight + "px"; } function op_insert_str_to_selection(elm, str, start, end)
#3
Minoru Takai が約12年前に更新
- ステータス を Accepted（着手） から Pending Review（レビュー待ち） に変更
- 進捗率 を 0 から 50 に変更
更新履歴 d9916e9fc4f7bc02bec2fa4d25534f8f8f310d4d で適用されました。
#5
Yuma Sakata が約12年前に更新
- ステータス を Pending Review（レビュー待ち） から Rejected（差し戻し） に変更
テスト実施しましたが、修正が必要な点がありましたので確認お願いします。
プレビューモードでパレットボタン(文字色、絵文字)の装飾が反映されるか確認(Firefox最新版で確認)¶
- 試験手順
1.frontendログイン後、日記作成ページ(/diary/new)にアクセスする
2.プレビューモード選択後、文字入力(例：OpenPNE)してパレットボタン(文字色、絵文字)クリックする
- 試験結果
絵文字が入力できない
- 修正方針
絵文字が入力できるように修正お願いします。
- 備考
Firefox10.0.2 で確認しました。
#7
Minoru Takai が約12年前に更新
- ステータス を Accepted（着手） から Pending Review（レビュー待ち） に変更
- 進捗率 を 0 から 50 に変更
note-5 の指摘は問題ない（そのような問題は起こっていない）と確認しているので、レビュー待ちにします。
#8
Kousuke Ebihara が約12年前に更新
- ステータス を Pending Review（レビュー待ち） から Pending Testing（テスト待ち） に変更
- 進捗率 を 50 から 70 に変更
#9
Yuma Sakata が約12年前に更新
- ステータス を Pending Testing（テスト待ち） から Fixed（完了） に変更
- 進捗率 を 70 から 100 に変更
テストOKです。