iFrame 的固定宽度为 300px，没有任何定义 300px 的样式
iFrame has fixed width of 300px, without any styling defining 300px
我正在使用 iframe-resizer 包根据内容动态更改 iframe 的大小。
然而，在尝试任何动态调整大小之前，我 运行 遇到了基本 iframe 的问题：它的宽度总是 300px。无论我在 iframe 中放置什么内容，宽度始终为 300px。不会移动；如果我添加大于 300 像素的内容，溢出将被隐藏，如果我的内容小于 300 像素，溢出仍然会占用 300 像素。
编辑：明确地说，我的问题是我想动态更改 iframe 的宽度（跨域），但它始终以 300px 呈现并且不会更改。我正在使用 iframe-resizer 包成功地动态更改高度，但这对宽度没有影响。
在父站点中，我按如下方式嵌入了 iframe：
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js">
</script>
<script type="text/javascript">
var i = new URLSearchParams(window.location.search).get("openWidget"); document.write('<iframe id="inlineFrameExample" title="Inline Frame Example" style="position: fixed; zIndex: 1000; bottom: 0; right: 0" frameBorder="0" scrolling="no" src="http://localhost:3001?openWidget=' + i + '"></iframe>');
window.iFrameResize({ log: true }, '#inlineFrameExample')
</script>
对于我的框架网站，我的内容具有以下元素和样式：
<div className="App" id="App2">
{openWidget && <div className="button">OK</div>}
{showMessage && <section>This is a message</section>}
<div>
<button className="button" onClick={() => setShowMessage(!showMessage)}>
Msg
</button>
<button className="button" onClick={() => setOpenWidget(!openWidget)}>
{openWidget ? "-" : "+"}
</button>
</div>
</div>
.App {
text-align: center;
float: right;
}
.container {
display: flex;
justify-content: flex-end;
float: right;
}
section {
background-color: mediumseagreen;
color: white;
width: 500px;
}
.button {
width: 100px;
height: 100px;
background-color: mediumseagreen;
color: white;
text-align: center;
float: right;
}
请注意，其中没有关于宽度为 300px 的内容。还有其他宽度，但 iframe 似乎忽略了它们并始终将自己设置为 300px。
我还制作了两个代码沙箱，并通过 iframe 将一个网站嵌入到另一个网站中。不幸的是，iframe 出于某种原因被隐藏了，但是如果您检查并查找带有 id="inlineFrameExample" 的 iFrame（而不是代码沙箱的按钮 iframe），您会看到它有 300 像素宽：https://exzts.csb.app/
父站点的代码在这里：https://codesandbox.io/s/eloquent-flower-exzts?file=/index.html
框架网站的代码在这里：https://codesandbox.io/s/iframe-test-ss8fs
更新：我还从父站点和框架站点中删除了所有 css 样式。仍然总是停留在 300px。我还查看了 CSS specs，它说在某些情况下默认设置为 300px，但我不知道如何不满足这些条件，以便 300px 规则不适用。
我希望 iframe 根据宽度调整大小。当前设置在高度上完美运行，我知道如果满足 x 条件，iframe 的默认规范中有一些设置为 300px：w3.org/TR/CSS2/visudet.html#inline-replaced-width我需要的是 styling/setting/attribute 将禁用它，因此宽度将以与高度相同的方式起作用（即完全动态）。
不确定我是否理解问题。我认为您已经制作了一个应用程序和一个页面。在您要使用 iframe 显示您的应用程序的页面上，iframe 应默认缩放到应用程序的大小。我没听错吗？
我认为 JavaScript 可能符合您的解决方案。从 iframe 获取内容，检查 class App 的内容，这就是您要用于 iframe 的宽度。
const iframe = document.querySelector("#inlineFrameExample");
const iWindow = iframe.contentWindow;
const iDocument = iWindow.document;
const iElement = iDocument.querySelector(".App");
iframe.style.width = iElement.style.width;
此脚本的一个问题是它只能在 iframe 中的内容加载后执行。因此，请确保使用计时器、延迟、承诺或其他方式等待它。如果您不想向访问者显示调整大小，请确保 iframe 具有 visibilty: hidden 并将 iframe 的 visibilty: visible 添加到上面脚本的末尾。
好消息
如果 iframe 加载的页面与您的页面在同一域中，那么您可以通过为 iframe 定义一个 onload 属性，然后访问 contentWindow 的 iframe 并进行一些测量，然后将它们应用到您的主页上。但是，正如您所说， iframe 的内容来自另一个来源。运气不好，请继续阅读。
有点希望
嗯，我们知道您不能直接访问 iframe 的内容。但是，iframe 的内容可能会让您知道某些事件何时发生。如果 iframe 中的内容确实发送消息，那么您可以 addEventListener 为 message 类型的事件并将 origin 指定为您在 [=11] 中使用的站点=].更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
那么，iframe 中的站点会发送消息吗？也许是吧。但可能不是。如果它没有在您感兴趣的事件发生时向您发送消息，请继续阅读。
坏消息
出于安全原因，现代浏览器不允许您在其他来源直接 运行 Javascript。一个明显的例子是可以读取页面的 cookie，并且您绝对不希望某些第三方网站在您进行银行交易或类似操作时弄乱您的 cookie。
一线希望
您也许能够以某种方式确定 iframe 内容的当前状态。例如，您可以访问 API 功能或类似的东西，您可以询问您的状态。如果那些在 iframe 中泄露了关于你的情况的直接信息（例如，按钮是否已经被点击？），那么你可以 poll 这样的来源并查看何时发生大小更改事件如果是这样，您的代码可以相应地调整您的视图。这样您就可以使用另一个信息源来找出 iframe.
内部发生的事情
悲伤但真实
一般来说，您的主要问题的答案是否。解释是出于安全原因不允许。
在您的特定情况下，您可能有一些适合您的解决方法，但此类解决方法很少可用，大多数网站都在不为其他希望在 iframe 中使用它们的网站提供支持的情况下工作。如果您没有可用的解决方法，那么您可能需要联系 iframe 中显示的网站的所有者，看看 he/she 是否可以为此提供支持。否则你将不得不接受这种情况无法修复。是吗？如果您还不满意，请继续阅读。
绝望
如果您真的非常需要解决这个问题，那么您可以这样做：
- 在与主页相同的域中创建一个页面
- 从浏览器的角度来看，您的主页和
iframe 内的页面都使用相同的域，因此它们可以通过 Javascript 相互访问
- 这个新页面将请求该站点显示在
iframe 之前显示其他域的页面的位置（您不创建进一步的嵌套 iframe，您只需更改它的 src)
- 它会显示它
- 但是你加了一点Javascript，做了一些测量
- 当然，您相应地调整资源 URL，将所有相对 URL 更改为绝对 URL
这可能有用，但非常麻烦，而且每当您要使用的网站发生变化时，您总是需要调整给定页面。
iframe-resizer 默认不调整 iframe 宽度。您必须使用 sizeWidth 设置明确指定它。
window.iFrameResize({
log: false,
sizeWidth: true,
checkOrigin: false,
widthCalculationMethod: "rightMostElement",
heightCalculationMethod: "lowestElement"
}, "#myFrame");
body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js"></script>
<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/"></iframe>
<span></span>
iframe内容是动画的，所以它会根据指定的宽高计算方法影响iframe的宽高。 iframe-resizer 会更新每个动画开始和结束事件的尺寸。
此外，iframe 源来自 codesandbox，父文档是这个 Whosebug 答案页，所以我们也需要设置 checkOrigin: false。
注意： 必须设置 log: false 因为动画发生得非常快，在控制台中创建大量日志。
您可以在 iframe 中提供自己的尺寸计算表。ref:
<script>
window.iFrameResizer = {
widthCalculationMethod: function () {
return document.querySelector(".one").clientWidth;
}
};
</script>
在下面的演示中，iframe 的大小完全调整为绿色框的宽度。
window.iFrameResize({
log: false,
sizeWidth: true,
checkOrigin: false,
widthCalculationMethod: "rightMostElement",
heightCalculationMethod: "lowestElement"
}, "#myFrame");
body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js"></script>
<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/custom.html"></iframe>
<span></span>
参考 custom.html 的实现以获得更好的理解。您可以为 heightCalculationMethod.
实现类似的方法
@crevulus，iframe 的内部内容在设计上对其父 iframe 的尺寸没有影响
此外，据我所知，300x150px 是浏览器应用于 html 代码中的任何 «iframe» 元素的常见默认宽度和高度，用于解析传入 html 和构建 DOM 个阶段，当维度未明确预定义时
问题是浏览器需要任何可见元素的维度（即在页面布局中采用 space 的任何元素 - 为简单起见，我们假设任何元素，但 «display» 属性已设置为 «none») 要么使用 «width» 和 «height» 属性进行严格预先声明（通过具有相同名称的元素属性，通过内部/外部 css 规则或 css 规则直接通过 «style» 属性应用于元素 - 方式无关紧要）或通过 html / css 标准中定义的初始（默认）值可计算（同样，为了简单起见，如果«div» 元素没有设置尺寸，但是所有的邻居都设置了，它的宽度将由浏览器计算为元素的左右邻居之间所有可用的水平 space，即 «div» 将始终具有初始宽度，由标准定义，等于 100%；类似地，此 «div» 的高度将计算为其所有内部元素的高度之和）-尺寸为 s严格要求，因为 w/o 页面上每个可见元素的具体值浏览器将无法正确呈现当前视口的页面内容
因此，当浏览器解析传入的 html 代码并面对没有预定义尺寸（通过属性，css 等）的 «iframe» 元素时，分配 space页面布局中的元素，从而能够继续解析/呈现整个页面，浏览器假定 «iframe» 的尺寸作为常见的默认值，正如我上面提到的，等于正方形图形 300x150px（«卧式摩天大楼»)
要覆盖此行为，您应该以任何方便的方式预先声明初始值，这将适合您的情况
<iframe id="frame1" width="100%" height="250px" />
或
<style>
#frame1 {
width: 100%;
height: 250px;
}
</style>
<iframe id="frame1" />
等等，然后，当呈现页面时，如果需要，使用 JavaScript 根据其内容的宽度和高度（或您选择的任何其他条件）调整此 iframe 的尺寸), 喜欢
var frame1 = document.getElementById('frame1')
var width1 = parseFloat(frame1.style.getPropertyValue('width')) | 0
var height1 = parseFloat(frame1.style.getPropertyValue('height')) | 0
/*
* some stuff to define the conditions for iframe dimentions tuning and
* to calculate new width and height and to assing calculated values
* to width1 and height1 variables respectively
*/
frame1.style.setProperty('width', width1 + 'px')
frame1.style.setProperty('height', height1 + 'px')
作为附言，我想指出以上是工作概念，因为几个月前我设计并开发了关闭方案来强制内置于 Magento 1 中的 TinyMCE 编辑器的 iframe。9.x admin后台，让编辑器的宽度始终等于站点前端CMS页面的宽度，并根据正在编辑的CMS页面内容的高度动态扩展/收缩编辑器的高度
目标是通过使 Magento 管理区域中的 CMS 页面在 TinyMCE 编辑器中看起来与网站前端完全相同，从而简化和优化内容部门的工作流程
不幸的是，Magento 的整个第一代，直到最后的 1.9.4.5 版本，都提供了无法形容的过时版本的 TinyMCE 编辑器 - 第三代 TinyMCE，发布于 2014 年初，甚至早于 html5正式到来，即使与它自己目前的第 5 代相比（坦率地说，它远不如 WYSIWYG class 的替代现代轻量级应用程序），2022 年感觉就像石器时代，一种用石头开发的笨拙工艺洞穴居民的斧头，无论是稳定性还是功能性
换句话说，TinyMCE 缺少大部分有用的内置 API/插件，包括以名义上简化的方式维护编辑器尺寸的现代 API，因此实现我研究的目标的唯一方法是一直在利用 TinyMCE3 提供的 onInit 和 onChange 事件，并在编辑器上使用自定义 JavaScript 处理程序维护整个例程，将维度直接应用于 Magento 管理页面代码中父级别的 iframe，Magento 核心将其用作TinyMCE3 实例的容器
无论如何，实验已经成功，所以请随时提出任何其他实际问题或请求一些例程的技术细节
我正在使用 iframe-resizer 包根据内容动态更改 iframe 的大小。
然而，在尝试任何动态调整大小之前，我 运行 遇到了基本 iframe 的问题：它的宽度总是 300px。无论我在 iframe 中放置什么内容，宽度始终为 300px。不会移动；如果我添加大于 300 像素的内容，溢出将被隐藏，如果我的内容小于 300 像素，溢出仍然会占用 300 像素。
编辑：明确地说，我的问题是我想动态更改 iframe 的宽度（跨域），但它始终以 300px 呈现并且不会更改。我正在使用 iframe-resizer 包成功地动态更改高度，但这对宽度没有影响。
在父站点中，我按如下方式嵌入了 iframe：
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js">
</script>
<script type="text/javascript">
var i = new URLSearchParams(window.location.search).get("openWidget"); document.write('<iframe id="inlineFrameExample" title="Inline Frame Example" style="position: fixed; zIndex: 1000; bottom: 0; right: 0" frameBorder="0" scrolling="no" src="http://localhost:3001?openWidget=' + i + '"></iframe>');
window.iFrameResize({ log: true }, '#inlineFrameExample')
</script>
对于我的框架网站，我的内容具有以下元素和样式：
<div className="App" id="App2">
{openWidget && <div className="button">OK</div>}
{showMessage && <section>This is a message</section>}
<div>
<button className="button" onClick={() => setShowMessage(!showMessage)}>
Msg
</button>
<button className="button" onClick={() => setOpenWidget(!openWidget)}>
{openWidget ? "-" : "+"}
</button>
</div>
</div>
.App {
text-align: center;
float: right;
}
.container {
display: flex;
justify-content: flex-end;
float: right;
}
section {
background-color: mediumseagreen;
color: white;
width: 500px;
}
.button {
width: 100px;
height: 100px;
background-color: mediumseagreen;
color: white;
text-align: center;
float: right;
}
请注意，其中没有关于宽度为 300px 的内容。还有其他宽度，但 iframe 似乎忽略了它们并始终将自己设置为 300px。
我还制作了两个代码沙箱，并通过 iframe 将一个网站嵌入到另一个网站中。不幸的是，iframe 出于某种原因被隐藏了，但是如果您检查并查找带有 id="inlineFrameExample" 的 iFrame（而不是代码沙箱的按钮 iframe），您会看到它有 300 像素宽：https://exzts.csb.app/ 父站点的代码在这里：https://codesandbox.io/s/eloquent-flower-exzts?file=/index.html 框架网站的代码在这里：https://codesandbox.io/s/iframe-test-ss8fs
更新：我还从父站点和框架站点中删除了所有 css 样式。仍然总是停留在 300px。我还查看了 CSS specs，它说在某些情况下默认设置为 300px，但我不知道如何不满足这些条件，以便 300px 规则不适用。
我希望 iframe 根据宽度调整大小。当前设置在高度上完美运行，我知道如果满足 x 条件，iframe 的默认规范中有一些设置为 300px：w3.org/TR/CSS2/visudet.html#inline-replaced-width我需要的是 styling/setting/attribute 将禁用它，因此宽度将以与高度相同的方式起作用（即完全动态）。
不确定我是否理解问题。我认为您已经制作了一个应用程序和一个页面。在您要使用 iframe 显示您的应用程序的页面上，iframe 应默认缩放到应用程序的大小。我没听错吗？
我认为 JavaScript 可能符合您的解决方案。从 iframe 获取内容，检查 class App 的内容，这就是您要用于 iframe 的宽度。
const iframe = document.querySelector("#inlineFrameExample");
const iWindow = iframe.contentWindow;
const iDocument = iWindow.document;
const iElement = iDocument.querySelector(".App");
iframe.style.width = iElement.style.width;
此脚本的一个问题是它只能在 iframe 中的内容加载后执行。因此，请确保使用计时器、延迟、承诺或其他方式等待它。如果您不想向访问者显示调整大小，请确保 iframe 具有 visibilty: hidden 并将 iframe 的 visibilty: visible 添加到上面脚本的末尾。
好消息
如果 iframe 加载的页面与您的页面在同一域中，那么您可以通过为 iframe 定义一个 onload 属性，然后访问 contentWindow 的 iframe 并进行一些测量，然后将它们应用到您的主页上。但是，正如您所说， iframe 的内容来自另一个来源。运气不好，请继续阅读。
有点希望
嗯，我们知道您不能直接访问 iframe 的内容。但是，iframe 的内容可能会让您知道某些事件何时发生。如果 iframe 中的内容确实发送消息，那么您可以 addEventListener 为 message 类型的事件并将 origin 指定为您在 [=11] 中使用的站点=].更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
那么，iframe 中的站点会发送消息吗？也许是吧。但可能不是。如果它没有在您感兴趣的事件发生时向您发送消息，请继续阅读。
坏消息
出于安全原因，现代浏览器不允许您在其他来源直接 运行 Javascript。一个明显的例子是可以读取页面的 cookie，并且您绝对不希望某些第三方网站在您进行银行交易或类似操作时弄乱您的 cookie。
一线希望
您也许能够以某种方式确定 iframe 内容的当前状态。例如，您可以访问 API 功能或类似的东西，您可以询问您的状态。如果那些在 iframe 中泄露了关于你的情况的直接信息（例如，按钮是否已经被点击？），那么你可以 poll 这样的来源并查看何时发生大小更改事件如果是这样，您的代码可以相应地调整您的视图。这样您就可以使用另一个信息源来找出 iframe.
悲伤但真实
一般来说，您的主要问题的答案是否。解释是出于安全原因不允许。
在您的特定情况下，您可能有一些适合您的解决方法，但此类解决方法很少可用，大多数网站都在不为其他希望在 iframe 中使用它们的网站提供支持的情况下工作。如果您没有可用的解决方法，那么您可能需要联系 iframe 中显示的网站的所有者，看看 he/she 是否可以为此提供支持。否则你将不得不接受这种情况无法修复。是吗？如果您还不满意，请继续阅读。
绝望
如果您真的非常需要解决这个问题，那么您可以这样做：
- 在与主页相同的域中创建一个页面
- 从浏览器的角度来看，您的主页和
iframe内的页面都使用相同的域，因此它们可以通过 Javascript 相互访问
- 这个新页面将请求该站点显示在
iframe之前显示其他域的页面的位置（您不创建进一步的嵌套iframe，您只需更改它的src) - 它会显示它
- 但是你加了一点Javascript，做了一些测量
- 当然，您相应地调整资源 URL，将所有相对 URL 更改为绝对 URL
这可能有用，但非常麻烦，而且每当您要使用的网站发生变化时，您总是需要调整给定页面。
iframe-resizer 默认不调整 iframe 宽度。您必须使用 sizeWidth 设置明确指定它。
window.iFrameResize({
log: false,
sizeWidth: true,
checkOrigin: false,
widthCalculationMethod: "rightMostElement",
heightCalculationMethod: "lowestElement"
}, "#myFrame");
body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js"></script>
<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/"></iframe>
<span></span>
iframe内容是动画的，所以它会根据指定的宽高计算方法影响iframe的宽高。 iframe-resizer 会更新每个动画开始和结束事件的尺寸。
此外，iframe 源来自 codesandbox，父文档是这个 Whosebug 答案页，所以我们也需要设置 checkOrigin: false。
注意： 必须设置 log: false 因为动画发生得非常快，在控制台中创建大量日志。
您可以在 iframe 中提供自己的尺寸计算表。ref:
<script>
window.iFrameResizer = {
widthCalculationMethod: function () {
return document.querySelector(".one").clientWidth;
}
};
</script>
在下面的演示中，iframe 的大小完全调整为绿色框的宽度。
window.iFrameResize({
log: false,
sizeWidth: true,
checkOrigin: false,
widthCalculationMethod: "rightMostElement",
heightCalculationMethod: "lowestElement"
}, "#myFrame");
body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js"></script>
<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/custom.html"></iframe>
<span></span>
参考 custom.html 的实现以获得更好的理解。您可以为 heightCalculationMethod.
@crevulus，iframe 的内部内容在设计上对其父 iframe 的尺寸没有影响
此外，据我所知，300x150px 是浏览器应用于 html 代码中的任何 «iframe» 元素的常见默认宽度和高度，用于解析传入 html 和构建 DOM 个阶段，当维度未明确预定义时
问题是浏览器需要任何可见元素的维度（即在页面布局中采用 space 的任何元素 - 为简单起见，我们假设任何元素，但 «display» 属性已设置为 «none») 要么使用 «width» 和 «height» 属性进行严格预先声明（通过具有相同名称的元素属性，通过内部/外部 css 规则或 css 规则直接通过 «style» 属性应用于元素 - 方式无关紧要）或通过 html / css 标准中定义的初始（默认）值可计算（同样，为了简单起见，如果«div» 元素没有设置尺寸，但是所有的邻居都设置了，它的宽度将由浏览器计算为元素的左右邻居之间所有可用的水平 space，即 «div» 将始终具有初始宽度，由标准定义，等于 100%；类似地，此 «div» 的高度将计算为其所有内部元素的高度之和）-尺寸为 s严格要求，因为 w/o 页面上每个可见元素的具体值浏览器将无法正确呈现当前视口的页面内容
因此，当浏览器解析传入的 html 代码并面对没有预定义尺寸（通过属性，css 等）的 «iframe» 元素时，分配 space页面布局中的元素，从而能够继续解析/呈现整个页面，浏览器假定 «iframe» 的尺寸作为常见的默认值，正如我上面提到的，等于正方形图形 300x150px（«卧式摩天大楼»)
要覆盖此行为，您应该以任何方便的方式预先声明初始值，这将适合您的情况
<iframe id="frame1" width="100%" height="250px" />
或
<style>
#frame1 {
width: 100%;
height: 250px;
}
</style>
<iframe id="frame1" />
等等，然后，当呈现页面时，如果需要，使用 JavaScript 根据其内容的宽度和高度（或您选择的任何其他条件）调整此 iframe 的尺寸), 喜欢
var frame1 = document.getElementById('frame1')
var width1 = parseFloat(frame1.style.getPropertyValue('width')) | 0
var height1 = parseFloat(frame1.style.getPropertyValue('height')) | 0
/*
* some stuff to define the conditions for iframe dimentions tuning and
* to calculate new width and height and to assing calculated values
* to width1 and height1 variables respectively
*/
frame1.style.setProperty('width', width1 + 'px')
frame1.style.setProperty('height', height1 + 'px')
作为附言，我想指出以上是工作概念，因为几个月前我设计并开发了关闭方案来强制内置于 Magento 1 中的 TinyMCE 编辑器的 iframe。9.x admin后台，让编辑器的宽度始终等于站点前端CMS页面的宽度，并根据正在编辑的CMS页面内容的高度动态扩展/收缩编辑器的高度
目标是通过使 Magento 管理区域中的 CMS 页面在 TinyMCE 编辑器中看起来与网站前端完全相同，从而简化和优化内容部门的工作流程
不幸的是，Magento 的整个第一代，直到最后的 1.9.4.5 版本，都提供了无法形容的过时版本的 TinyMCE 编辑器 - 第三代 TinyMCE，发布于 2014 年初，甚至早于 html5正式到来，即使与它自己目前的第 5 代相比（坦率地说，它远不如 WYSIWYG class 的替代现代轻量级应用程序），2022 年感觉就像石器时代，一种用石头开发的笨拙工艺洞穴居民的斧头，无论是稳定性还是功能性
换句话说，TinyMCE 缺少大部分有用的内置 API/插件，包括以名义上简化的方式维护编辑器尺寸的现代 API，因此实现我研究的目标的唯一方法是一直在利用 TinyMCE3 提供的 onInit 和 onChange 事件，并在编辑器上使用自定义 JavaScript 处理程序维护整个例程，将维度直接应用于 Magento 管理页面代码中父级别的 iframe，Magento 核心将其用作TinyMCE3 实例的容器
无论如何，实验已经成功，所以请随时提出任何其他实际问题或请求一些例程的技术细节