我使用 InnovaEditor 创建编辑 block 。
我尝试找到方法来设置编辑 block 的动态高度。
即 block 高度应对应 block 内容。
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 body中设置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 个编辑 block ，除了 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 事件。
你能帮我吗？
也许有更简单的方法来设置动态高度？
最佳答案
var $iframesBody = $iframes .contents().find("body");
^^^ 它仅返回第一个 iframe 的单个主体，因为其余 iframe 尚未完全加载。
所以我只是在加载所有 iframe 后执行这个脚本。
而且它有效。
关于javascript - 编辑器 block 的动态高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49383197/