javascript - jQuery .ajax() 正在破坏 TinyMCE 3.5.6

Question

我用多层 jQuery.ajax() 构建了一个简单的 CMS，如下所示:

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') 元素以取消隐藏内部带有 TinyMCE 文本区域(称为 $('#editor'))的 div。

内容由var content = $('.edit_text').html()抓取

问题是:当我尝试将内容变量加载到 TinyMCE 文本区域时 -- $('#editor').html(content); -- textarea 不接收它。我可以立即用 alert($('#mana_editor').html()); 跟进, 它输出正确的内容，但 HTML 字符是安全的(例如， <p> 变成 <p&rt; )。但是，内容不会加载到 TinyMCE 中。

我猜我遇到了 .ajax 范围问题？也许 jQuery 正在尝试 $('#editor').html(content);到 template.php 上不存在的#editor(回想一下#editor 在 edit_page.php 上)？任何用于计算多层 .ajax 的好资源？

花絮、线索和我尝试过的事情:

• 我的所有 jQuery 函数都在一个 functions.js 文件中，TinyMCE init 除外，它位于 edit_page.php 的末尾。
• 只有 index.php 链接到 functions.js
• 我正在使用 TinyMCE 3.5.6，jQuery plugin package和 jQuery 1.7.2。
• 我也尝试过 TinyMCE 的伪选择器($('textarea:tinymce') 而不是 $('#editor'))，这会在 Firebug 中引发错误:“错误:语法错误，无法识别的表达式:tinymce”在 jq.min.js(行4).
• 用户在 TinyMCE 中进行更改后，更新按钮会将新内容加载到 $('.edit_text') 中那被点击了。它没有加载我输入的内容，而是加载了上面提到的“安全”HTML——就好像 TinyMCE 被完全绕过一样。
• 如果我不使用整个 CMS，而是通过在 FireFox 中手动输入“get_page.php?t=template&c=content”开始，它工作正常。
• 如果我不加载 TinyMCE，jQuery 会将内容加载到文本区域
• This guy可能在做某事...看起来很相似，但我不确定他的 head.js 包含什么，如何实现 head.ready();，或者他的问题是否与我的相同。

这是我使用 Ajax 的第一个项目，所以我有很多东西要学。任何见解/建议阅读/解决方案将不胜感激!

Answer 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);