[Solved] RadEditor Memory Leak

[Alex]

Telerik,
    I have implemented a version of a character counter I've found on this site.Using tools such as Drip I've found that the javascript leaks memory when using IE. I'm using the Q3 from 2009, and I have access to the latest Telerik library. Would updating it to the newest version help solve some of the problem? Have I implemented the functionality wrong? Do I need to have a cleanup function somewhere in here? I use the character counter on two editors (a short description, and a product description) on the same page. Please let me know if I've done something wrong or if I can implement this function below

          MyModule = function(element) {
                 MyModule.initializeBase(this, [element]);
             }

             MyModule.prototype =
            {
                initialize: function() {
                    MyModule.callBaseMethod(this, 'initialize');
                    var selfPointer = this;
                    this.get_editor().add_selectionChange(function() { selfPointer.CountCharAction(); });
                    this.get_editor().attachEventHandler("onkeyup", function() { selfPointer.CountCharAction(); });
                    this.get_editor().attachEventHandler("onpaste", function() { selfPointer.CountCharAction(); });
                    this.get_editor().attachEventHandler("onblur", function() { selfPointer.CountCharAction(); });
                    this.CountCharAction();
                },

                //A method that does the actual work - it is usually attached to the "selection changed" editor event
                CountCharAction: function() {
                    var controlName = this.get_editor();
                    var element = this.get_element();
                    var chars = 0;
                    var content;

                    if (controlName.get_id().indexOf("Short") > 0) {
                        content = this.get_editor().get_html(true);
                        if (content) {
                            var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                            var trimRegX = /(^\s+)|(\s+$)/g;
                            content = content.replace(punctRegX, "");
                            content = content.replace(trimRegX, "");

                            if (content) {
                                chars = content.length;
                            }
                        }
                        if (chars > 55) {
                            element.innerHTML = "<span style='line-height:22px; color:#F90A0A'> Characters: " + chars + "&nbsp; Short Description cannot be over 55 characters</span>";
                        }
                        else {
                            element.innerHTML = "<span style='line-height:22px'> Characters: " + chars + "&nbsp;</span>";
                        }
                    }
                    else {
                        content = this.get_editor().get_text();
                        if (content) {
                            var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                            var trimRegX = /(^\s+)|(\s+$)/g;
                            var removeNL = /[\n\r\t]/g;

                            content = content.replace(removeNL, "");
                            content = content.replace(" ", "");
                            content = content.split(' ').join('');
                            content = content.replace(trimRegX, "").replace(trimRegX, "");

                            chars = content.length;
                            if (chars > 22500) {
                                element.innerHTML = "<span style='line-height:22px; color:#F90A0A'> Characters: " + chars + "&nbsp; Product Description cannot be over 22,500 characters</span>";
                            }
                            else {
                                element.innerHTML = "<span style='line-height:22px'> Characters: " + chars + "&nbsp;</span>";
                            }
                        }
                    }
                }
            };

            MyModule.registerClass('MyModule', Telerik.Web.UI.Editor.Modules.ModuleBase);

both editors have this modules line

                            <Modules>
                              <telerik:EditorModule Name="MyModule" Enabled="true" Visible="true" />
                              <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="false" />
                            </Modules>

Thanks for the help.

[Rumen]

Hello Alex,

The custom module that you use is a custom functionality that is not directly supported by Telerik. We support only the built-in features of RadEditor.

My suggestion is to test the latest version of RadEditor Q1 2010 SP2 (version 2010.1.519) and if you find any memory leaks please report them.
Please also test the editor with sIEve, which is a good memory leak detector for Internet Explorer.

Best regards,
Rumen
the Telerik team

[Alex]

Does the RadEditor have a character counter that is supported and does not have a memory leak? This is one of the few that has worked for me without too much lag.

[Rumen]

Hi Alex,

If you are looking for a character limiter, please, see this live demo: Max Content Length.
In case you do not want to restrict the symbols in the content area and you are looking for a symbol counter then use the built-in Statistics module.

Sincerely yours,
Rumen
the Telerik team

[Alex]

Rumen,
      I don't know if the built in statistics module has changed in the releases since Q3 2009, but the reason why I don't implement that is because there is a variance when you compare it to a character counter in Word. I don't know which set of characters it's counting differently, but as seen in the screen shots, the Word and Telerik counter  differ. Are there changes in 2010 or is there a way to customize the statistics module?

[Rumen]

Hello Alex,

I checked the history of the RadEditorStatistics.js file and I saw that there are not any changes in the regular expressions used by the modules from Q3 2009 to Q1 SP2 2010. Here is the code:

doCount : function()
    {
        if (!this.get_visible()) return;
       
        var content = this.get_editor().get_text();
       
        var words = 0;
        var chars = 0;
        if (content)
        {
            var punctRegX = /[!\.?;,:&_\-\–\{\}\[\]\(\)~#'"]/g;
            content = content.replace(punctRegX, "");
            var trimRegX = /(^\s+)|(\s+$)/g;
            content = content.replace(trimRegX, "");
            if (content)
            {
                var splitRegX = /\s+/;
                var array = content.split(splitRegX);
               
                words = array.length;
                //chars = content.length;
                //TEKI: Strip new line breaks because they screw the char count
                var newLines = /(\r\n)+/g;
                content = content.replace(newLines, "");
                chars = content.length;
            }
        }
       
        var elem = this.get_element();
        elem.innerHTML = "<span style='line-height:22px'>" + this._wordsString + " " + words +  " &nbsp;&nbsp;" + this._charactersString + " " + chars + "&nbsp;</span>";

I noticed that your custom counter module use a customized code of the built-in statistics module. Maybe it is causing the memory leak.

What you can try is to override the default statistics module code and customize it, instead of creating a custom module. Here is an example how to add an onkeyup event and override the statistics module code:

    <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
      <script type="text/javascript">
          Telerik.Web.UI.Editor.Modules.RadEditorStatistics.prototype.render = function() {
              Telerik.Web.UI.Editor.Modules.RadEditorStatistics.callBaseMethod(this, 'render');

              this.get_editor().add_selectionChange(this._onDoCountDelegate);
              this.get_editor().attachEventHandler("onkeyup", this._onDoCountDelegate);


              this.doCount();
          }

          Telerik.Web.UI.Editor.Modules.RadEditorStatistics.prototype.doCount = function() {
              if (!this.get_visible()) return;

              var content = this.get_editor().get_text();

              var words = 0;
              var chars = 0;
              if (content) {
                  var punctRegX = /[!\.?;,:&_\-\–\{\}\[\]\(\)~#'"]/g;
                  content = content.replace(punctRegX, "");
                  var trimRegX = /(^\s+)|(\s+$)/g;
                  content = content.replace(trimRegX, "");
                  if (content) {
                      var splitRegX = /\s+/;
                      var array = content.split(splitRegX);

                      words = array.length;


                      var newLines = /(\r\n)+/g;
                      content = content.replace(newLines, "");
                      chars = content.length;
                  }
              }

              var elem = this.get_element();
              elem.innerHTML = "<span style='line-height:22px'>" + this._wordsString + " " + words + "   " + this._charactersString + " " + chars + " </span>";
          }


</script>

The JavaScript should be placed below RadEditor declaration.

Sincerely yours,
Rumen
the Telerik team

[Alex]

Modifying the statistics module seems to have taken away the memory leaks. I'm going to test this further and make sure it works, thanks Rumen!