首页 文章

jQuery .ajax()打破了TinyMCE 3.5.6

提问于
浏览
2

我已经构建了一个带有多层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 textarea(称为$('#editor'))取消隐藏div .

内容由 var content = $('.edit_text').html() 捕获

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

我猜我有一个.ajax范围问题?也许jQuery试图将 $('#editor').html(content); 设置为template.php上不存在的#editor(回想一下#editor是在edit_page.php上)?用于计算多层.ajax的任何好资源?

Tid-bits,线索和我尝试过的东西:

  • 我的所有jQuery函数都在functions.js文件中,但TinyMCE init除外,它位于edit_page.php的末尾 .

  • 只有index.php链接到functions.js

  • 我正在使用TinyMCE 3.5.6,jQuery plugin package和jQuery 1.7.2 .

  • I 've attempted TinyMCE' s伪选择器( $('textarea:tinymce') 而不是 $('#editor') ),它在Firebug中抛出错误:"Error: Syntax error, unrecognized expression: tinymce"在jq.min.js(第4行) .

  • 用户在TinyMCE中进行更改后,更新按钮会将新内容加载到单击的 $('.edit_text') 中 . 它不是加载我输入的内容,而是加载上面提到的"safe" HTML - 好像完全绕过了TinyMCE .

  • 如果我没有't use the whole CMS and start by manually typing `get_page.php?t=template&c=content'进入FireFox它工作正常 .

  • 如果我不加载TinyMCE,jQuery会将内容加载到textarea中

  • This guy可能会有些东西......看起来很相似,但我不确定他的head.js包含什么,如何实现head.ready();或者如果他的问题与我的相同 .

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

1 回答

  • 2

    这是问题所在:当我尝试将内容变量加载到TinyMCE textarea中时 - $('#editor') . html(content); - textarea没有收到它 . 我可以立即跟进这个警报($('#mana_editor') . html());,它输出正确的内容,但HTML字符安全(例如,变成<p&rt;) . 但是,内容不会加载到TinyMCE中 .

    你需要知道,tinymce不等于你的textarea . 在初始化编辑器实例时,前textarea被隐藏,而tinymce创建了一个满足的iframe - tinymce编辑器 . 前textarea不时更新编辑器的实际内容(特殊事件) . 所以我认为你想要实现的是将你的内容写入编辑器 . 要做到这一点,使用jQuery解决textarea是行不通的(正如你发现的那样) . 你需要在这里使用javascript tinymce API:

    tinymce.get('your_former_textarea_id_needs_to_be_here').setContent(content);
    

相关问题