problem deleting text in the design window when "real-time html view" is enabled

3 posts, 0 answers
  1. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 23 Aug 2012 Link to this post

    The behavior can be seen on the Telerik demo page:

    1. Enable 'Real-Time HTML View' module,
    2. highlight a word in the Design window,
    3. delete the highlighted word
    4. wait a second or two...
    ...the deleted word reappears.

    If after step 3 I quickly click elsewhere in the design window, the deleted word does not reappear.

    Can you provide a solution to this problem?

  2. Rumen
    Rumen avatar
    14437 posts

    Posted 27 Aug 2012 Link to this post


    I am aware of this problem and it a side effect of the Real Time HTML View module. To not decrease performance when editing large content, the content displayed inside this module is updated not on key press but after small delay of time. When the update is executed the module takes the focus which is causing the problem.

    You can try the following workaround:
    <telerik:RadEditor ID="RadEditor1" runat="server">
        <Content>test test RadEditor test test</Content>
            <telerik:EditorModule Name="RadEditorHtmlInspector" />
        <script type="text/javascript">
        Telerik.Web.UI.Editor.Modules.RadEditorHtmlInspector.prototype.render = function () {
            Telerik.Web.UI.Editor.Modules.RadEditorHtmlInspector.callBaseMethod(this, 'render');
            var txtArea = document.createElement("textarea");
   = "99%";
            txtArea.className = "reTextarea";
            txtArea.setAttribute("rows", "10");
            txtArea.setAttribute("cols", "80");
            this._textarea = txtArea;
            //In IE if scrollbar styles are specified, can cause IE to crash. Do not set css styles for TEXTAREA scrollbars!       
            //Not able to type in textarea under Mozilla. Fixed by calling focus explicitly!
            if (!this.isIE) txtArea.onclick = new Function("this.focus();");
            var root = this.get_element();
            this.get_editor().attachEventHandler("onkeypress", this._onSelectionChangedDelegate);
            this.get_editor().attachEventHandler("onkeydown", this._onSelectionChangedDelegate);
            this.get_editor().attachEventHandler("onkeyup", this._onSelectionChangedDelegate);

    Kind regards,
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 30 Aug 2012 Link to this post

    This workaround has solved the problem. Thanks,
Back to Top