tinyMCE的iframe或表高度没有正确调整大小

Question

我已成功将一个tinyMCE编辑器添加到我的网络应用程序中，以便用户可以做笔记。我在div中替换了textarea，因此div可以调整页面大小，而textarea总是可以设置为宽度：100％和高度：100％

我的tinyMCE.init如下所示：

tinyMCE.init({
  mode: "specific_textareas",
  editor_selector: "notes-editor",
  theme: "advanced",
  plugins: "",
  theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,bullist,numlist,|,undo,redo,|,forecolor,backcolor",
  theme_advanced_toolbar_location: "top",
  theme_advanced_toolbar_align: "left",
  theme_advanced_statusbar_location: "none",
  theme_advanced_resizing: false,
  height: "100%",
  width: "100%"
});

不幸的是，这会返回一个如下所示的编辑器：

无论我如何改变高度，无论是CSS还是JS，我可以编辑的“剥离”永远不会改变。奇怪的是，这只适用于高度。

我已经完成了从尝试更改表格（即note_contents_tbl）到iframe（即note_contents_ifr）但没有做任何事情的所有事情。

非常感谢任何帮助。

Answer 1

通过将高度和宽度设置为100％不起作用。 TinyMCE在iframe中创建编辑器，iframe又嵌套在表中。将高度设置为100％不会继承div的大小。

我认为这可能是您的问题，如果这确实是问题，那么您应该将width和height值从%更改为数值width和你的包装div的height或你想做的任何事情，从%中删除init只是使用，即

height: "300",
width: "500"

要以编程方式更改大小，您可以使用

var ed = tinymce.activeEditor;
var width = '500';
var height = '300';
ed.theme.resizeTo(width, height);

tinyMCE Configuration以及SO上的另一个答案。

Answer 2

以下CSS使TinyMCE处理height: 100%作为剩余空间：

td.mceIframeContainer, td.mceIframeContainer iframe { position: fixed; }