[CLOSED] HtmlEditor text change event?

  1. #1

    [CLOSED] HtmlEditor text change event?

    Hi,

    This question is related to http://forums.ext.net/showthread.php...Press-listener.
    I need to catch any change of the contents of the HtmlEditor control on the client. That would include font change, text highlighting, bulleting, etc. Essentially, that boils down to any operation that results in a change to the formatting or textual contents. Please advise if it's possible.

    Thanks,

    Vadym
    Last edited by Daniil; Jun 05, 2012 at 3:02 PM. Reason: [CLOSED]
  2. #2
    Hi,

    There is no such functionality in API.

    You could attach a respective listener for ToolBar items.

    Example
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
     
        <script type="text/javascript">
            var onInitialize = function (ed) {
                ed.tb.items.each(function (item) {
                    item.on("click", function () {
                        alert(this.itemId);
                    });
                });
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:HtmlEditor ID="HtmlEditor1" runat="server">
                <Listeners>
                    <Initialize Fn="onInitialize" />
                </Listeners>
            </ext:HtmlEditor>
        </form>
    </body>
    </html>
    For ComboBox and ColorMenu you will need to attach a Select listener.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    For ComboBox and ColorMenu you will need to attach a Select listener.
    Thanks for the pointers! Could you give me a hint how to get a handle on these controls and attach the event listeners in the editor Initialize listener?

    Thanks,

    Vadym
  4. #4
    I would check itemId within a function, if it matches font chooser or color menu ids, attach a select listener.

    Please see the createToolbar function here.
    http://docs.sencha.com/ext-js/3-4/so...orm-HtmlEditor

    You will know its itemIds.
  5. #5
    Quote Originally Posted by Daniil View Post
    I would check itemId within a function, if it matches font chooser or color menu ids, attach a select listener.

    Please see the createToolbar function here.
    http://docs.sencha.com/ext-js/3-4/so...orm-HtmlEditor

    You will know its itemIds.
    Hi Daniil,

    Here's the code I'm trying to get to work. Select listener is not attached to the font or color chooser. Also, the Font chooser combo doesn't have the itemId according to the js source above. I'd think the tag attribute should be available but couldn't access it from item.tag

    Thanks,

    Vadym

    <%@ Page Language="C#" %>
       
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
      
        <script type="text/javascript">
            var onInitialize = function (ed) {
                ed.tb.items.each(function (item) {
                    if (item.itemId == "forecolor" || item.itemId == "backcolor") {
                        item.on("select", function () {
                            alert(this.itemId);
                        });
                    }
                    else {
                        item.on("click", function () {
                            alert(this.itemId);
                        });
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:HtmlEditor ID="HtmlEditor1" runat="server">
                <Listeners>
                    <Initialize Fn="onInitialize" />
                </Listeners>
            </ext:HtmlEditor>
        </form>
    </body>
    </html>
  6. #6
    OK, I got this far. What's left to be done is attach the select listener to the font selector combo (not working for me, probably wrong syntax):

    <%@ Page Language="C#" %>
       
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
      
        <script type="text/javascript">
            var onInitialize = function (ed) {
                ed.tb.items.each(function (item) {
                    if (item.itemId == "forecolor" || item.itemId == "backcolor") {
                        item.menu.on("select", function () {
                            alert(this.value);
                        });
                    }
                    else if (item.itemId) {
                        item.on("click", function () {
                            alert(this.itemId);
                        });
                    }
                    else if (item.autoEl && item.autoEl.tag) {
                        item.addListener("select", function () {
                            alert(this.tag);
                        });
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:HtmlEditor ID="HtmlEditor1" runat="server">
                <Listeners>
                    <Initialize Fn="onInitialize" />
                </Listeners>
            </ext:HtmlEditor>
        </form>
    </body>
    </html>
  7. #7
    Well, it is just a select HTML element wrapped in Ext.Toolbar.Item class.
    http://docs.sencha.com/ext-js/3-4/#!...t.Toolbar.Item

    Here is how you can listen its change event.

    Example
    <%@ Page Language="C#" %>
       
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
      
        <script type="text/javascript">
            var onInitialize = function (ed) {
                ed.tb.items.each(function (item) {
                    if (item.autoEl && item.autoEl.cls === "x-font-select") {
                        item.el.dom.onchange = function () {
                            alert(this.value);   
                        };
                    }
                });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:HtmlEditor runat="server">
            <Listeners>
                <Initialize Fn="onInitialize" />
            </Listeners>
        </ext:HtmlEditor>
    </body>
    </html>
  8. #8
    Thanks again Daniil, that worked well. I now have both Handler and Fn implemented for the HtmlEditor Initialize listener. That causes a problem because some code seems to remain unexecuted or it's done too late in the page life cycle. I've tried to put all the code in Handler or Fn but that didn't work for me. Could you suggest how to redesign this properly?

    Thanks,

    Vadym

            var catchHtmlEditorKey = function (ed, fn) {
                if (Ext.isGecko) {
                    Ext.EventManager.on(ed.getDoc(), 'keypress', fn, ed);
                } else if (Ext.isIE || Ext.isSafari || Ext.isOpera) {
                    Ext.EventManager.on(ed.getDoc(), 'keydown', fn, ed);
                }
            };
    
            var onInitialize = function (ed) {
                ed.tb.items.each(function (item) {
                    if (item.itemId == "forecolor" || item.itemId == "backcolor") {
                        item.menu.on("select", function () {
                            alert(this.value);
                        });
                    }
                    else if (item.itemId) {
                        item.on("click", function () {
                            alert(this.itemId);
                        });
                    }
                    else if (item.autoEl && item.autoEl.cls === "x-font-select") {
                        item.el.dom.onchange = function () {
                            alert(this.value);
                        };
                    }
                });
            };
    <ext:HtmlEditor ID="HtmlEditorSummary" runat="server" Width="750" Height="180" AutoScroll="false" EnableKeyEvents="true">
       <Listeners>
            <Initialize Handler="catchHtmlEditorKey(this, function (e) {
                                               // some simple UI handling here
                                          });                        
                                          var btn=this.tb.items.get('sourceedit');
                                          btn.disable();
                                          // Remove redundant scrollbars
                                          Ext.DomHelper.applyStyles(this.getEditorBody(),{'background-position' : 'top right', 'margin':'0px', padding:'0px'});"
                                                    Fn="onInitialize" />
           <SpecialKey Handler="if (e.getKey() === e.BACKSPACE) {
                                                   if(!this.readOnly) {
                                                        // some simple UI handling here
                                                   }
                                                   else {
                                                        e.preventDefault();
                                                   }
                                             }" />
            <AfterRender Handler="this.el.dom.setAttribute('onPaste','if(!this.readOnly){/*simple UI handling here*/}');
                                               this.el.dom.setAttribute('onDrop','if(!this.readOnly){/*simple UI handling here*/}');" />
        </Listeners>
    </ext:HtmlEditor>
  9. #9
    I've figured it out... my reference to the HtmEditor object was invalid. Now it's all working fine. Thanks and you can close this thread down.

    Vadym

            var catchHtmlEditorKey = function (ed, fn) {
                if (Ext.isGecko) {
                    Ext.EventManager.on(ed.getDoc(), 'keypress', fn, ed);
                } else if (Ext.isIE || Ext.isSafari || Ext.isOpera) {
                    Ext.EventManager.on(ed.getDoc(), 'keydown', fn, ed);
                }
            };
    <ext:HtmlEditor ID="HtmlEditor1" runat="server" Width="750" Height="180" AutoScroll="false" EnableKeyEvents="true">
       <Listeners>
            <Initialize Handler="catchHtmlEditorKey(this, function (e) {
                                               // some simple UI handling here
                                          });                        
                                          var btn=this.tb.items.get('sourceedit');
                                          btn.disable();
                                          // Remove redundant scrollbars
                                          Ext.DomHelper.applyStyles(this.getEditorBody(),{'background-position' : 'top right', 'margin':'0px', padding:'0px'});" 
    
                #{HtmlEditor1}.tb.items.each(function (item) {
                    if (item.itemId == 'forecolor' || item.itemId == 'backcolor') {
                        item.menu.on('select', function () {
                            alert(this.value);
                        });
                    }
                    else if (item.itemId) {
                        item.on('click', function () {
                            alert(this.itemId);
                        });
                    }
                    else if (item.autoEl && item.autoEl.cls === 'x-font-select') {
                        item.el.dom.onchange = function () {
                            alert(this.value);
                        };
                    }
                });" />
           <SpecialKey Handler="if (e.getKey() === e.BACKSPACE) {
                                                   if(!this.readOnly) {
                                                        // some simple UI handling here
                                                   }
                                                   else {
                                                        e.preventDefault();
                                                   }
                                             }" />
            <AfterRender Handler="this.el.dom.setAttribute('onPaste','if(!this.readOnly){/*simple UI handling here*/}');
                                               this.el.dom.setAttribute('onDrop','if(!this.readOnly){/*simple UI handling here*/}');" />
        </Listeners>
    </ext:HtmlEditor>
  10. #10
    Here is a related Ext.NET v3 thread.
    http://forums.ext.net/showthread.php?60078

Similar Threads

  1. Replies: 2
    Last Post: Jul 11, 2012, 5:18 PM
  2. [CLOSED] htmleditor text adding
    By alexp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 03, 2009, 1:03 PM
  3. Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM
  4. Why does scrollbar show in HtmlEditor when no text?
    By dbassett74 in forum 1.x Help
    Replies: 3
    Last Post: May 11, 2009, 4:25 PM
  5. Replies: 1
    Last Post: Dec 25, 2008, 6:32 AM

Tags for this Thread

Posting Permissions