Add update panel label to RadEditor status bar

[Chuck]

I have code that shows a Modified label when there have been changes to the editor and it works great, except when the editor is in full-screen mode and then the label cannot be seen.

I'd like to add the update panel (with the modified label) to the status bar - the area (div class="reModule" span) that contains the text "Words: 0   Characters: 0".

I've tried moving the update panel with the following code, but it doesn't work even though it finds the controls.  In IE, the update panel no longer is visible and in Chrome, it apparently has no effect.

var reModuleDivs = document.getElementsByClassName("reModule");
var reModuleDiv = reModuleDivs[0];
var notesEditorUpdatePanel = document.getElementById("<%= notesEditorUpdatePanel.ClientID %>");
reModuleDiv.appendChild(notesEditorUpdatePanel);

Is there any simpler method to go about adding an update panel / label to the bar that contains the status text?

[Rumen]

Hello,

Here is an example how to prepend a div element to the Statistics module:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:RadEditor>
<script>
    function OnClientLoad(editor) {
        var $ = $telerik.$;
        var label = document.createElement("span");
        $(label).html("test label");
        $(label).css({"border":"2px solid blue", "backgroundColor": "yellow", "height": "10px"});

        var module = $telerik.$(".reModule")[0];
        $(module).css("border", "1px solid red");
        $(module).prepend(label);
    }
</script>

All the best,
Rumen
the Telerik team

[Chuck]

Thank you - that works for IE, but not for Google Chrome, Firefox or Safari.   To make it cross-browser supported I used the following.

To get it to work with Google Chrome, Firefox & Safari I used a callback to load the Jquery after Jquery has loaded with this snippet I found: 

// ==UserScript==
// @name         jQuery For Chrome (A Cross Browser Example)
// @namespace    jQueryForChromeExample
// @include      *
// @author       Erik Vergobbi Vold & Tyler G. Hicks-Wright
// @description  This userscript is meant to be an example on how to use jQuery in a userscript on Google Chrome.
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback)
{
    var script = document.createElement("script");
    script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
    script.addEventListener('load', function ()
    {
        var script = document.createElement("script");
        script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
        document.body.appendChild(script);
    }, false);
    document.body.appendChild(script);
}

// the guts of this userscript
function main()
{
    // Note, jQ replaces $ to avoid conflicts.
    var $ = $telerik.$;
    var label = document.createElement("span");
    $(label).html("test label");
    $(label).css({ "border": "2px solid blue", "backgroundColor": "yellow", "height": "10px" });

    var module = $telerik.$(".reModule")[0];
    $(module).css("border", "1px solid red");
    $(module).prepend(label);
}

// load jQuery and execute the main function
addJQuery(main);

Anyone test this with Opera or other browsers?

[Chuck]

There is still a problem with this approach, for the reModule appears to be redrawn with each "render" of the editor, though the red border stays in place, the label disappears.  

As soon as I click in the editor, the label disappears.  This is true even with just the original post made by Rumen (I'd created a new web-site to test with, and I went back to test on it).

[Chuck]

This also breaks the RadDock grip ability for Google Chrome (and possibly others)

[Rumen]

Hi,

Here is a cross browser implementation without using jquery. It overrides the doCount function of the Statistics module and adds another span element in it for your custom purposes:

<telerik:RadEditor runat="server" ID="RadEditor1">
</telerik:RadEditor>
<script>
    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='border: 1px solid green;'>custom label</span>"; // adds a custom label
        elem.innerHTML += "<span style='line-height:22px'>" + this._wordsString + " " + words + " " + this._charactersString + " " + chars + " </span>";
    }
</script>

Greetings,
Rumen
the Telerik team

[Chuck]

Thank you, that was basically the answer I needed.  There were a couple caveats that needed adjusting.  Each time there was an update to the status it would reprint 'custom label', so I added a javascript variable that I would write to so that it would have the correct label.  Here's my span with an id and class added.

elem.innerHTML = "<span id='editorSavedLabel' class='edSavedStatus'>" + savedStatus + "</span>";

I tested it on IE, Chrome, Firefox and Safari - It works on each.  Thanks again.