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
Hello Warwick,
If you need any further assistance with the matter, please do not hesitate to ask.
Since we only target Internet Explorer, I suspect we only need the Style part of the fix and not the script part? Assuming this is correct (which seems to work) this doesn't entirely satisfy my requirement.
I need the automatic colouring and underlining to be prevented when in HTML view, but not in Design View. As far as I can see, the suggested fix 'corrects' the automatic styling in both views.
Is there a way to only apply the style to the HTML preview element and no the Design view element? As far as i could tell, these were using the same htmlEditor_tw element.
Alternatively, is there a way to know which view is currently being shown and modify the css style accordingly?
Hi Warwick,
I do not remember if I've ever seen underlined or any other formated text in HMTL view. Therefore, I assumed that you do not want to see link-style in Design view.
Can you provide steps or content of editor, which can be used to reproduce underlined text in HTML view?
There is no public method, which returns current view. Application may process client event AfterAction and check for ChangeView or it may use internal variable _html.
Example to process event:function WebHtmlEditor1_AfterAction(oEditor, actID, oEvent, p4){ if (actID == 'ChangeView') alert('HTML view:' + p4);}
Example to get view (skipping validation for null)var isHtmlView = iged_getById('WebHtmlEditor1')._html;
Note: I am not sure how easy it will be to add/remove css-class/style-sheet dynamically under IE. It handles stylesheets very different from all other browsers.
This is what was requested in the initial post. I need to have the auto-styling in Design view and not in HTML view.
This has been reproduced by the support team and is being addressed by the Development team. I'll update this post when i get a response.
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>
Hi,
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.
If you find any other issues with this matter, please let me know.
Thanks for the replies. The latest workarounds still had an issue when clicking outside the control if on the design view. I added similar code to first workaround, ie: oEditor._html && oEditor._ie and it seemed to work correctly.
This still needs to go through our QA process but hopefully everything will be fine.
Thanks.
Please let me know if you have any other concerns.
In the first scenario you could you could use innerText instead of innerHTML in Victor’s code, in order to prevent the encoding of characters:
function WebHtmlEditor1_KeyDown(oEditor, keyCode, oEvent) {
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.innerText), a);
}
}, 5);
And here is a possible workaround for the second case you described:
document.onclick = function () {
var elems = iged_getById("WebHtmlEditor1")._elem.getElementsByTagName('A'), i = elems.length;
This should prevent the auto-styling in these particular scenarios.
If you have any further questions, please do not hesitate to ask.
Thanks for the reply, but this too unfortunately has some issues with it:
1. In HTML view type www.google.com2. The auto-styling is prevented (good)3. Then add (without any spaces) a <p> tag, ie: www.google.com<p>4. Now add (again without any spaces) www.google.com, ie: www.google.com<p>www.google.com5. Add a space to the end of the line (or a line feed)This now gets converted to www.google.com<p>www.google.com
There is also an issue using the mouse:
1. Add www.google.com to the first line of the HTML view2. Add a couple if line feeds3. Remove the m from the end of com and re-add it4. Now click anywhere inside the control
The auto-style returns. This disappears with the next keypress though.
Since this is inherent to the way IE is handling DIVs I suspect all workarounds will have these issues. I think this needs to be addressed as part of the controls foundation code - if possible.