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

Question

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

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

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

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

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

Answer 1

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

• codemirror:已知issue这不会很快得到解决
• 王牌 - master branch包含修复缩放问题的补丁，但鼠标事件仍在进行中。
• 摩纳哥 - 现有 issue但没有明显的修复

因此，目前最好的结果是 ace，看起来在不久的将来它将拥有完美的 css 转换支持。