所以我使用Froala作为我的rails应用程序,它有一个错误,它不会在加载时自动调整iframe的大小以容纳其中的所有文本。
但是,如果您单击身体所在的iframe内部并按箭头键(如移动光标),则会自动展开。
我怎么能自动模拟这个事件,以便我可以暂时解决我的问题?这就是froala编辑器的样子:
<iframe src="about:blank" frameborder="0" class="fr-iframe" style="height: 265px;">
<html>
<head>
<style data-fr-style="true">html{margin:0px;height:auto;}body{height:auto;padding:10px;background:transparent;color:#000000;position:relative;z-index: 2;-webkit-user-select:auto;margin:0px;overflow:hidden;min-height:70px;}body:after{content:"";display:block;clear:both;}body::-moz-selection{background:#b5d6fd;color:#000;}body::selection{background:#b5d6fd;color:#000;}body{font-family: Verdana, Georgia, serif; font-size: 13px; color: rgb(68, 68, 68);}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body class="fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true">
<p>HELLO WORLD</p>
<p>HELLO WORLD</p>
<p>HELLO WORLD</p>
<p>HELLO WORLD</p>
<p>HELLO WORLD</p>
<p>HELLO WORLD</p>
<p>HELLO WORLD</p>
<p>HELLO WORLD</p>
</body>
</html>
</iframe>
在上面的例子中,iframe高度默认为20px,直到我点击iframe本身,向左移动光标,然后它自动扩展到265px。
我试图做的一些事情是:
setTimeout(function(){
$('textarea').froalaEditor('events.keydown', true);
}, 2000)
初始化Froala编辑器后。
我也尝试在p
和'body'元素上触发关键的新闻事件,但我很确定我做得不对。
var e = $.Event('keypress');
e.which = 65; // Character 'A'
$('body').trigger(e);
$('p').trigger(e);
这样就可以了:
var iframe = document.getElementsByClassName("fr-iframe")[0]
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
// get the element in question
const input = innerDoc.getElementsByTagName("body")[0];
// dispatch keyboard events
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));