I have added a javascript function to a custom button in the WebHtmlEditor which adds a logged on users name and the date and time as a time stamp using the insertAtCaret function.
Is there a way to move the caret to the end of the text before doing the insert?
Thanks
Paul
Hi Paul,
The WebHtmlEditor does not use internally similar action and does not have a public function to do that neither.
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...
If we have huge amounts of data in the webhtmleditor, why is the cursor not shown at the text end even though we are trying to click at the text end using the mouse? – This especially happens when we are loading with huge HTML text.
Why do we need to use JavaScript for a work around to place the cursor at end? Is there any direct way to achieve this without relying on this work around?
I have built a JavaScript function which is working to some extent. But still I am facing issues with the editor. I have written the detailed steps below to reproduce the error:
1. By default [focus in event] the cursor is shown at text end – successful
2. Clicked somewhere in the middle of the text , cursor displays correctly – successful
3. Then clicking at the text end – Not able to show the cursor at text end
4. Cursor position is not getting refreshed; it is struck at the previous cursor position when clicking at the text end.
Play around by clicking in between the text and try clicking at text end, cursor doesn’t show up at text end. I have created labels while clicking, please check the results.
I have attached the file for your reference, and in CS file I am loading editor with the text I have posted in my previous reply.
Overall Goal: It should behave like a normal textbox supporting html text, ie., user should be able to click anywhere in the editor and able to enter text.
File renamed and attached for your reference.If there is a direct fix or any modifications in my work around, Please let me know.We need this functionality urgently, Your help would be greatly appreciated.
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>
Thank you very much for your elaborative response, victor, It worked.
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.
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.