Ошибка взаимодействия TinyMCE и fancybox

Question

Я пытаюсь использовать tinyMCE для текстовой области, которая отображается с помощью jquery fancybox. Я попробовал использовать плагин tinyMCE jQuery, загружаемую по умолчанию версию tinyMCE и полную версию tinyMCE для загрузки.

в первый раз, когда я открываю форму (форма показывается через fancybox), все работает как задумано; если я отменяю действие и пытаюсь снова открыть форму, текстовое поле отключается, но элементы управления 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'}
        ]

    });

и код для инициации fancybox:

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() заявление.

Я прочитал много вопросов о stackru, и я не нашел решение, которое работает для меня. в текущем состоянии я получаю "Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]" когда mceEnd() функция называется.

Я получаю ошибку в Opera, а также в Firefox. Если у кого-то есть идеи о том, что я делаю неправильно, они будут очень благодарны.

Обновить:

Испытал функции Thariama со следующими результатами: если я не использую что-либо из fancybox (просто откройте и закройте его), я получу "Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]"ошибка, но если я пытаюсь изменить область (скажем, выберите функцию жирным шрифтом, а затем закройте диалоговое окно" fancybox "), я получаю"j is null" ошибка

Используемые версии: TinyMCE 3.4.7, jQuery fancybox 1.3.4, jQuery 1.7.1

Answer 1

То, что вы описываете, звучит как экземпляр редактора, не закрывается правильно. Это причина, по которой tinymce не инициализируется при втором открытии формы. Вы можете попробовать этот код внутри вашего mceEnd() функционировать и рассказать нам, что происходит

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

РЕДАКТИРОВАТЬ: Обходной подход: я предлагаю вам попробовать следующее и скажите мне, если это поможет. Это должно позволить вам открыть форму во второй раз, но не удалит ошибку 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) );
}