Question

我使用InnovaEditor创建编辑块。

我试图找到方法来设置编辑块的动态高度。

即块高度应与块内容相对应。

HTML：

<iframe id="idContenteditor_field_1" name="idContenteditor_field_1" style="width:100%;height:100%;border:none;">
<html>
<head></head>
<body>12345</body>
</html>
</iframe>

我做了什么：

1）在iframe正文中设置keyup事件

2）包装内容以获得真正的高度

3）将计算高度设置为iframe

使用Javascript：

var $iframe = $("iframe#idContenteditor_field_1");
var $iframeBody = $iframe.contents().find("body");

$iframeBody.keyup(function(e) {

  if ($(this).find('.content').length === 0) {
    // add wrap
    var bodyContent = $(this).html();
    $(this).html('<div class="content">' + bodyContent + '</div>');
 } 

 var $contentBlock = $(this).find('.content');
 var bodyHeight = $contentBlock.outerHeight(); 
 $('#idContenteditor_field_1').height(bodyHeight); // set real height
});

工作正常。

问题：

我在页面上有10个编辑块，除了id之外它们是相同的。

但是当我尝试将此代码应用于所有iframe时，我遇到了问题。

// return all iframes
var $iframes = $('iframe[id^="idContenteditor_field_"]');
// return only single body of first iframe. 
var $iframesBody = $iframes .contents().find("body");

所以我无法为所有iframe设置keyup事件。

你能帮帮我吗？

也许有更简单的方法来设置动态高度？

Answer 1

var $iframesBody = $iframes .contents().find("body");

^^^它只返回第一个iframe的单个主体，因为其余的iframe尚未完全加载。

所以我只需在加载所有iframe后执行此脚本。

它有效。

Answer 2

我还没有测试过这段代码，但下面的内容应该可行。您只需要遍历对象并依次为每个对象设置事件监听器。

--alwaysStrict

编辑器块

2 个答案: