Results 1 to 3 of 3

Thread: onclick handling with the HtmlEditor

  1. #1

    Default onclick handling with the HtmlEditor

    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!

  2. #2


    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 = ''+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: ''

  3. #3


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

    Found here:

Similar Threads

  1. Onclick on checkbox
    By king-greg in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 11 Jan 2010, 2:23 AM
  2. About Tabpanel onclick
    By sjanani in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 29 May 2009, 2:10 AM
  3. Is there a way to get the value of an onclick attribute?
    By jstockton in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 16 Sep 2008, 7:22 AM
  4. Tree onClick
    By cabster in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 Aug 2008, 7:29 AM
  5. How to onclick
    By bkraut in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 13 Dec 2007, 1:03 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts