I've seen several people ask about how to integrate JSpell with CKEditor, but no answers. So I decided to spend some time with firebug and figure it out.
The jspell site has directions for integrating with FCKEditor, but trying to follow those for CKEditor will lead you down the wrong path.
The FCKEditor directions reference DOM elements ending in "___Frame" and an element named "xEditingArea". Those elements do not exist in CKEditor, but that's ok, we're really just trying to get a reference to the iframe that holds the CKEditor content and we can use a bit of jQuery to accomplish that
Here is the code I am using along with the following assumptions:
On my form, I have a textarea named PostText.
The jspell site FCKEditor example also adds a reference to the iframe itself into the fieldsToCheck array, but this is not required with CKEditor.
Here is a non-jQuery example:
Hope this helps someone else.
The jspell site has directions for integrating with FCKEditor, but trying to follow those for CKEditor will lead you down the wrong path.
The FCKEditor directions reference DOM elements ending in "___Frame" and an element named "xEditingArea". Those elements do not exist in CKEditor, but that's ok, we're really just trying to get a reference to the iframe that holds the CKEditor content and we can use a bit of jQuery to accomplish that
Here is the code I am using along with the following assumptions:
JQuery 1.3.2
JSpell Evolution 0811c
On my form, I have a textarea named PostText.
<script type="text/javascript"> var fieldsToCheck = new Array(); $(function() { CKEDITOR.replace('PostText', { width: '775px', height: '220px' }); CKEDITOR.on("instanceReady", function(event) { var frame = $(".cke_editor").find("iframe")[0]; frame.id = "PostTextjspell"; fieldsToCheck[fieldsToCheck.length] = [document, "PostTextjspell"]; jspellInit(); }); }); function getSpellCheckArray() { return fieldsToCheck; } </script>
The jspell site FCKEditor example also adds a reference to the iframe itself into the fieldsToCheck array, but this is not required with CKEditor.
Here is a non-jQuery example:
<script type="text/javascript"> var fieldsToCheck = new Array(); $(function() { CKEDITOR.replace('PostText', { width: '775px', height: '220px' }); CKEDITOR.on("instanceReady", function(e) { var frame = document.getElementById("cke_contents_" + e.editor.name).firstChild; frame.id = e.editor.name + "jspell"; fieldsToCheck[fieldsToCheck.length] = [document, frame.id]; jspellInit(); }); }); function getSpellCheckArray() { return fieldsToCheck; } </script>
Hope this helps someone else.
Re: JSpell Integration HowTo
Re: JSpell Integration HowTo
Yes, it will pick automatically. I've removed the spell check buttons in my instance of CKEditor.
You still have to configure jspell correctly, ensure you have a working path to the proxy aspx, have the windows service running, etc.
Make sure the install demo works first, then go from there.
Re: JSpell Integration HowTo
Re: JSpell Integration HowTo
Hmm. Mine is spell checking as I type. I'll dig into the button config this weekend and see if I can figure something out.
Re: JSpell Integration HowTo
I'm not quite sure what needs to go in the mySpellChecker.js, or if I even need it at all. In the tutorial I read, it seems like you create an HTML file which is not what I want, I simply want to be able to call a js function that will execute the spell checking.
Re: JSpell Integration HowTo
jspellDialog();
Go here: http://www.jspell.com/wiki/index.php/JSpell_Evolution
Scroll down to the section named "Traditional Spell Check Mode (Popup)"
It describes the variables and methods (all apparently global) that control how to do what you're trying to do.
Re: JSpell Integration HowTo
Re: JSpell Integration HowTo
The subject field in my form is a regular text box and it checks that just fine, but it doesn't check the message field, so it has to be an issue with the ckeditor. I also tried the fieldsToCheck[fieldsToCheck.length]=[document, "messagejspell"] that you used in your solution but that didn't work either. I checked source just to be sure that field was called "message" and it is. Any ideas?
Re: JSpell Integration HowTo
Re: JSpell Integration HowTo
with traditional javascript :
$(document).ready(function() {
CKEDITOR.on("instanceReady", function(e) {
var frame = document.getElementById("cke_contents_" + e.editor.name).firstChild;
var innerDoc = frame.contentDocument || frame.contentWindow.document;
frame.id = e.editor.name + "jspell";
fieldsToCheck[fieldsToCheck.length] = [innerDoc, frame.id];
jspellInit();
});
});
var fieldsToCheck = new Array();
function getSpellCheckArray() {
console.log("In getSpellCheckArray ...................................");
return fieldsToCheck;
}
with Jquery :
$(document).ready(function() {
CKEDITOR.on("instanceReady", function(e) {
var assignedId = e.editor.name + "jspell";
$("#cke_contents_" + e.editor.name+" iframe").attr("id", assignedId);
var iframeDoc = null;
$('#'+assignedId).each(
function(){ iframeDoc=this.contentWindow.document;}
);
fieldsToCheck[fieldsToCheck.length] = [iframeDoc, assignedId];
jspellInit();
});
});
var fieldsToCheck = new Array();
function getSpellCheckArray() {
console.log("In getSpellCheckArray ...................................");
return fieldsToCheck;
}
When I execute this all I get is a message saying that JSpell is unable to find the element editor1jspell
Can somebody please help me and tell me where I am wrong.
Thanks.