2

jquery fancybox を使用して表示するテキストエリアで tinyMCE を使用しようとしています。tinyMCE jQuery プラグイン、tinyMCE のデフォルトのダウンロード バージョン、および tinyMCE の完全なダウンロード バージョンを使用してみました

フォームを初めて開いたとき（フォームはファンシーボックスを介して表示されます）、すべてが意図したとおりに機能します。アクションをキャンセルしてフォームを再度開こうとすると、テキストエリアは無効になりますが、tinyMCE コントロールは引き続き表示され、機能しません。

これは私が使用するフォームのコードです。fancybox で表示されます:

<div id="add-task" class="form-container">
<form method="POST" action="/task-add">
    <input type="hidden" name="project" id="add-task-id" value=""/></span>
    <div class="element">
        <span class="label">Short description</span>
        <span class="field"><textarea name="sh_description" rows="5" cols="15"></textarea></span>
    </div>
    <div class="element">
        <span class="label">Task description</span>
        <span class="field"><textarea name="description" rows="5" cols="15" id="htmlarea"></textarea></span>
    </div>
</form>
</div>

これは tinyMCE の初期化です:

    tinyMCE.init({

        // General options
        theme : "simple",
        mode : "none",


        // Example content CSS (should be your site CSS)
        content_css : "/static/css/tinymce.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "/static/js/tinymce/lists/template_list.js",
        external_link_list_url : "/static/js/tinymce/lists/link_list.js",
        external_image_list_url : "/static/js/tinymce/lists/image_list.js",
        media_external_list_url : "/static/js/tinymce/lists/media_list.js",

        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ]

    });

そして、ファンシーボックス開始のコード:

function mceAdd(){
    tinyMCE.execCommand("mceAddControl", false, "htmlarea");
}
function mceEnd(){
    tinyMCE.execCommand("mceRemoveControl", false, "htmlarea");

}

$(".taskAdd").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'onComplete'        : mceAdd,
    'onClosed'          : mceEnd
});

すべての JavaScript は$(document).ready()ステートメント内で実行されています。

stackoverflow に関する多くの質問を読みましたが、自分に合った解決策が見つかりませんでした。現在の状態では、関数が呼び出されると" Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]"が返されます。mceEnd()

Opera と Firefox でエラーが発生します。私が間違っていることについて誰かが何か考えを持っているなら、彼らは大歓迎です。

アップデート ：

次の結果で Thariama の関数を試してみました: ファンシーボックスから何も使用しない場合 (開いて閉じるだけ)、「Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]」エラーが発生しますが、領域を変更しようとすると (たとえば、太字の関数を選択してからファンシーボックスのダイアログを閉じてください) " j is null" エラーが表示されます

使用したバージョン: TinyMCE 3.4.7、jQuery fancybox 1.3.4、jQuery 1.7.1

4

1 に答える 1

0

あなたの説明は、エディター インスタンスが正しくシャットダウンされないように聞こえます。これが、フォームを 2 回目に開いたときに tinymce が初期化されない理由です。関数内でこのコードを試しmceEnd()て、何が起こるか教えてください。

for (var i = 0; i < tinymce.editors.length; i++) {
   tinyMCE.execCommand("mceRemoveControl", false, tinymce.editors[i].id);
}

EDIT：回避策：次のことを試して、それが役立つかどうか教えてください。これにより、フォームをもう一度開くことができるようになりますが、 の js エラーは削除されませんmceEnd()。

// global variable in script on top of the page
var editor_count = 0;

function mceAdd(){
    document.getElementById('htmlarea').setAttribute('id', 'htmlarea'+editor_count);
    tinyMCE.execCommand("mceAddControl", false, 'htmlarea'+editor_count);
}

function mceEnd(){
    editor_count++;
    // will throw js-error but hopefully this won't hinder us to reinitialize a second form
    tinyMCE.execCommand("mceRemoveControl", false, "htmlarea"+(editor_count-1) );
}
于 2011-12-15T16:16:38.277 に答える