Trying to save editor content from OnBlur event

[Richard]

Hi,

I've got a screen where I want to be able to edit many different pieces of HTML content.
I'm trying to use a single hidden RadEditor for this, I'm following instructions from

http://www.telerik.com/support/kb/details/setting-hidden-radeditor-in-edit-mode-on-click-and-putting-it-in-non-editable-mode-onblur


This is all working very well, I can get it to edit content when I click, and save the changes in the RadEditor when it loses focus.

The problem I'm having is if I paste content into the editor, or click one of the tools which brings up a dialog.  These are also triggering the onblur, which tries to save the content.
Is there any way to avoid this, or is there a better way to trigger the saving of the editor content?

Thanks,

[Ianko]

Hello Richard,

The described behavior is normal and unfortunately cannot be handled by the RadEditor control. Indeed the onBlur event is raised, although this is a matter that comes from the browser. When a dialog is opened and there are textboxes, editable areas etc. on focusing such elements, the onBlur event is raised by the window object of the page.

I can suggest customizing further the this functionality using the OnClientCommandExecuting event and implement a logic that detaches the onBlur handler if a dialog is being opened.

Let me know if you need further information on this matter.

Regards,
Ianko
Telerik

[Richard]

Hi,

Thanks for getting back to me, I will look into the OnClientCommandExecuting event, that's very useful and I'll investigate that further.

I've got a possible alternative workaround to this, based on the above KB article.  I've created an extra <div> tag that covers the screen, but is placed behind the editor.  I can then give that an "onclick" handler, which is used to save the editor content.

I've included the code below, in case it's of any help to anyone else

Richard

<div id="lContent">Sample Content 123</div>
<div style="display:none" id="tContent">
    <div class="editorbackground" onclick="saveEditorChanges()"></div>
    <div class="editorcontainer">
    <telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
            <Content></Content>
    </telerik:radeditor>
    </div>
</div>

<style type="text/css">
    .editorbackground {
        position:absolute;
        left:0px;
        top:0px;
        right:0px;
        bottom:0px;
        z-index:1000;
    }

    .editorcontainer {
        position:relative;
        z-index:1001;
    }
</style>

<script type="text/javascript">
    var lContent, tContent;
    lContent = $get('lContent');
    tContent = $get('tContent');
    $addHandler(lContent, "click", lContent_Click);

    var editorObject;

    function saveEditorChanges() {

        var labelUpdated;
        var editorContent = editorObject.get_html(true);
        if (lContent.textContent == editorContent)
            labelUpdated = false;
        else
            labelUpdated = true;

        lContent.innerHTML = editorContent;
        tContent.style.display = 'none';
        lContent.style.display = '';

        if (labelUpdated) {
            alert('Updating... ' + editorContent);
        }
    }

    function OnClientLoad(editor, args) {
         editorObject = editor;
    }

    function lContent_Click() {
        lContent.style.display = 'none';
        tContent.style.display = '';

        var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
    editor.setFocus(); //set the focus on the the editor
    editor.set_html(lContent.innerHTML);
}
</script>