View Full Version : onclick handling with the HtmlEditor

15 Jul 2010, 1:42 PM
I am trying to make a spellchecker using the HtmlEditor. I know spellchecking is done by the browser, but my boss wants it kind of like Gmail where they click a button and then it highlights the incorrect words, then on a click from the mouse it will display a menu of options for words the user can pick from to correct it.

My issue is this:There is no way to detect a click on the content area of the HtmlEditor window that I see. How would I do that? Extend the Editor so that it will somehow pass an onclick event out of the iframe and to the rest of the code?

I'm pretty new to ExtJS so any help would be greatly appreciated!

16 Jul 2010, 7:36 AM
Here's the code I'm using if it's any help It does the AJAX and all that just fine, I just can't show the results to the user:

Ext.onReady(function() {

Ext.QuickTips.init(); // enable tooltips

var checkSpelling = function()
editor = panel.getComponent('editor');
//editor.on('click', function(){ alert('you clicked!');});
original = editor.getValue();
text = original.replace(/<\/?[^>]+(>|$)/g, "");
//make JSON request to the server with the text
var json = '{"text":"'+text+'"}';
var url = 'http://sandbox.faxlogic.net:8088/spellcheck/spellchecker.php?json='+json;
temp = eval('(' + data + ')');
for (var word in temp)
//look at the word, find the word in the original, add some magic
//first check for null, meaning nothing to do
if (temp[word] != null)
searcher = word+"Fix";
label = original.indexOf(searcher);//check if we have already put the tag there
if (label == -1)
//look for word in the original and put tags around it
original = original.replace(word, "<span id='"+word+"Fix'>"+word+"</span>");


//push changes to the screen

var showSpelling = function(word)
original = panel.getComponent('editor').getValue();
original = original.replace(word, "");//test of onclick
var panel = new Ext.Panel({
title: '',
renderTo: Ext.getBody(),
width: 700,
height: 400,
frame: true,
layout: 'fit',
items: {
xtype: 'htmleditor',
enableSourceEdit: true,
id: 'editor',
value: "thsi is teh examle tetx"
var toolbar = panel.getComponent('editor').getToolbar();//get toolbar object
//create our new Check Spelling button
var checkSpellingButton = new Ext.Button({
handleMouseEvents: true,
text: "Check Spelling",
icon: 'http://www.geekpedia.com/downIcon.php?icon=spellcheck_48_16.png'


16 Jul 2010, 10:49 AM
and fix it with this code:
if (Ext.isIE) {
iframe = editor.container.dom.childNodes[0].lastChild.contentWindow.document;
iframe.attachEvent('onclick', function (event){showSpelling(event.target.id);}, this);
} else {
iframe = editor.container.dom.childNodes[0].lastChild.contentDocument;
iframe.addEventListener('click', function (event){showSpelling(event.target.id);}, this);

Found here: http://www.sencha.com/forum/showthread.php?11570-HtmlEditor-key-event-help&p=116578#post116578