Question
Auto Spell Check Feature
Hi,
Does PEGA support OOTB feature of auto spell check (perform spell check as user type words in rich text editor)? I've checked in UI Gallery, it doesn't seems it's available.
I thought of having a look into different events such as 'OnChange OR keyboard key events' and actions post value,and spell check etc. Could you please let me know if any suggestion?
Thanks,
Sadaan
Accepted Solution
Hi Sadaan,
Looks like this is possible with a non-auto-generated Section that includes the JavaScript referenced from the PDN article, which is then embedded in the same Section that contains the Rich Text Editor control.
However when I tried this on an ML8 instance (presumably you would get the same outcome on ML5), I found the Section that contains the Rich Text Editor control somehow defers referencing the script bundle that initialises the CKEDITOR until the very end of the HTML that renders the Section. In particular, it happens after anywhere you can reasonably "drop in" your non-auto-generated section. This results in the CKEDITOR object referenced in your code not yet existing, causing a runtime exception in JavaScript and the appearance that nothing has changed in the RTE's behaviour.
As such the JavaScript in your non-auto-generated Section that manipulates the CKEDITOR object has to be written in a way that its execution is deferred until after the script bundle is loaded. Pega 7's client-side makes use of JQuery, so the following is both a Pega-safe and browser-independent way of achieving this:
Hi Sadaan,
Looks like this is possible with a non-auto-generated Section that includes the JavaScript referenced from the PDN article, which is then embedded in the same Section that contains the Rich Text Editor control.
However when I tried this on an ML8 instance (presumably you would get the same outcome on ML5), I found the Section that contains the Rich Text Editor control somehow defers referencing the script bundle that initialises the CKEDITOR until the very end of the HTML that renders the Section. In particular, it happens after anywhere you can reasonably "drop in" your non-auto-generated section. This results in the CKEDITOR object referenced in your code not yet existing, causing a runtime exception in JavaScript and the appearance that nothing has changed in the RTE's behaviour.
As such the JavaScript in your non-auto-generated Section that manipulates the CKEDITOR object has to be written in a way that its execution is deferred until after the script bundle is loaded. Pega 7's client-side makes use of JQuery, so the following is both a Pega-safe and browser-independent way of achieving this:
<script type="text/javascript">
$(document).ready(function() {
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor;
editor.document.$.body.setAttribute('spellcheck',true);
});
});
</script>
$(document).ready(...) is a feature of the JQuery API which enables a block of JavaScript to be packaged as a function that is only invoked once the HTML document has finished loading (instead of being invoked as it is read by the browser). This way, the CKEDITOR object is more assured to exist in the browser's object model when the CKEDITOR.on(...) code runs.
Are you using Pega 7.1.9?
I have the same issue, when I used the rich text editor or the OOTB spell check,
I am getting the following error in logs and spell check doesn't seem to work as expected.
(ted.pega_uiengine_spellchecker) ERROR - InitNewSession returned false
I'm using 7.1.5
Have a look at below, it solves my issue. Should be fine for you too
https://community.pega.com/support/support-articles/auto-spellcheck-removed-new-rich-text-editor
Accepted Solution
Hi Sadaan,
Looks like this is possible with a non-auto-generated Section that includes the JavaScript referenced from the PDN article, which is then embedded in the same Section that contains the Rich Text Editor control.
However when I tried this on an ML8 instance (presumably you would get the same outcome on ML5), I found the Section that contains the Rich Text Editor control somehow defers referencing the script bundle that initialises the CKEDITOR until the very end of the HTML that renders the Section. In particular, it happens after anywhere you can reasonably "drop in" your non-auto-generated section. This results in the CKEDITOR object referenced in your code not yet existing, causing a runtime exception in JavaScript and the appearance that nothing has changed in the RTE's behaviour.
As such the JavaScript in your non-auto-generated Section that manipulates the CKEDITOR object has to be written in a way that its execution is deferred until after the script bundle is loaded. Pega 7's client-side makes use of JQuery, so the following is both a Pega-safe and browser-independent way of achieving this:
Hi Sadaan,
Looks like this is possible with a non-auto-generated Section that includes the JavaScript referenced from the PDN article, which is then embedded in the same Section that contains the Rich Text Editor control.
However when I tried this on an ML8 instance (presumably you would get the same outcome on ML5), I found the Section that contains the Rich Text Editor control somehow defers referencing the script bundle that initialises the CKEDITOR until the very end of the HTML that renders the Section. In particular, it happens after anywhere you can reasonably "drop in" your non-auto-generated section. This results in the CKEDITOR object referenced in your code not yet existing, causing a runtime exception in JavaScript and the appearance that nothing has changed in the RTE's behaviour.
As such the JavaScript in your non-auto-generated Section that manipulates the CKEDITOR object has to be written in a way that its execution is deferred until after the script bundle is loaded. Pega 7's client-side makes use of JQuery, so the following is both a Pega-safe and browser-independent way of achieving this:
<script type="text/javascript">
$(document).ready(function() {
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor;
editor.document.$.body.setAttribute('spellcheck',true);
});
});
</script>
$(document).ready(...) is a feature of the JQuery API which enables a block of JavaScript to be packaged as a function that is only invoked once the HTML document has finished loading (instead of being invoked as it is read by the browser). This way, the CKEDITOR object is more assured to exist in the browser's object model when the CKEDITOR.on(...) code runs.