动态缩放容器中的 Javascript 代码编辑器答案

【问题标题】：Javascript code editor in dynamically scaled container动态缩放容器中的 Javascript 代码编辑器
【发布时间】：2018-01-19 16:43:07
【问题描述】：

我正在尝试在容器中显示功能代码编辑器，该容器的缩放和平移将在运行时进行修改，它的旋转和比例也不会发生倾斜。文档结构在运行时生成，但相关部分如下所示：

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

我尝试了 codemirror、ace、monaco，我已经能够毫无问题地应用翻译，但是在缩放所有它们后都出现了同样的问题 - 编辑器内的光标显示不正确，使得它们很难使用。我尝试了 css 转换方法和 svg foreignObject。

有谁知道是否有可以工作的编辑器，或者是否有办法修复提到的编辑器之一？

codemirror 中 x2 比例尺错误显示的光标示例 - 位置和大小错误，应位于 rel
之后

【问题讨论】：

标签： javascript css ace-editor codemirror monaco-editor

【解决方案1】：

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

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

所以目前最好的结果是 ace 并且看起来在不久的将来它将有完美的 css 转换支持。

【讨论】：

【解决方案2】：

在 CodeMirror 的情况下（也可能是 Ace 和 Monaco），问题来自 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);
};

【讨论】：