Onblur fired when clicking on toolbar

[Niclas]

I have tried to implement this example from the Telerik knowledge base:
http://www.telerik.com/support/kb/aspnet-ajax/editor/setting-hidden-radeditor-in-edit-mode-on-click-and-putting-it-in-non-editable-mode-onblur.aspx

I want to set the editor in non editable mode when losing focus. The problem is that when you klick the arrow on the Change foreground and background buttons the blur event is fired and the editor disapears. It is impossible to change foreground and background color.

I have tried an exact copy of the Telerik example.

[Rumen]

Hello Niclas,

RadEditor is a composite and complex control and its toolbar, content area and bottom part (the Design, Html and Preview mode buttons and the modules) are different HTML elements. The problem is that the following line  $telerik.addExternalHandler(element, "blur", function(e)  attach the blur handler to the editor's content area only so when the user clicks on the toolbar the event is always fired.

The prevention of the blur event execution is very hard and I was able to prevent the blur execution only in Internet Explorer. The solution is to apply the unselectable="on" attribute to all toolbar's elements which makes them unselectable:

<div id="lContent">Sample Content 123</div>
<div style="display:none" id="tContent">
    <telerik:radeditor runat="server" EditModes="Design" ID="RadEditor1" OnClientLoad="OnClientLoad">
        <Modules>
            <telerik:EditorModule Name="RadEditorStatistics" Visible="false" />
        </Modules>
    </telerik:radeditor>
</div>
<script type="text/javascript">
    var lContent, tContent;
    lContent = $get('lContent');
    tContent = $get('tContent');
    $addHandler(lContent, "click", lContent_Click);

function OnClientLoad(editor, args)
{
    var topZone = $get(editor.get_id() + "Top");
    topZone.setAttribute("unselectable","on");
    topZone.setAttribute("MozUserSelect","none");

    var buttons = topZone.getElementsByTagName("*");
    for (var i=0; i< buttons.length; i++)
    {
        var a = buttons[i];
        a.setAttribute("unselectable","on");
        a.style.MozUserSelect = "none";
        a.style.MozUserFocus = "none";
        a.style.MozUserFocus = "ignore";
    }
    var element = document.all ? editor.get_document().body : editor.get_document();
    $telerik.addExternalHandler(element, "blur", function(e)
    {
        var labelUpdated;
        var editorContent = editor.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 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>

The unselectable attribute is supported only by IE. Firefox offers the following css properties

-moz-user-focus: ignore;
-moz-user-input: disabled;
-moz-user-select: none;

but unfortunately they do not stop the execution of the blur event.

Unfortunately for the time being I cannot provide a solution for the problem in Firefox. If our developers find a workaround or solution I will share it with you right away.

In case you are able to implement a solution for Firefox and share it with our community in a code library article, we will gladly award you with 5000 Telerik points. You can find a list of Mozilla css properties here: http://devedge-temp.mozilla.org/library/xref/2002/client-data/property-data-style.html

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.