loopindex / ckeditor-track-changes

Track changes plugin for CKEditor, based on ICE (track changes for TinyMCE).
www.loopindex.com
Other
51 stars 55 forks source link

Find / Replace is not tracked. #111

Open hikingdave opened 7 years ago

hikingdave commented 7 years ago

When using CKEditor's Find/Replace functionality, any replaced text is not tracked. I was able to reproduce this in the demo.

Thanks!

imdfl commented 7 years ago

Hi,

Indeed, all DOM changes which occur as a direct manipulation of the DOM - which is how Find/Replace is implemented - are not tracked. We are (slowly) working on a new engine which utilizes DOM mutation events and thus able to track such cases. No ETA...

SaiPhaneendra-Vadapalli commented 6 years ago

Hello I was able to find a workaround to get the find and replace edits tracked. here is how I did it.

Navigate to find find.js in CkEditor>Plugins>Find>dialogs>find.js

Open and find function replace. below is the function replace: function( dialog, pattern, newString, matchCase, matchWord, matchCyclic, isReplaceAll ) {

Then find the line where you get the domRamge var domRange = this.matchRange.toDomRange();

Immediately after that line add this code. //Get Ck lite Plugin instance - var ckLiteInstance = editor.plugins.lite.findPlugin(editor); //Create dynamic change id - var changeId = ckLiteInstance._tracker.getNewChangeId(); // create insert CK Editor-dom node for insert - var insNode = editor.document.createElement("ins"); insNode.setAttribute('class', 'ice-ins ice-cts-1'); insNode.setAttribute('data-cid', changeId); insNode.setAttribute('data-userid', ckLiteInstance._config.userId); insNode.setAttribute('data-username', ckLiteInstance._config.userName); insNode.setAttribute('data-changedata', (new Date()).getTime()); insNode.setAttribute('data-last-change-time', (new Date()).getTime()); insNode.setText(newString); // create insert CK Editor-dom node for delete - var delNode = editor.document.createElement("del"); delNode.setAttribute('class', 'ice-del ice-cts-1'); delNode.setAttribute('data-cid', changeId); delNode.setAttribute('data-userid', ckLiteInstance._config.userId); delNode.setAttribute('data-username', ckLiteInstance._config.userName); delNode.setAttribute('data-changedata', (new Date()).getTime()); delNode.setAttribute('data-last-change-time', (new Date()).getTime()); delNode.setText(pattern); //Setup the change indicators - ckLiteInstance._triggerChange(); ckLiteInstance._tracker.enableChangeTracking();

Then comment out the line var text = editor.document.createText( newString );

comment out the line domRange.insertNode( text ); and insert these lines domRange.insertNode(delNode); domRange.insertNode(insNode);

just after few lines find the line that says: this.matchRange._.isReplaced = true;

Right before it place these lines //Enable the accept and reject buttons and reload the //ck editor lite plugin instance to reflect the changes in replace all
ckLiteInstance.enableAcceptReject(true); ckLiteInstance._onToggleShow(); ckLiteInstance._tracker.reload();

Voila..