Question

我想在这个例子中使用jsFiddle /或plunker中的文本diff，当前这不起作用，我做错了什么？

这是我需要使用的lib https://github.com/kpdecker/jsdiff

我需要以下webExample

https://github.com/kpdecker/jsdiff/blob/master/examples/web_example.html

这就是我尝试过的，没有成功。

<pre id="display"></pre>
<script src="github.com/kpdecker/jsdiff"></script>
<script>
var one = 'beep boop';
var other = 'beep boob blah';

var diff = JsDiff.diffChars(one, other);
var display = document.getElementById('display');

diff.forEach(function(part){
  // green for additions, red for deletions
  // grey for common parts
  var color = part.added ? 'green' :
    part.removed ? 'red' : 'grey';
  var span = document.createElement('span');
  span.style.color = color;
  span.appendChild(document
    .createTextNode(part.value));
  display.appendChild(span);
});
</script>

Answer 1

查看必不可少的浏览器控制台（通常是F12），出现以下错误：

NetworkError: 404 NOT FOUND - https://fiddle.jshell.net/bvwbawLL/show/github.com/kpdecker/jsdiff

ReferenceError: JsDiff is not defined
   var diff = JsDiff.diffChars(one, other);

这是由：

引起的

<script src="github.com/kpdecker/jsdiff"></script>

有两个问题：

在这种情况下，它缺少URL的协议部分：https://。离开它使它成为相对于页面的链接。
链接指向项目页面，而不是JavaScript文件。

现在，经过一些搜索后，我在页面http://kpdecker.github.io/jsdiff/上找到了diff.js的在线版本（使用F12查找脚本）。

但是，这未列为要使用的资源。我还没有找到CDN托管它。所以，对于一个小小的小提琴你可以使用该文件 - 但它可能会消失，恕不另行通知！对于生产站点，您最好download a release并自己托管脚本文件。

在jsFiddle中使用库的文本差异

1 个答案: