Show HTML count

2 posts, 1 answers
  1. Software Admin
    Software Admin avatar
    1 posts
    Member since:
    Jan 2009

    Posted 24 Jan 2012 Link to this post

    So I'm trying to get the editor to show the HTML character count - much like the word and character count that is currently viewable by default on the editor. I've tried the directions from forum: and it doesn't seem to give me the desired results.

    Currently in my tools file I'm using the code below to show the character and word count, but what about HTML character count. I'm thinking this should be available to the users.

    <modules >
        <module name="RadEditorStatistics" Enabled="true" Visible="true" />

    The editor works well by default with limiting characters, I'm using properties MaxTextLength="4000" and MaxHtmlLength="5000" currently and I do get the alert when the content goes over either limits.

  2. Answer
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 25 Jan 2012 Link to this post


    This should be possible to do. You can reference the Implementing custom Word/Character counter knowledge base article for insights.

    You can get the HTML content by using  - editor.get_html(true);

    Here's some code from another forum thread to help with the task of overwriting the module. You will have to write the regular expressions.

    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadEditor runat="server" ID="RadEditor1" MaxTextLength="500">
                <telerik:EditorModule Name="MyModule" dockingZone="Bottom" Enabled="true" Visible="true" />
                <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="false" />
        <script type="text/javascript">
            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(); });
        //A method that does the actual work - it is usually attached to the "selection changed" editor event
        CountCharAction: function () {
            var content = this.get_editor().get_html(true);
            var words = 0;
            var chars = 0;
            if (content) {
                punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                content = content.replace(punctRegX, "");
                trimRegX = /(^\s+)|(\s+$)/g;
                content = content.replace(trimRegX, "");
                if (content) {
                    splitRegX = /\s+/;
                    var array = content.split(splitRegX);
                    words = array.length;
                    chars = content.length;
            var element = this.get_element();
            element.innerHTML = "<span style='line-height:22px'>" + "Words: " + words + " Characters: " + chars + " Max Text Length: " + this.get_editor().get_maxTextLength() + " </span>";
            MyModule.registerClass('MyModule', Telerik.Web.UI.Editor.Modules.ModuleBase);

Back to Top