Task（タスク） #4071
未完了
OpenPNEに同梱されている TinyMCE 3.4.4 が IE11 に対応していないため、バージョンアップについて調査する
0%
説明
Overview (概要)¶
OpenPNE がリッチテキストエディタとして採用している TinyMCE のバージョンが古く IE11 で正常に動作しないため、バージョンアップについて調査を行う。
正常に動作しない例
・プレビューモードが動作しない
・<meta http-equiv="X-UA-Compatible" content="IE=10"> を追加した場合、下記のような不自然な動作となる
1. プレビューモード を選択
2. 1行目に適当な文字を入力し、行末でEnterキーを押下するが、改行されずカーソルが行末に残る
3. 再度Enterキーを押下すると改行され、2行目の行頭にカーソルが移動する
4. 文字を入力すると、カーソルが3行目に移動し3行目行頭に文字が入力される
OpenPNE に同梱されている TinyMCE のバージョンは、3.4.4 であるが、TinyMCE 3.x は IE11 に対応していない。
http://archive.tinymce.com/wiki.php/TinyMCE3x:Browser_compatiblity
IE11 に対応している TinyMCE のバージョンは、4.x となる。
https://www.tinymce.com/docs/get-started/system-requirements/
TinyMCE3.x の最新版は 3.5.12（2016/10/31）
https://github.com/tinymce/tinymce/releases/tag/3.5.12
TinyMCE4.x の最新版は、4.5.1（2016/12/07）
https://github.com/tinymce/tinymce/releases/tag/4.5.1
OpenPNE としては、IE11 に対応する必要があるので、TinyMCE をバージョンアップする場合は、4.x にバージョンアップする必要がある。
また、OpenPNE では、同梱の TinyMCE に対して独自のカスタマイズを行っているため、このカスタマイズについても影響などの調査が必要。
#2362 にて、TinyMCE 3.2.7 から 3.4.4 へのバージョンアップが行われているので参考にする。
また、TinyMCE 以外のライブラリへ変更する案も同時に検討したい。
kaoru n さんが約8年前に更新
- 関連している Bug（バグ） #128: JavaScript Error that "opEmoji is not defined" when Richtextarea is used before IE7 (リッチテキスト機能 IE7以前で「opEmoji宣言されていません」というエラーが表示される。) を追加
kaoru n さんが約8年前に更新
- 関連している Bug（バグ） #2362: IE9 で文字装飾のプレビューモードが正常に動作しない（ tinymce のバージョンを上げる） を追加
kaoru n さんが約8年前に更新
- 関連している Bug（バグ） #2495: HTML挿入で テキストモード→プレビューモード→テキストモード の切り替えを行うとリンクの遷移先の指定が変更されてしまう場合がある を追加
kaoru n さんが約8年前に更新
- 関連している Bug（バグ） #2496: HTML挿入で テキストモード→プレビューモード→テキストモード の切り替えを行うと <hr> の color 属性が消える を追加
kaoru n さんが約8年前に更新
- 関連している Bug（バグ） #3413: 管理画面のhtml挿入で，テキストモードからプレビューモードに切り替えた後，テキストモードに戻った時に入力内容が消える場合がある を追加
kaoru n さんが約8年前に更新
- 関連している Bug（バグ） #1302: OpenPNE's tinyMCE plugin can't convert from <i> tag to <op:i> tag を追加
kaoru n さんが約8年前に更新
- 関連している Enhancement（機能追加・改善） #1963: 文字装飾のプレビューモードにて、絵文字コードを絵文字画像に変換して表示してほしい を追加
Youichi Kimura さんがほぼ8年前に更新
3/17 の MTG で決定した事項:
- IE11 はサポート対象のため、少なくともこの不具合が起こらない状態にする必要がある
- IE11 でも WYSIWYG 編集が行えるようにするか、IE11 でのみ無効化 (テキストモードのみで編集できる状態) にするか
- TinyMCE の
tinymce.isIEプロパティの判定が User-Agent に基づいており、この判定が IE11 では正常に動いていない可能性がある - そのため、簡単な修正 (
tinymce.isIEを直すだけ) で済むのであればプレビューモードを使えるようにする方針で修正する - 難しければ IE11 ではプレビューモードを無効にする修正とする
Youichi Kimura さんがほぼ8年前に更新
IE11 の開発者ツールで試した結果:
- ドキュメントモード: IE11, User-Agent: IE11
- プレビューモードは動作せず、入力も表示もできない
- ドキュメントモード: IE11, User-Agent: IE10
- プレビューモードは動作し入力も行えるが、1 つの改行で 1 行分の行間が空く (具体的には
<br />ではなく<p>で行が区切られている)
- プレビューモードは動作し入力も行えるが、1 つの改行で 1 行分の行間が空く (具体的には
- ドキュメントモード: IE10, User-Agent: IE11
- プレビューモードは動作し入力も行えるが、Enter キー 1 回で改行が行われない (チケット本文の記載と同じ動作)
- ドキュメントモード: IE10, User-Agent: IE10 (
X-UA-CompatibleでIE=10を指定した場合に相当)- User-Agent: IE11 の場合と同じ動作
#4071-13 で予想していた「tinymce.isIE を直すだけ1」のパターンは、ドキュメントモード: IE11, User-Agent: IE10 で正常に動作することを期待したものであるが、この結果を見る限りでは User-Agent の判定を直しただけでは足りない模様。
1 User-Agent に MSIE (IE10まで) だけでなく Trident (IE8以降) が含まれることをチェックする修正。IE11 の User-Agent には Trident の表記しか存在しない