タブをナビゲートするときのtinymceエディタの問題

Question

私のアプリケーションでは、テキスト領域の代わりにtinymceエディタを表示するためにtinymceを使用しています。 JSPには2つのタブがあり、どちらもtinymceテキストエディタを含んでいます。 jはヌル ソースファイルである：私は下記の手順とき、私はエラー」エラーを取得しています - タブ1で私が

<form:textarea path="comment" class="mceEditor" rows="4" cols="175"/> 
... 
... 
<script type="text/javascript" > 
    tinyMCE.init({ 
       mode : "textareas", 
       theme : "advanced", 
       plugins : "pagebreak,style,layer,table,save,advhr,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 
       editor_selector :"mceEditor", 
       skin : "o2k7", 
       skin_variant : "silver" 
      }); 
    </script> 

問題以下のように別のテキストエリアを持っているタブ2で

<form:textarea path="msgToIS" class="mceEditor" rows="4" cols="175"/> 
... 
... 
<script type="text/javascript" > 
tinyMCE.init({ 
      mode : "textareas", 
      theme : "advanced", 
      plugins : "pagebreak,style,layer,table,save,advhr,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 
      editor_selector :"mceEditor", 
      skin : "o2k7", 
      skin_variant : "silver" 
     }); 
</script> 

を以下のスニペットています：http://localhost/portal/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js 行：エラーコンソールの1インチ。このエラーはFirefoxでのみ表示されます。

ステップ1 - タブ1

ステップ2をクリックして - タブ2

ステップ3をクリックします - 手順4

タブ1をクリックします - エディタでいくつかのコメントを入力します。

ステップ5 - ページを送信します。 "tinyMCE.get（ 'msgToIS'）。getContent（）"を使用してエディタ値にアクセスしようとすると送信時にエラーが発生します。

しかし、タブ2にアクセスせずにタブ1をクリックしても、エラーが表示されないページを送信すると、正しいエディタコンテンツが得られます。

IE6、Safariでは同じスクリプトが正常に機能していますが、Firefox 3.6ではうまく動作していません。

何か助けていただければ幸いです。前もって感謝します！！

Answer 1

どちらの場合も、textareaにはclass = "mceEditor"があり、TinyMCE.initにはeditor_selector： "mceEditor"を使用していることが関係します。各テキストエリアに異なるクラス "mceEditor1"と "mceEditor2"を与え、それに応じてinit_create： "mceEditor1"とeditor_selector： "mceEditor2"のパラメータを設定します。

Answer 2

ダイナミックなことなら（javascript経由で "タブ"を切り替えるような）TinyMCEでは、エディタを手動で追加したり削除したりする必要があります。そうしないと奇妙な結果が得られます。私は（私はあなたが実際にそれについてコメントし、これであなたを助けるために私を求めて前に読んでいないと仮定していた）私のblog postでより詳細にこれをカバーするが、それの要旨はこれです：

1. TinyMCEがテキスト領域を自動的に初期化して引っ張らないように、モード "none"を使用してください。モード「textareas」を使用すると、のテキストエリアが正しく初期化されないため、問題が発生します。 （例えば、タブ2上の一つが最初に隠されている）

2. いつタブが示されている（のようなページのロードに言うまたはタブを切り替えるとき）、手動のでなどのテキスト領域にTinyMCEのエディタを初期化：

   を

   tinyMCE.execCommand（ 'mceAddControl'、false、 'the_textareas_id_here'）;

新しいタブに切り替える前に、現在のテキスト領域を節約トリガ（これは、実際のフォームのテキストエリアに戻ってTinyMCEのエディタの内容を配置します。

TinyMCEのを。triggerSave（）;

4. 現在TinyMCEのインスタンスを削除します。

   tinyMCE.execCommand（ 'mceFocus'、偽、 'the_textareas_id_here'）;
   tinyMCE.execCommand（ 'mceRemoveControl'、false、 'the_textareas_id_here'）;新しいタブに

5. 切り替えて、それはTinyMCEのバグだステップ1.

Answer 3

から繰り返します。内部的には、tinymceコードは貼り付け時にキャレット位置を記憶するために<span id="mce_marker"></span>を使用します。結果のフラグメントを検証するときに、ペースト後にスパンが無効であるとみなされ、削除され、マーカーを削除することによってコードが破られます。 この問題は、次の公式のtinymceマイナーリリースで修正される予定です。この種の問題にはいくつかの回避策があります。 1つは、idとmce-data-typeという属性をspansas valid elements (init setting)に追加するためです。例：ガブリエル@

// The valid_elements option defines which elements will remain in the edited text when the editor saves. 
    valid_elements: "@[id|class|title|style]," + 
    "a[name|href|target|title]," + 
    "#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i,-u" + 
    "-span[data-mce-type]",