2

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

<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
在此处输入图像描述

4

2 回答 2

0

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

  • codemirror：已知问题不会很快解决
  • ace - master 分支包含修复缩放问题的补丁，但鼠标事件仍在进行中。
  • 摩纳哥 - 存在的问题，但没有明显的修复

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

于 2018-01-20T22:07:26.090 回答
0

在 CodeMirror 的情况下（也可能是 Ace 和 Monaco），问题来自 的内部使用getBoundingClientRect，它在计算中没有考虑 CSS 转换（请查看此处）。这是 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);
};
于 2020-11-09T02:08:05.490 回答