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

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

2 голосов
/ 15 декабря 2011

Я пытаюсь использовать 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().

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

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

Обновление:

Пробовал функции Тариама со следующими результатами: если я не использую что-либо из 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

1 Ответ

0 голосов
/ 15 декабря 2011

То, что вы описываете, звучит так, будто экземпляр редактора не закрывается правильно. Это причина, по которой 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) );
}
...