Question

为了帮助您了解我的问题，我创建了这支笔以显示我遇到的问题：http://codepen.io/anon/pen/YZwvQz

正如您所看到的，当我将TinyMce的高度设置为700px时，它会越过父div，我只想要推动TinyMce以适应父div。我发现TinyMce不支持高度上的百分比。无论如何我可以做到这一点，加上停止调整TinyMce所在的父div之后的任何调整大小？

这是我的HTML：

<script>
  tinymce.init({
    selector: '#codeNotesEditor'
  });
</script>
<main>
<div id="myClippetWrapper">

  <div id="clippetNav">



  </div>

  <div id="codeAndNotesWrapper">

    <div id="codeView">

    </div>

    <div id="noteView">

      <textarea id="codeNotesEditor"></textarea>

    </div>

  </div>

</div>

  </main>

我的CSS：

main
{
  padding: 20px;
}

#myClippetWrapper {
  display: flex;
  height: 700px;
}

#clippetNav {
  box-sizing: border-box;
  padding: 10px;
  width: 250px;
  background-color: #222222;
  margin-right: 10px;
}

#codeAndNotesWrapper {
  box-sizing: border-box;
  display: flex;
  width: 100%;
}

#codeAndNotesWrapper>div {
  flex-basis: 100%;
}

#codeView {
  padding: 10px;
  background-color: #222222;
  margin-right: 10px;
}

#noteView {
  padding: 10px;
  background-color: #222222;
}

#codeNotesEditor {}

JS：

tinymce.init({
  selector: 'textarea',
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table contextmenu paste code'
  ],
  toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_css: '//www.tinymce.com/css/codepen.min.css',
  height: 700
});

Answer 1

这很有可能！

由于动态生成TinyMCE，它会直接作为内联样式附加到element。这意味着您无法以更高的特异性来定位它，但幸运的是，您可以使用!important来覆盖规则。您也不会知道TinyMCE创建的DIV的名称，因此您必须采用#noteView的直接后代：

#noteView > div {
  height: 100% !important;
  overflow: hidden !important;
}

重要的是给它一个与容器高度相关的高度，但要也隐藏溢出，这样它就不会越过容器的底部。

我创造了一个展示这个here的工作小提琴。

希望这有帮助！：）

强制TinyMCE与父级相同

1 个答案: