get_text() with multi-column table

[Eamon]

I'm using a custom word count in a RadEditor, similar to the answer in this thread: http://www.telerik.com/community/forums/aspnet-ajax/editor/show-html-count.aspx

I've noticed that a call to get_text() will append characters in a single row of a table without any spacing.
For example, if I add a table to the editor content with 2 columns and 1 row, then view the HTML, it might look like this:

<table><tr><td>111</td><td>222</td></tr></table>

And a call to get_text() will return "111222".

I'm looking for a way to separate characters across table cells, so the above will be treated as "111 222" (2 separate words instead of 1). 

I am looking at adding a space myself (via my custom word count) using a get_html() call before the get_text(), then doing a set_html() to return it back to the original (i.e. remove the spaces I've added so the user does not see any difference). But this seems inefficient, and I've actually hit a memory issue in an earlier version if IE already.

Is there a better way of doing this? 

I looked at the get_text() call on a vanilla editor and it looked to do the same thing - i.e. combine characters without spacing across table cells in a single table row.

Currently using version 2013.1.423.40

[Ianko]

Hi Eamon,

You could utilize the following code sample which counts the words in the editor content by taking the tables in account:

<script type="text/javascript">
    function OnClientLoad(editor) {
        editor.attachEventHandler("onkeydown", function (e) {
            //returns the editor's content as plain text
            var content = editor.get_text();
            var words = 0;
            if (content) {
                var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                var contentcontent = content.replace(punctRegX, "");
                var trimRegX = /(^\s+)|(\s+$)/g;
                contentcontent = content.replace(trimRegX, "");
                if (content) {
                    splitRegX = /\s+/;
                    var array = content.split(splitRegX);
                    if (array[array.length - 1] === "") {
                        array.pop();
                    }
                    console.log(array);
                    words = array.length;
                }
            }
            var counter = $get("counter");
            counter.innerHTML = "Words: " + words + " Characters: " + content.length;
        });
    }
</script>
<span id="counter"></span>
<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>

The example above is based on this Knowledge Base article about implementing a custom Word / Character counter.

Regards,
Ianko
Telerik

[Eamon]

Thanks for the response.

Looks like the word count is different with HTML tables when using IE8 or lower. IE9, Chrome (recent version), FF (recent version): no issue. That's the only time I get the issue I described.
Even with the RadEditorStatistics module, it shows the same issue with word count.

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

Or am I missing something?

I'm already implementing a custom word count based on another forum post, which is basically the same as the example you posted.

The attachment shows my editor content as this HTML table (and nothing else):

<table><tr><td>aa</td><td>bb</td><td>aa</td></tr></table>

When in IE9+, it'll be 3 words. In IE8/IE7, it'll be 1 word. Same result when using a custom word count via the .get_text() call, or when using the RadEditorStatistics module.

If I'm missing something, I apologise.

Here's my entire editor on a test page I'm using:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"
EditModes="Design,Html">
<Modules>
<telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true" />
</Modules>
<Content>
<table>
<tbody>
<tr>
<td>aa</td>
<td>bb</td>
<td>aa</td>
</tr>
</tbody>
</table>
</Content>
</telerik:RadEditor>

[Ianko]

Hi Eamon,

Thank you for contacting us about this problem. I have brought it to the attention of our developers, although I cannot provide a firm estimate when a fix will be available. You can follow this feedback item to check the status of the bug, comment or vote.

About the customized word counter script, you could use this workaround for your case until the issue is resolved:

<script type="text/javascript">
    function getText(editor) {
        var text = "";

        if ($telerik.isChrome) {
            text = editor.get_text();
            console.log(text);
            return text;
        }

        var html = editor.get_html();
        var div = document.createElement('div');
        div.innerHTML = html;
        var tds = div.getElementsByTagName('td');

        for (var i = 0; i < tds.length; i++) {
            tds[i].innerHTML = tds[i].innerHTML + ' ';
        }

        text = Telerik.Web.UI.Editor.Utils.getTextContent(div);
        console.log(text);
        return text;
    }

    function OnClientLoad(editor) {

        editor.attachEventHandler("onkeydown", function (e) {

            //returns the editor's content as plain text

            var content = getText(editor);
            var words = 0;

            if (content) {

                var punctRegXTest = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
                var punctRegX = new RegExp(punctRegXTest);

                var contentcontent = content.replace(punctRegX, "");

                //var trimRegX = /(^\s+)|(\s+$)/g;
                var trimRegX = new RegExp("(^\s+)|(\s+$)", "g");

                contentcontent = content.replace(trimRegX, "");



                if (content) {

                    splitRegX = /\s+/;

                    var array = content.split(splitRegX);

                    if (array[array.length - 1] === "") {
                        array.pop();
                    }

                    if (array[0] === "") {
                        array.shift();
                    }

                    words = array.length;

                }

            }

            var counter = $get("counter");

            counter.innerHTML = "Words: " + words + " Characters: "
                + content.length;

        });

    }

</script>

<span id="counter"></span>
<telerik:RadEditor ID="RadEditor1" runat="server"
        EditModes="Design,Html" OnClientLoad="OnClientLoad">
        <Modules>
        <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true"/>
        </Modules>
        <Content>
            <table>
                <tbody>
                    <tr>
                        <td>aa</td>
                        <td>bb</td>
                        <td>aa</td>
                    </tr>
                </tbody>
            </table>
        </Content>
</telerik:RadEditor>

I have updated your Telerik points as a token of gratitude for reporting the problem.

Regards,
Ianko
Telerik