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

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

您添加了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

Answer 2

要将奇怪的曲线svg排除在外，请将其添加到mergeview选项中：

connect: 'align'

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

我使用了你的import语句，因为我无法访问../lib/codemirror.js等。我还必须从小提琴代码手动调用window.onload（），因为点击js上的run小提琴页面在技术上不会加载浏览器窗口。

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