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

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

Я прочитал много вопросов о stackoverflow и не нашел решения, которое мне подходит. в текущем состоянии я получаю "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.


javascript tinymce rte fancybox
person Raz    schedule 15.12.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

То, что вы описываете, похоже на то, что экземпляр редактора не закрывается правильно. Именно по этой причине 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) );
}
person Thariama    schedule 15.12.2011
comment
я получаю ту же ошибку, что и раньше. (Компонент вернул код ошибки: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIDOMHTMLDocument.implementation]) попытался выполнить console.log для проверки идентификатора, и он возвращает правильный (htmlarea) - person Raz; 15.12.2011
comment
похоже, что обычная команда выключения выдает эту ошибку независимо от того, что вы делаете. мы должны попытаться найти обходной путь для этого. Я обновлю свой ответ обходным путем. - person Thariama; 15.12.2011
comment
извините за задержку ответа. попробовал предложенные вами изменения, и я получаю результаты, опубликованные в моем обновлении - person Raz; 18.12.2011
comment
то, что j является нулевой ошибкой, звучит знакомо для меня. какую версию тинимса вы используете? - person Thariama; 19.12.2011
comment
обновлен исходный пост с использованными версиями (я обновляю его вместо комментариев, потому что они могут потеряться в толпе, и я бы предпочел иметь всю информацию в одном месте для дальнейшего использования) - person Raz; 19.12.2011
comment
хм, насколько я помню, была такая проблема j is null в одном из ранних выпусков tinymce 3.4.x, но вы используете самую последнюю версию, и эта ошибка должна была быть удалена с нескольких второстепенных версий. Для ни я из идей. - person Thariama; 19.12.2011