I am trying to add the codeMirror diff (merge.js ) functionality to my project.
The problem is Primefaces uses the 2.34 release of the CodeMirror and I found an example where the diff functionality of the CodeMirror is implemented.
http://code.runnable.com/UmGVoAnJtoNjAA ... erge-kdiff
In the example, the used CodeMirror.version is 3.18.1 and the used CodeMirror.version of primefaces is 2.34. So when I run the following code:
Code: Select all
<pe:codeMirror id="codeMirror"
widgetVar="#{bean.prefix}codeMirror"
mode="#{bean.contentType}"
value="#{versionController.script}"
height="100%"
lineNumbers="true"
tabSize="8"
indentUnit="8"
matchBrackets="true"
theme="eclipse"
readOnly="true"
styleClass="noupdate"/>
<script type="text/javascript" src="../../js/diff_match_patch.js"></script>
<script type="text/javascript" src="../../js/merge.js"></script>
<div id="panel1" style="display:none">
function getCompletions(token, context) {
var found = [], start = token.string;
function maybeAdd(str) {
var extraLine = "Extra line to highlight the difference";
if (str.indexOf(start) == 0) found.push(str);
}
function gatherCompletions(obj) {
if (typeof obj == "string") forEach(stringProps, maybeAdd);
else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
else if (obj instanceof Function) forEach(funcProps, maybeAdd);
var linechanged = "line has changed";
}
</div>
<!-- JS code for the second panel -->
<div id="panel2" style="display:none">
function getCompletions(token, context) {
var found = [], start = token.string;
function maybeAdd(str) {
if (str.indexOf(start) == 0) found.push(str);
}
function gatherCompletions(obj) {
if (typeof obj == "string") forEach(stringProps, maybeAdd);
else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
else if (obj instanceof Function) forEach(funcProps, maybeAdd);
for (var name in obj) maybeAdd(name);
}
</div>
<!-- the placehorder for the merge/kdiff interface -->
<div id="placeholder"></div>
<script language="JavaScript">
function codeMirrorResize() {
var h = jQuery('*[id*=#{bean.prefix}codeMirrorHolder]').innerHeight();
var cm = codeMirror.getCodeMirrorInstance();
try{
cm.setSize(null, 100);
cm.refresh();
}catch(e){
//consoleLog(e);
}
}
dv = CodeMirror.MergeView(document.getElementById("placeholder"), {
value: document.getElementById("panel1").innerHTML,
orig: document.getElementById("panel2").innerHTML,
lineNumbers: true,
mode: "javascript",
highlightDifferences: true
});
</script>
I am getting the following error
"TypeError: CodeMirror.on is not a function" since the on function is not being found in the codeMirror.js of primfaces.
does anybody have an idea how to manage this problem?
Regards
Asker