jQuery .ajax() ломает TinyMCE 3.5.6

Я создал простую CMS с несколькими слоями jQuery.ajax(), например так:

function navto(destination, pageToEdit, insertInto) {
// use JQuery's ajax method to control main navigation
if (pageToEdit == "undefined") {
    var request = $.ajax({
        url: destination
    });
} else {
    var request = $.ajax({
        type: "POST",
        url: destination,
        data: pageToEdit
    });
}

request.done(function(msg) {
    if (insertInto) { $(insertInto).html( msg ); }
    else { $("#mana_content").html( msg ); }
    //alert(msg);
});

request.fail(function(jqXHR, textStatus) {
    alert( textStatus + ". This page could not be found." );
});
}

Например, index.php использует <li class="child" onclick="navto('inc/edit_pages.php');">Edit Pages</li> для загрузки edit_pages.php в <div id="content"></div>.

edit_pages.php использует $(document).on("click", "a.editPage", function(e) { load_page_for_edit(e); return false; }); (где load_page_for_edit() собирает и подготавливает информацию для отправки в функцию navto()) для отправки чего-то вроде edit_page.php?t=template.php&c=contentID

edit_page.php использует эти значения для поиска необходимой информации в соответствующих базах данных, а затем выводит что-то вроде template.php&c=content в свою собственную <div id="page_to_edit"></div>... снова, с другим navto().

Затем пользователь может щелкнуть элемент $('.edit_text'), чтобы отобразить div с текстовой областью TinyMCE (называемой $('#editor')) внутри.

Контент захвачен var content = $('.edit_text').html()

Вот проблема: когда я пытаюсь загрузить переменную содержимого в текстовую область TinyMCE -- $('#editor').html(content); -- текстовая область не получает ее. Я могу сразу же добавить alert($('#mana_editor').html());, который выводит правильное содержимое, но с безопасными символами HTML (например, <p> становится &lt;p&rt;). Однако содержимое не загружается в TinyMCE.

Я предполагаю, что у меня проблема с областью .ajax? Что, возможно, jQuery пытается $('#editor').html(content); обратиться к несуществующему #editor в template.php (напомним, что #editor находится в edit_page.php)? Любые хорошие ресурсы для выяснения нескольких слоев .ajax?

Лакомые кусочки, подсказки и вещи, которые я пробовал:

  • Все мои функции jQuery находятся в файле functions.js, за исключением инициализации TinyMCE, которая находится в конце edit_page.php.
  • Только index.php ссылается на functions.js
  • Я использую TinyMCE 3.5.6, пакет плагинов jQuery и jQuery 1.7.2.
  • Я также пробовал псевдоселектор TinyMCE ($('textarea:tinymce') вместо $('#editor')), который выдает ошибку в Firebug: «Ошибка: синтаксическая ошибка, нераспознанное выражение: tinymce» в jq.min.js (строка 4).
  • После того, как пользователь внесет свои изменения в TinyMCE, кнопка обновления загрузит новый контент в $('.edit_text'), который был нажат. Вместо того, чтобы загружать то, что я набираю, он загружает «безопасный» HTML, упомянутый выше, как будто TinyMCE был полностью обойден.
  • Если я не использую всю CMS и начну с ручного ввода `get_page.php?t=template&c=content' в FireFox, все будет работать нормально.
  • Если я не загружу TinyMCE, jQuery загрузит содержимое в текстовое поле.
  • Этот парень может что-то понять... похоже , но я не уверен, что содержит его head.js, как реализовать head.ready(); или его проблема такая же, как у меня.

Это мой первый проект с использованием Ajax, так что мне есть чему поучиться. Будем очень признательны за любые идеи/предложения по чтению/решениям!


person Monk    schedule 08.08.2012    source источник
comment
+1 очень подробный вопрос и список испробованных вещей!   -  person Thariama    schedule 09.08.2012


Ответы (1)


Here's the problem: when I try to load the content variable into the TinyMCE textarea -- $('#editor').html(content); -- the textarea does not receive it. I can immediately follow this up with alert($('#mana_editor').html());, which outputs the correct content, but with HTML characters made safe (eg,

becomes <p&rt;). However, the content does not load into TinyMCE.

Вы должны знать, что tinymce не равно вашему текстовому полю. При инициализации экземпляра редактора прежнее текстовое поле скрывается, и tinymce создает редактируемый контентом iframe — редактор tinymce. Бывшая текстовая область время от времени обновляется фактическим содержимым редактора (по особым событиям). Итак, я думаю, чего вы хотите добиться, так это написать свой контент в редактор. Для этого обращение к текстовой области с использованием jQuery не сработает (как вы сами поняли). Здесь вам нужно использовать javascript tinymce API:

tinymce.get('your_former_textarea_id_needs_to_be_here').setContent(content);
person Thariama    schedule 09.08.2012
comment
Grazie за своевременный ответ и +1. - person Monk; 09.08.2012
comment
Проблема была связана с тем, что и моя CMS, и загруженный шаблон загружали jq.min.js. Я удалил вызов jQuery из шаблона, и все работает нормально. К сожалению, шаблону потребуется jQuery для себя вне CMS, поэтому теперь я должен исследовать, как написать js/jQ-эквивалент php require_once() для моей CMS. Что касается вашего ответа, плагин TinyMCE jQuery вызывает $('textarea.tinymce ') работают без tinymce.setContent(). Но спасибо за альтернативный метод! - person Monk; 09.08.2012
comment
(Кроме того, очевидно, я не могу голосовать, пока моя репутация не достигнет 15. Извините за отсутствие +1, хотя ваш ответ был полезен :)) - person Monk; 09.08.2012
comment
ах, да, это правильно - ну скоро можно будет проголосовать - person Thariama; 09.08.2012