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

Question

我正在尝试根据 https://codemirror.net/demo/merge.html 设置基本的代码镜像合并 View

我的 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