Project

General

Profile

Backport(バックポート) #2799

IE9 で文字装飾のプレビューモードが正常に動作しない( tinymce のバージョンを上げる)

Added by Kousuke Ebihara almost 8 years ago. Updated almost 8 years ago.

Status:
Fixed(完了)
Priority:
High(高め)
Assignee:
Target version:
Start date:
2011-08-22
Due date:
% Done:

100%


Description

概要

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 側で拡張した部分を修正する必要がある。

Related issues

Related to OpenPNE 3 - Bug(バグ) #2362: IE9 で文字装飾のプレビューモードが正常に動作しない( tinymce のバージョンを上げる) Fixed(完了) 2011-08-22
Related to OpenPNE 3 - Backport(バックポート) #1306: IE7,8 tinyMCEで文字装飾が反映されない Fixed(完了) 2010-07-06
Related to OpenPNE 3 - Backport(バックポート) #2859: プレビューモードの絵文字パレットの右上にスペースがある Fixed(完了) 2011-04-09

Associated revisions

Revision 7b3fd4b0 (diff)
Added by Minoru Takai almost 8 years ago

(refs #2799, BP from #2362) updated tinymce to 3.4.4 (only web/js/tiny_mce)

Revision d9916e9f (diff)
Added by Minoru Takai almost 8 years ago

(fixes #2799, BP from #2362) fixed CSS to buttons spacing of tinymce-toolbar for IE6/7, and fixed the color-palette of text-mode not to depend on position-property-value of element of ancestors.

History

#1 Updated by Minoru Takai almost 8 years ago

  • Assignee set to Minoru Takai

#2 Updated by Minoru Takai almost 8 years ago

  • Status changed from New(新規) to 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");
    

上記の差分は、

  • #2859 プレビューモードの絵文字パレットの右上にスペースがある
  • #1306 IE7,8 tinyMCEで文字装飾が反映されない

のものです。つまり、この 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 Updated by Minoru Takai almost 8 years ago

  • Status changed from Accepted(着手) to Pending Review(レビュー待ち)
  • % Done changed from 0 to 50

更新履歴 d9916e9fc4f7bc02bec2fa4d25534f8f8f310d4d で適用されました。

#4 Updated by Minoru Takai almost 8 years ago

このチケットでは次の 2 つのコミットをしています。この 2 つのコミットで元チケット #2362 の全ての修正が取り込まれています。

また、同時に、前者のコミットには #2859#1306 で対応する予定のコミットが含まれています(このことは note-2 に書いています)。

#5 Updated by Yuma Sakata almost 8 years ago

  • Status changed from Pending Review(レビュー待ち) to Rejected(差し戻し)

テスト実施しましたが、修正が必要な点がありましたので確認お願いします。

プレビューモードでパレットボタン(文字色、絵文字)の装飾が反映されるか確認(Firefox最新版で確認)

  • 試験手順
    1.frontendログイン後、日記作成ページ(/diary/new)にアクセスする
    2.プレビューモード選択後、文字入力(例:OpenPNE)してパレットボタン(文字色、絵文字)クリックする
  • 試験結果
    絵文字が入力できない
  • 修正方針
    絵文字が入力できるように修正お願いします。
  • 備考
    Firefox10.0.2 で確認しました。

#6 Updated by Minoru Takai almost 8 years ago

  • Status changed from Rejected(差し戻し) to Accepted(着手)
  • % Done changed from 50 to 0

確認します。

#7 Updated by Minoru Takai almost 8 years ago

  • Status changed from Accepted(着手) to Pending Review(レビュー待ち)
  • % Done changed from 0 to 50

note-5 の指摘は問題ない(そのような問題は起こっていない)と確認しているので、レビュー待ちにします。

#8 Updated by Kousuke Ebihara almost 8 years ago

  • Status changed from Pending Review(レビュー待ち) to Pending Testing(テスト待ち)
  • % Done changed from 50 to 70

#9 Updated by Yuma Sakata almost 8 years ago

  • Status changed from Pending Testing(テスト待ち) to Fixed(完了)
  • % Done changed from 70 to 100

テストOKです。

Also available in: Atom PDF