This topic is locked

CKEditor in Javascript

10/4/2017 6:23:45 PM
PHPRunner Tips and Tricks
H
headingwest author

I need to search/replace some text added into CKEditor from an Autofill in another dropdown. CKEditor doesn't work with the standard runner.getControl method. Here's how I solved it.
To access CKEditor when it's the only text area on the page:

var textarea = document.getElementsByTagName("textarea"); // get all text area elements

var ck = CKEDITOR.instances[textarea[0].id]; // get the id for CKEditor - it's the first text area


CKEditor data find/replace:

var ckdata = ck.getData();

ckdata = ckdata.replace("{firstname}", proxy['firstname']);

ck.setData(ckdata);


For my requirements I was replacing text after an Autofill from a dropdown "templateid", so I needed to work with the new text after it was inserted. For this I used a timer. Here is the complete "on load" event:

// Get the dropdown that changes the autofill text

var ctemplate = Runner.getControl(pageid,'templateid');
// find the text area

var textarea = document.getElementsByTagName("textarea"); // get all text area elements

var ck = CKEDITOR.instances[textarea[0].id]; // CK is the only one
// Timer

function func2(){

var timer = setTimeout(ftimer, 800);

}
// Text replace when time fires

function ftimer(){

var ckdata = ck.getData();

ckdata = ckdata.replace("{firstname}", proxy['firstname']);

ckdata = ckdata.replace("{lastname}", proxy['lastname']);

ck.setData(ckdata);

}
ctemplate.on('change', func2); // start the timer