网站使用jsdifflib

使用图

jsdifflib是一个文件比较工具,采用js制作,使用后如下图

网站使用jsdifflib

整合后的代码

<script>
 window.onload = function(){       
    diffUsingJS (); 
};  

function diffUsingJS () {  
    var base = difflib.stringAsLines(document.getElementById("history").value);  
    var newtxt = difflib.stringAsLines(document.getElementById("newar").value);  
    var sm = new difflib.SequenceMatcher(base, newtxt);  
    var opcodes = sm.get_opcodes();  
    var diffoutputdiv = document.getElementById("diffoutput");  
    while (diffoutputdiv.firstChild) diffoutputdiv.removeChild(diffoutputdiv.firstChild);  
    var contextSize = 3;  
    contextSize = contextSize ? contextSize : null;  
    diffoutputdiv.appendChild(diffview.buildView({ baseTextLines:base,  
                                                   newTextLines:newtxt,  
                                                   opcodes:opcodes,  
                                                   baseTextName:"历史版本",  
                                                   newTextName:"当前版本",  
                                                   contextSize:contextSize,  
                                                   viewType: 0}));  

} 
</script>
<div>  
    <textarea cols="60" rows="10" id="history" style="display: none;">{$history.body_md}</textarea> 
    <textarea cols="60" rows="10" id="newar" style="display: none;">{$newar.body_md}</textarea>  
</div>  

    <div id="diffoutput" style="clear:both;width:100%;"></div>

要点分析

{$history.body_md}{$newar.body_md}是从后台读取到的内容,history是保存过的历史版本,newar是当前网站的内容。

缺点

目前这个只能分析markdown的,对于html的内容无法分析。
经过分析,应该是换行符导致的,有时间只要将别的编辑器使用的换行符转换成markdown的,相信就可以了。

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND