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 Pavannpt,

My original sample was following:

<script type="text/javascript">
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.insertAtCaret('<span style="background:red">inserted span</span>');
   }        
}
</script>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server"></ighedit:WebHtmlEditor>
<input type="button" onclick="SetCursorToTextEnd()" value="SetCursorToTextEnd" />

I tested by copying your content with dummy1..dummy22 spans into editor at HTML view. After that I changed to Design view, clicked mouse in the middle of content in order to move caret from the end, clicked button and new text was inserted at the end (as expected).

I also tested scenarion when Text with dummy1..dummy22 was set within Page.OnLoad on server and with processing Focus event (Though similar looks odd to me. Probably there are some special validations in your application).
When I set focus to editor by clicking in the middle of content the new object was inserted at the end. So, it worked correctly too. Below are aspx codes which I tested:

<script type="text/javascript">
function WebHtmlEditor1_Focus(editor)
{
 if (editor._ie)
 {
  var range = document.body.createTextRange();
  range.moveToElementText(editor._elem);
  range.moveStart('character', range.text.length);
  range.collapse();
  range.select();
  editor.insertAtCaret('<span style="background:red">inserted span</span>');
 }       
}
</script>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server">
   <ClientSideEvents Focus="WebHtmlEditor1_Focus" />
</ighedit:WebHtmlEditor>

However, I could not get dotted-desing view rectangle for the "dummy19" similar to your attached image. I am not sure what browser will do if you will try to call javascript selection function while browser in that design-edit-mode (wide dotted resizable rectagle). If selection methods fail, then that is the limit of javascript usage.

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>