CodeMirror

Question

我正在尝试根据 https://codemirror.net/demo/merge.html

设置基本的代码镜像合并视图

我有我的 html 和下面的脚本

<link href="{% static 'home/scripts/codemirror/codemirror.css' %}" rel="stylesheet">
<link href="{% static 'home/scripts/codemirror/addons/dialog.css' %}" rel="stylesheet">
<div class="col-lg-12">
    <div id="editor"></div>
</div>   
<script src="{% static 'home/scripts/codemirror/codemirror.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/search.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/searchcursor.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/jump-to-line.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/dialog.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/diff_match_patch.js' %}"></script>
<script src="{% static 'home/scripts/codemirror/addons/merge.js' %}"></script>
<script type="text/javascript"> 
    var original = 'test';
    var historic = 'test test';
    var target = document.getElementById("editor");
    diff = CodeMirror.MergeView(
        target, {
            value: original,
            origLeft: null,
            orig: historic ,
            lineNumbers: true,
            mode: "text/html",
            highlightDifferences: true,
            showDifferences: true,
            lineWrapping : true,
            revertButtons : false,
        }
    );
</script>

当我加载我的页面时，我得到一条奇怪的黑色曲线，如下所示，我是否缺少任何依赖项。该页面目前看起来根本无法正常工作

编辑： jsfiddle 示例 https://jsfiddle.net/xpvt214o/208320/

Answer 1

要消除奇怪的曲线 svg，请将其添加到您的合并视图选项中：

connect: 'align'

我还试图了解为什么页面将面板堆叠在一起而不是并排放置，以及为什么突出显示不起作用。为此，我从您链接到 jsfiddle 的 CodeMirror 文档页面复制了代码：https://jsfiddle.net/xpvt214o/218015/

我使用了您的导入语句，因为我无权访问 ../lib/codemirror.js 等。我还必须从 [=22= 手动调用 window.onload() ] 代码，因为在 js fiddle 页面上单击运行从技术上讲不会加载浏览器 window。

在他们的页面上运行的代码在 js 上的表现非常不同fiddle...我想我的主要建议是确保您导入正确的 js 文件，并获取所有需要的文件样式表。

Answer 2

您添加了merge.js，但您没有添加merge.css
您的 js 工作正常，只是没有设置样式。

您唯一需要做的就是添加这一行

<link href="https://it-app-files.s3.amazonaws.com/static/home/scripts/codemirror/addons/merge.css" rel="stylesheet">

如果您希望有按钮来恢复更改，您也可以设置 revertButtons : true。

JSFiddle

CodeMirror - 合并视图弯曲的拱形出现在页面中间，差异不突出显示

CodeMirror - merge view curved arch appearing in middle of page, diff not highlighting

javascript

jquery