动态缩放容器

Question

我试图在一个容器中显示功能代码编辑器，该容器的缩放和转换将在运行时被修改，其旋转和比例也不会触及任何偏斜。文档结构在运行时生成，但相关部分如下所示：

<div id="container" style="transform: scale(2)">
    <div id="editor-element">
        <!-- stuff generated by editor implementation -->
    </div>
</div>

我尝试过codemirror，ace，monaco，我已经能够毫无问题地应用翻译但是在缩放之后所有这些都表现出相同的问题 - 编辑器中的光标显示不正确使它们真的难以使用。 我尝试过css transform方法和svg foreignObject。

有没有人知道是否有可以使用的编辑器，或者是否有办法解决其中一个提到的编辑器？

在codemirror中错误显示光标x2的示例 - 错误的位置和大小应该在rel之后

Answer 1

在填写一些问题后，我终于得到了答案。

• codemirror：知道issue不会很快修复
• ace - master branch包含解决缩放问题的补丁，但鼠标事件仍在进行中。
• monaco - 现有issue但没有明显修复

所以现在最好的结果会给出 ace ，看起来在不久的将来它会有完美的css转换支持。

Answer 2

在使用CodeMirror（可能还有Ace和摩纳哥）的情况下，问题出在内部使用getBoundingClientRect，它在计算时不考虑CSS转换（请检查here）。这是Web上的一个老问题，尤其是对于深奥的应用程序（例如文本编辑器）而言。就我所知，没有办法修补该方法，也没有浏览器供应商似乎愿意提供替代方法。

幸运的是，有一种解决方法可以满足您的用例。它为我做。如果将CodeMirror包裹在iframe中，则getBoundingClientRect将返回正确的结果，因为它将考虑iframe窗口要进行的转换。

A创建了一个CodePen，演示了完整的概念：

https://codepen.io/samuelmtimbo/pen/dyXgpaV

这是代码的重要部分：

const iframe = document.createElement("iframe");
iframe.onload = () => {
  const _window = iframe.contentWindow;
  const _document = _window.document;
  const _body = _document.body;

  const _div = _document.createElement("div");
  _body.appendChild(_div);

  const link = _document.createElement("link");
  link.href =
    "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css";
  link.rel = "stylesheet";
  _body.appendChild(link);

  const script = _document.createElement("script");
  script.src =
    "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js";
  script.onload = () => {
    const codeMirror = _window.CodeMirror(_div, {
      value: "function main() {}\n",
      mode: "javascript"
    });
  };
  _body.appendChild(script);
};