HTML Editor in FF and IE

Jul 9, 2009 at 10:00 AM

Hi everybody,

 I have a problem with HTMLEditor. On my MainPage I have a few usercontrols. Every usercontrol is something like a modal window in winforms. In the last “window” I have added Htmleditor, everything works fine, but, unfortunately, only in FireFox. If I open project in IE8, IFrame from HtmlEditor has scrollview and does not react to focus and blur events. So control doesn’t have “focus”, function RootVisual_MouseMove doesn’t run SetHtmlFocus and there is no method to edit html.

 I don’t have any idea how to resolve this problem.

Developer
Jul 9, 2009 at 2:36 PM

Hi bunias,

I have tested, I reproduced this bug. I don't know why IE8 have this behavior. Now when the allowTransparency attribute is true on an iframe and background color is transparent,the iframe isn't focusable.

I patched that quickly

I have add 2 properties at HtmlEditor Control :

- AllowTransparencyIframe (default true) : if set to false, the background is white but is focusable

- BackgroundCssIframeDocument (transparent if empty): it's background css properties for iframe document. If you want an transparent background you can put an transparent gif in background

I have updated the Showcase page, you can check for example

I will investigate an better way

 

Jul 10, 2009 at 11:26 AM

Hi Romuxx,

Thanks for Your help, I used Your patch and now everything works correct. But I have another problem. I need to insert image into text so, I added method

public void DoInsertImage(string imgTag)
{
    ExecuteCommand("insertimage", imgTag);
}
where imgTag is something like "http://www.google.pl/logos/tesla09.gif". This works correct, but how I can add width and height attributes and ID. What I need the most is ID attribute. My image was a bitmap created from text by webclient method. I must know what represents every image, so I must set its ID.

Developer
Jul 10, 2009 at 12:47 PM

Hi bunias,

Nice !

For your second problem, I have not yet implemented these methods, but I'll do when I have time...

If you want add attributes on img tag, I think you should use 'inserthtml' command with <img src="..." id="yourImageID" />.

Have fun ;)

Jul 10, 2009 at 1:59 PM
Edited Jul 10, 2009 at 2:00 PM

Hi Romuxx,
Thanks for your hint. I try use inserthtml but it works wrong on IE8. I added new method

        private void InsertHtmlText(string text)
{
StringBuilder sb = new StringBuilder();

sb.Append(GetIframeDocumentScript());
sb.Append(GetIframeDocumentFocusableScript());
sb.AppendFormat("{0}.focus();", ScriptVariableIframeDocumentFocusable);
sb.AppendFormat("var oRng = {0}.selection.createRange();", ScriptVariableIframeDocumentFocusable);
sb.Append("if (oRng != null) {");
sb.AppendFormat("oRng.pasteHTML({0});", string.IsNullOrEmpty(text) ? "null" : string.Format("'{0}'", text));
sb.Append("oRng.collapse(false);");
sb.Append("oRng.select();");
sb.Append("}");

System.Windows.Browser.HtmlPage.Window.Eval(sb.ToString());

}
and works well, but when I don’t select any text, my htmltext inserts into top of the page.
I don’t know well javascript, so maybe you can help me.

Developer
Jul 10, 2009 at 3:11 PM
Edited Jul 10, 2009 at 3:11 PM

Hi bunias,

I have implemented this in an another HtmlEditor Control ASP.Net. So this is an part of code of my Javascript :

 

 2094         if ( commandName == 'inserthtml' )

 2095         {

 2096             if(this.isIE)

 2097             {

 2098                 var r = this.designModeDocument.selection.createRange();

 2099                 r.pasteHTML(commandValue);

 2100                 r.collapse(true);

 2101                 r.select();             

 2102             }

 2103             else

 2104             {

 2105                 this.ExecuteCommand(commandName, commandValue);

 2106             }

 2107 

 2108         }

this.designModeDocument is the equivalent of GetIframeDocumentScript()

this.ExecuteCommand is the equivalent of ExecuteCommand C# method

 

Jul 14, 2009 at 10:30 AM

Hi Romuxx,

Thanks a lot for your help. Now everything works correctly. I only had to change SetHtmlVisibility method to be a public method.
If I find another problem, I will write to you.

Jul 15, 2009 at 7:57 AM
Edited Jul 15, 2009 at 11:35 AM

Hi Romuxx,

Another problem J In my HTML Editor, I can add links and graphics. If somebody wants to add any link, the button executes event and this event must show usercontrol (something like modal window) where the user can enter url address and info text. Before my usercontrol is displayed I run method this.SetHtmlVisibility(false); and after then text and focus (cursor) disappear from html editor. It’s working on IE8 and FF, whereas in IE7 focus disappears but cursor is still on HTML editor. Final effect is that the user can’t enter address URL, or choose graphics from combobox.

 

I’m looking forward to your immediate reply as this is really an urgent problem for me.

Edit......
I think that I have solved this problem. Before executing the event I try to set focus on div with silverlight object:

            sb.AppendFormat("document.getElementById('{0}').focus();", this.HtmlContainerID);
            System.Windows.Browser.HtmlPage.Window.Eval(sb.ToString());

I ‘m not sure whether this solution is good but it works on IE7 and IE8.

Edit 2

I added HtmlPage.Plugin.Focus(); to set focus on silverlight control.

        public void ChangeFocusHtml()
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendFormat("document.getElementById('{0}').focus();", this.HtmlContainerID);
            System.Windows.Browser.HtmlPage.Window.Eval(sb.ToString());
            HtmlPage.Plugin.Focus();

        }