0

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

这是我如何调用我的 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>
4

1 回答 1

0

我猜这个：

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

...应该 ：

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

.fancybox.iframe是您从中触发 fancybox 的选择器的类，而不是 fancyboxiframe 类

注意：这是为 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所以我假设您的代码中只有一部分引用了错误的选择器，但我想我应该更具体一点，并说您必须在fancybox中调用editInPlace插件afterShow回调......所以完整的代码应该看起来像

$(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 有用

看演示

于 2012-11-09T22:18:51.910 回答