3

我已经成功地将 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）的所有工作，但什么也没做。

任何帮助将不胜感激。

4

2 回答 2

2

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

我认为这可能是您的问题，如果确实是问题所在，那么您应该将widthandheight值从您的包装器 div 的and或您想要的任何值更改%为数值，并这样做从刚刚使用中删除，即widthheight%init

height: "300",
width: "500"

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

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

tinyMCE 配置和SO上的另一个答案。

于 2012-07-08T17:28:31.260 回答
0

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

td.mceIframeContainer, td.mceIframeContainer iframe { position: fixed; }
于 2014-06-18T13:44:42.557 回答