I have tried using javascript to set cursor position to text end on webhtmleditor focusin event but it alwasy gives me error at the following line [text.createTextRange(); It says undefined], but if i use this with normal textbox it works fine. Please suggest if u have any better solution

function SetCursorToTextEnd()
    {   
        var editor = iged_getById('<%=panelTo.ClientID%>');
        var text = editor._ie ? editor._elem : editor._doc().body;
       
        //alert(text.innerText);
        if (text != null && text.innerText.length > 0)
        {
            //if (text.createTextRange)
            //{
                var FieldRange = text.createTextRange();
                FieldRange.moveStart('character', text.innerText.length);
                //FieldRange.moveEnd('character', text.innerText.length);
                FieldRange.collapse();
                FieldRange.select();
            //}
        }       
    }

We are populating SPAN Html controls inside webhtmleditor.

example: webHtmlEditor1.Text = "<span id='I_1' title='Select to Delete.' contentEditable='false' unselectable='true' style='color:#00589F'>Dummy 1</span>;"; etc...

Hi pavannpt,

I suggest you to use body to createTextRange instead of editor._elem (which is DIV). Below is example for you:

function SetCursorToTextEnd()
{
 var editor = iged_getById('<%=WebHtmlEditor1.ClientID%>');
 if (editor._ie)
 {
    var range = document.body.createTextRange();
    range.moveToElementText(editor._elem);
    range.moveStart('character', range.text.length);
    range.collapse();
    range.select();
//  editor.focus();
 }        
}

Hi Pavan,

The editing features of WebHtmlEditor are completely defined by behavior of browser for element in "design-mode". Editor is not able to modify default actions of browser on events like key press.

Hello Viktor,

I am bak with another question but relevant to the post above so continuing this thread. A solution on this would be more helpful to me.

As i have mentioned in my previous post, i am using span controls inside webhtml editor. The main idea behind using span controls is; if user tries to delete an email group, entire email group name should be deleted on single stoke of backspace. Example: This is exact replica of MS Outlook. when user presses backspace entire email group is deleted.

I have implemented it using span controls. This works fine if im using in IE, but in Firefox, which ever html element i use it displays as a simple text, if i try to delete an email group by pressing backspace, character by charater gets deleted [instead of whole email group at a time].

Screenshot attached in the prevous post in this thread.

Thanks,
Pavan.

Thank you very much for your elaborative response, victor, It worked.

Hi pavannpt,

To start with, I can give some information: WebHtmlEditor does not modify behavior of caret and selection inside of editing area (TextWindow). All those features are built-into browser and WebHtmlEditor is not aware about those actions.

If editor has large content and vertical scrollbar appears, then it is possible that mouse clicks at the very bottom of editor on the right side from last content may fail to set caret to the end of content. In this situation user should click at the very right edge of content, but not outside of it.

That happens because WebHtmlEditor uses the DIV element as editing area and under XHTML that element without height collapses and it is not streatched to the height of its container. It means that if there is no text at all, then user may never get cursor by mouse click. Also if content is small, then mouse click on empty area of editor below content will not change cursor. That happens because those mouse clicks will belong to different element and browser will not know what to do with caret.

In order to get around for most cases (small content), the height of editing-area of WebHtmlEditor is set to ~95%. However, in this situation when editor has large content and it is scrolled vertically, then actual bounds of editing-area go out of view and therefore mouse clicks outside of content are not processed by browser and caret is not adjusted.

If application has always large content (or at least some content) and editor has scrollbars, then the height can be removed. So height of editing area will be defined by height of its content and mouse clicks on the right side will set caret to the end of content. Below is example to remove height:

<script type="text/javascript">
function WebHtmlEditor1_Initialize(oEditor)
{
 var elem = document.getElementById(oEditor.ID + '_tw');
 //or
 //var elem = oEditor._elem;
 if(elem)
   elem.style.height = '';
 //or
 //elem.style.height = 'auto';
}
</script>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
  <ClientSideEvents Initialize="WebHtmlEditor1_Initialize" />
</ighedit:WebHtmlEditor>