Question

我目前正在使用FancyBox来启动带文本的iframe。我想使用jquery的editInPlace插件来允许用户编辑iframe中的文本。这一切都在内联网的同一个域中。

以下是我调用iframe的方式：

<a class="read_more fancybox.iframe" href="iframe.html" data-id="01/01/2012" title="Mgmt Approvals Required" >Read more</a>

fancybox iFrame加载正常，文本被读入。以下是我试图调用editInPlace插件的方法：

        $(".fancybox.iframe").contents().find('#edittext').html(
        $('#edittext').editInPlace({
            callback: function(unused, enteredText) { return enteredText; },
            // url: './server.php',
            show_buttons: true
        })
    );

但没有运气。知道我应该怎么调用editInPlace代码吗？

这是iframe.html - 非常基本的：

    <!DOCTYPE html>
<html>
<head>
    <title>Mgmt Approval</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
</head>
<body>


<h1>Management Approval Required</h1>
    <div id = "edittext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque justo ac eros consectetur bibendum. In hac habitasse platea dictumst. Nulla aliquam turpis et tellus elementum luctus. Duis sit amet rhoncus velit. Duis nisl ligula, mattis interdum blandit laoreet, mattis id ante. Cras pulvinar lacus vitae nisi egestas non euismod neque bibendum. Vestibulum faucibus libero id ante molestie ultricies. Vestibulum quis nibh felis. Vestibulum libero nisl, vehicula vel ullamcorper sit amet, tristique sit amet augue. Etiam urna neque, porttitor sed sodales lacinia, posuere a nisl. Vestibulum blandit neque in sapien volutpat ac condimentum sapien auctor. Ut imperdiet venenatis ultricies. Phasellus accumsan, sem eu placerat commodo, felis purus commodo ipsum, sit amet vulputate orci est viverra est.
    </p>
    </div>
</body>
</html>

Answer 1

我猜这个：

$(".fancybox.iframe").contents().find .....

......应该是：

$(".fancybox-iframe").contents().find .....

.fancybox.iframe是您从中挑选fancybox的选择器的类，而不是fancybox iframe 类

注意：这适用于fancybox v2.x. ...如果使用v1.3.4，则选择器为#fancybox-iframe

另一方面，如果您已找到选择器#edittext，那么您将不需要.html()方法：

$(".fancybox-iframe").contents().find('#edittext').editInPlace({
   callback: function(unused, enteredText) { return enteredText; },
   // url: './server.php',
   show_buttons: true
 }); // editInPlace

更新（2012年11月13日）：在你的帖子中你说The fancybox iFrame loads fine and the text is read in所以我假设你的代码的一部分指的是错误的选择器，但我想我应该是更具体，并说你必须在afterShow fancybox回调中调用 editInPlace 插件...所以完整的代码应该看起来像

$(document).ready(function() {
 $(".read_more").fancybox({
   width: "70%", // or whatever
   height: 400,
   fitToView: false,
   autoSize : false,
   afterShow : function(){
    $(".fancybox-iframe").contents().find('#edittext').editInPlace({
       callback: function(unused, enteredText) { return enteredText; },
       // url: "./server.php",
       show_buttons: true
    }); // editInPlace
   } // afterShow
 }); // fancybox
}); // ready

应该为fancybox v2.1.3

做诀窍

<强> SEE DEMO

将jquery editInPlace插件应用于FancyBox iframe

1 个答案: