Hello,
I have a WebHtmlEditor control (11.1) on my page and when using Design view and typing a url or email address it is auto converted and rendered (underlined).
When typing into the HTML view, the same does no happen (which is as expected), however, the URLs and email addresses are initially underlined and appear clickable when they aren't.
Moving to the Design view and then back to HTML removes the styling (again as expected).
I therefore have 2 questions:
1. Is there a way to prevent the automatic styling of URLs and email addresses in the HTML view?2. Is it possible to disable automatic converting in the design view and force users to use the toolbar icon?
Thanks
Hi,
You are correct. When I tested last my codes, then I tried only space/backspace keys and only one line of content. I forgot that Enter key is not processed by keypress event and that innerText might not work well, if explicit new lines are created within HTML view.
I replaced keypress by keydown and replaced over-simplified innerText by fixing real DOM objects (which is what I intended to do before).
I also added "speed-up" condition to process only low keys. You may replacekeyCode < 33by something like(keyCode == 32 || keyCode == 13)or if autoformat will happen with other keys, then corresponding keyCodes can be added to that condition.
<script type="text/javascript"> function WebHtmlEditor1_KeyDown(oEditor, keyCode) { if (oEditor._html && oEditor._ie && keyCode < 33) setTimeout(function() { var elems = oEditor._elem.getElementsByTagName('A'), i = elems.length; while (i-- > 0) { var a = elems[i]; a.parentNode.replaceChild(document.createTextNode(a.innerHTML), a); } }, 5); }</script>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server" ImageDirectory="~/images/htmleditor/"> <ClientSideEvents KeyDown="WebHtmlEditor1_KeyDown" /></ighedit:WebHtmlEditor>
Thanks for the quick response, but unfortunately, this workaround doesn't work.
1. In Design View enter the following address: www.warwickicsystems.com2. Switch to HTML view and the correct markup will be present3. Still in HTML view enter the address on a new line4. The original markup is now removed - not good
Since our application is designed to allow them to use either view this will cause an issue.
Thank you steps. Now I undertood what you refer to. Similar "friendly" replacement of text by link-object is used in almost all Microsoft products/editors and I am in doubt that is possible to disable that feature using public properties.Building of that object happens not by typing actual text of address, but by typing Space or Enter at the end of that text. So, existing text can be converted to "link-object" by Space. That "build-object" functionality can be toggled by obscure combinations of BackSpace/Space characters at the end of address-text.
To get around, I do not recommend to use css classes, but to process keypress-with-delay or keyup events, check for A object(s) and remove it(them).The underlined text may appear for awhile and disappear. I hope that end-users may live with that. In that respect the keypress is preferrable, because end-user may press and hold Space key and the A object will stay until end-user releases key. Below is example to implement.
<script type="text/javascript"> function WebHtmlEditor1_KeyPress(oEditor) { if (oEditor._html && oEditor._ie) setTimeout(function() { var div = oEditor._elem; if (div.getElementsByTagName('A').length > 0) div.innerHTML = div.innerText; }, 5); }</script>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" runat="server" ...> <ClientSideEvents KeyPress="WebHtmlEditor1_KeyPress" /></ighedit:WebHtmlEditor>
Thanks for the response. Since this is nothing to do with pasting, I think things are getting confused so i'll re-write the issue:
1. Create a WebHtmlEditor control on a page2. Type the following address in Design view: www.warwickicsystems.com (no tags)3. The address will be underlined and blue - this is expected and desired functionality4. Swap to the HTML view and the <a> tags have been inserted automatically - again desirable functionality5. Clear the control6. Change to HTML View7. Type the following address again: www.warwickicsystems.com (no tags)8. The text will again be underlined and clue - this is not expected nor desired9. Move to Design and back to HTML view and no <a> tags have been inserted - as expected since typing into the HTML
What i would like to do is prevent the auto-styling in HTML view whilst allow it to remain in Design View. No changes are required to the way <a> tags are inserted as this is working as expected already.
I hope this confirms the situation.
Hi Warwick,
Thank you for clarification.I was confused by statement about clickable links. Currently links, which appear in editable-DIV of IE, are not "clickable": at least browser does not do any actions.I missed that your original question for #1 was about HTML view, because I did not see similar issue before and I assumed that question was about Design view.
I think, that the only scenario, when html objects (not text) may appear in HTML view, is when end user explicitly inserts objects using clipboard operations like copy/paste. In this case browser will perform requested operation and it will insert not only <a> objects, but everything what was copied: buttons, text fields, images, tables, etc. Those objects will appear in WebHtmlEditor (does not matter which HTML or Design view) not as strings, but as actual browser objects, which are created by browser from clip-board content. WebHtmlEditor does not interact with default functionality of browser related to copy/paste and is not able to modify that neither.
If that is the case with your question, then application may try to process paste event and disable or modify action of browser. It is quite easy to cancel paste. Checking and changing content of clipboard is probably possible as well, though, similar custom functionality is beyond features of WebHtmlEditor.
Example to process and cancel paste action when editor is in HTML view:
<script type="text/javascript"> function WebHtmlEditor1_Initialize(oEditor) { oEditor._addLsnr(oEditor._elem, "paste", function(evt) { if(oEditor._html) iged_cancelEvt(evt); }); }</script>
<ighedit:WebHtmlEditor ...> ... <ClientSideEvents Initialize="WebHtmlEditor1_Initialize" /></ighedit:WebHtmlEditor>