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

Question

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

<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
之后

Answer 1

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

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

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

Answer 2

在 CodeMirror（可能还有 Ace 和 Monaco）的情况下，问题来自 getBoundingClientRect 的内部使用，它在其计算中没有考虑 CSS 转换（检查 here).这是 Web 上的一个老问题，特别是对于深奥的应用程序，如文本编辑器。据我所知，没有合理的方法来修补该方法，浏览器供应商似乎也不愿意提供替代方法。

幸运的是，有一种解决方法可能足以满足您的用例。它对我有用。如果将 CodeMirror 包装在 iframe 中，getBoundingClientRect 将 return 得到正确的结果，因为它会考虑 iframe window 所受的转换。

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);
};

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

Javascript code editor in dynamically scaled container

javascript

css

codemirror

ace-editor

monaco-editor