Text version compare in FCKEditor

Question

Am using Fck editor to write content. Am storing the text as versions in db. I want to highlight those changes in versions when loading the text in FCK Editor.

How to compare the text....

How to show any text that has been deleted in strike through mode.

Please help me/...

Answer 1

Try google's diff-patch algorithm http://code.google.com/p/google-diff-match-patch/

Take both previous and current version of the text and store it into two parameters. Pass the two parameters to the following function.

function diffString(o, n) {
o = o.replace(/<[^<|>]+?>|&nbsp;/gi, '');

n = n.replace(/<[^<|>]+?>|&nbsp;/gi, '');

var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/));
var str = "";

var oSpace = o.match(/\s+/g);
if (oSpace == null) {
    oSpace = ["\n"];
} else {
    oSpace.push("\n");
}
var nSpace = n.match(/\s+/g);
if (nSpace == null) {
    nSpace = ["\n"];
} else {
    nSpace.push("\n");
}

if (out.n.length == 0) {

for (var i = 0; i < out.o.length; i++) {
    str += '<span style="background-color:#F00;"><del>' + escape(out.o[i]) + oSpace[i] + "</del></span>";
}
} else {
if (out.n[0].text == null) {
    for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
        str += '<span style="background-color:#F00;"><del>' + escape(out.o[n]) + oSpace[n] + "</del></span>";
    }
}

for (var i = 0; i < out.n.length; i++) {
    if (out.n[i].text == null) {
        str += '<span style="background-color:#0C0;"><ins>' + escape(out.n[i]) + nSpace[i] + "</ins></span>";
    } else {
        var pre = "";

        for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) {
            pre += '<span style="background-color:#F00;"><del>' + escape(out.o[n]) + oSpace[n] + "</del></span>";
        }
        str += " " + out.n[i].text + nSpace[i] + pre;
    }
    }
}

return str;
}

this returns an html in which new text is marked green and deleted text as red + striked out.