Question

因此，我将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);

Answer 1

这可以解决问题：

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'}));

触发焦点，然后按下鼠标事件

1 个答案: