This is a migrated thread and some comments may be shown as answers.
Trying to save editor content from OnBlur event
2 Answers 17 Views
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 12 Feb 2014, 12:05 PM
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,

2 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 14 Feb 2014, 02:19 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Richard
Top achievements
Rank 1
answered on 14 Feb 2014, 03:08 PM
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>
Asked by
Richard
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Richard
Top achievements
Rank 1
Share this question
or