4

jquery.js、、がすでにロードされているjquery-ui.jsと仮定します。jquery-tinymce.jsそして、tinyMCEオブジェクトがインスタンス化されます。したがって、マークアップを使用したスクリプトは次のとおりです。

<script type="text/javascript">

  $(functon() {

  $("#AddComment").click(function(){

     $("#Dialog").dialog({
        modal :  true,
        show  : "fade",
        hide  : "fade",
        buttons : {
           OK : function(){
              // some ajax requests...
           }

       }
     });

  });

  });

</script>

<div id="Dialog" style="display: none;">
  <textarea id="wysiwyg"></textarea>
</div>


<button id="AddComment">Add comment</button>

ただし、ダイアログがなくても期待どおりに機能します（ページ上のtextarea（tinymce activeeditor）の場合）

「機能しない」とは、ダイアログが表示されている場合（モーダルダイアログ〜モーダルdiv）、「ホワイトエリア」をクリックしてコンテンツを追加|編集|削除することができないことを意味します

したがって、問題は次のとおりです。TinyMCEがモーダルdiv内で機能しないのはなぜですか。

4

2 に答える 2

5

私はこの問題を抱えていました。

手始めに、モーダルダイアログが画面に表示された後にtinymceをインスタンス化することを強くお勧めします。tinyMCEは画面上の「最も効果的な」スペースを占有しようとするため、モーダルボックスの設定方法によっては、実際には非表示または画面全体、あるいはその両方になります。

他にも何かありますが、ダイアログボックスを閉じた後、tinyMCEが存在していた領域内でページを操作する機能が無効になっていることに気付くかもしれません。あなたのページがすでにこの振る舞いを経験している可能性があります。

問題を解決したのは（それほどエレガントではありませんが、髪を抜いた後）、ダイアログボックスを破棄し、フォームがサーバーからパス応答を受け取った後、必ずtinymceを非表示にすることを選択しました。

これに使用する2つのコマンドがあります

  1. 軌道からダイアログボックスを削除します

    $('#modal-dialog').dialog('destroy');

  2. Tinymceの存在を確認し、見つかった場合は非表示にします

    if ($(".textarea").length) {
    $('.textarea').tinymce().hide();
};
于 2012-11-10T17:52:38.227 に答える
1

Symbalの応答に基づいて、これは私のために働いた解決策です。ダイアログを開くときはいつでも、最初にテキスト領域にtinymceが設定されているかどうかを確認し、削除されている場合は、テキスト領域にtinymceを適用します。

$("#Dialog").dialog({             
    open: function(){
        if($('#wysiwyg').tinymce() != undefined)
        {
            $('#wysiwyg').tinymce().remove();
        }
        $("#wysiwyg").tinymce({
            // Location of TinyMCE script
            script_url: "/js/tiny_mce/tiny_mce.js"
        });
    }
});

私はtinymceバージョン3を使用しています。

于 2015-03-02T19:40:35.377 に答える