HtmlEditor : Phorum 5
This is the discussion forum for the HtmlEditor. See also the HtmlEditor home page, where you can download the control, and the Documentation Wiki, a collaborative project for documenting the control.
custom scrolling / page width
Posted by: cliffhanger (---.88.42.174.ptr.us.xo.net)
Date: Sunday, 12-Sep-2004, 01:06:41
Thanks to everyone involved in this project - this control has solved several problems for me.
I would like to have a document 8in wide and infinitely tall displayed in a view that, naturally, is smaller. I am trying to get the text to wrap at 8in. I tried adjusting the dimensions of the rectangle sent to view.SetRect in the Container_Resize event handler and placing the htmlEditor control inside a panel control. The panel's AutoScroll property can be set to True, and I can hide the editor's scroll bar by replacing DOCHOSTUIFLAG.FLAT_SCROLLBAR with DOCHOSTUIFLAG.SCROLL_NO, but now I'm stuck. Is there a way to let the document expand and can I be notified when it does? Is there a simpler way of doing this? Thanks in advance for any suggestions.
I would like to have a document 8in wide and infinitely tall displayed in a view that, naturally, is smaller. I am trying to get the text to wrap at 8in. I tried adjusting the dimensions of the rectangle sent to view.SetRect in the Container_Resize event handler and placing the htmlEditor control inside a panel control. The panel's AutoScroll property can be set to True, and I can hide the editor's scroll bar by replacing DOCHOSTUIFLAG.FLAT_SCROLLBAR with DOCHOSTUIFLAG.SCROLL_NO, but now I'm stuck. Is there a way to let the document expand and can I be notified when it does? Is there a simpler way of doing this? Thanks in advance for any suggestions.
Re: custom scrolling / page width
Posted by: Joerg Krause (---.dynamic.qsc.de)
Date: Sunday, 12-Sep-2004, 10:39:41
Limiting the width (or height) of a document cannot be done by the control itself, because you're editing not exactly on the surface but on the underlying HTML document. To limit the user from exceeding 8in I suppose using CSS and build a container for the content, either using a DIV or the BODY tag.
If the container exceeds the limits of the control the control will produce scrollbars (and not the panel container) and the user can scroll to the invisible regions.
Even though you limit the container in the way you described (if it would work) the document will behave in the way I told you and you'll probably get two scrollbars, which is obviously not the expected result.
-Joerg
(Commercial and feature reach alternativ HTML Editor Control, see www.comzept.de)
If the container exceeds the limits of the control the control will produce scrollbars (and not the panel container) and the user can scroll to the invisible regions.
Even though you limit the container in the way you described (if it would work) the document will behave in the way I told you and you'll probably get two scrollbars, which is obviously not the expected result.
-Joerg
(Commercial and feature reach alternativ HTML Editor Control, see www.comzept.de)
Re: custom scrolling / page width
Posted by: cliffhanger (---.88.42.174.ptr.us.xo.net)
Date: Sunday, 12-Sep-2004, 22:57:57
Thanks for the suggestion, Joerg, but I haven't had success with it yet.
I'm simultaneously exploring two options.
First, I tried your suggestion of applying styles to the BODY to limit the width of the page. I put the following the code in the document. The font was changed, but the document was still word-wrapped at the dimensions of the control and not at 8 inches:
<html>
<style type=\"text/css\">
BODY { font-family: arial; font-size: 10pt; width: 8in; }
</style>
<body>
...
</body>
</html>
Second, I'm still curious whether it is possible to make the htmlEditor a sort of "document" (you can disable its scrollbars) and place it in a panel control that functions as a sort of "view" on that document. I am certain that I can make this work if there is a way for the htmlEditor control to expand along with the content that is loaded or typed into it. How would that work? (I am an amateur when it comes to COM)
I'm simultaneously exploring two options.
First, I tried your suggestion of applying styles to the BODY to limit the width of the page. I put the following the code in the document. The font was changed, but the document was still word-wrapped at the dimensions of the control and not at 8 inches:
<html>
<style type=\"text/css\">
BODY { font-family: arial; font-size: 10pt; width: 8in; }
</style>
<body>
...
</body>
</html>
Second, I'm still curious whether it is possible to make the htmlEditor a sort of "document" (you can disable its scrollbars) and place it in a panel control that functions as a sort of "view" on that document. I am certain that I can make this work if there is a way for the htmlEditor control to expand along with the content that is loaded or typed into it. How would that work? (I am an amateur when it comes to COM)
Re: custom scrolling / page width
Posted by: Michael Yarbrough (---.wachovia.com)
Date: Wednesday, 20-Oct-2004, 00:03:27
I too am working on finding a way to get the text to wrap before the horizontal scrollbar is displayed. Any ideas on this? I could insert a <BR> or something in the HTML if I could figure out how to capture the "horizontalscrollbar about to show" event.
Thanks again for this awesome tool. I have been working for a few weeks on an HTML Editor with the DHTML editor for IE 5. I got most of the bugs out but it doesn't work nearly as well as this one. Once I get this wrapping thing done I will be set.
Thanks again for this awesome tool. I have been working for a few weeks on an HTML Editor with the DHTML editor for IE 5. I got most of the bugs out but it doesn't work nearly as well as this one. Once I get this wrapping thing done I will be set.
Re: custom scrolling / page width
Posted by: Michael Yarbrough (---.wachovia.com)
Date: Thursday, 21-Oct-2004, 15:26:42
I had a couple of thoughts on how this might be accomplished but not sure how to implement it. This wouldn't be exact but might be close enough.
Probably on the OnValueChange event of HTMLEditor, assuming that there is one, you could possibly create a IHTMLTxtRange of the entire line and based on the number of characters fudge the width and if it is greater than your htmleditor.size.width - 8 (replace 8 with what ever looks like your margin) insert a <BR> or some HTML code to represent a break in the line.
The problem here is knowing how to get the number of characters in the line. I don't know how to programatically get a line of information. You can select words, characters and sentences but not lines.
It also could possibly be done based on the caret position. If it's x or y coordinates is close to the location of the htmleditor screen then act on it.
Once again this involves using the IHTMLCaret but not sure how to do that.
Thoughts?
Probably on the OnValueChange event of HTMLEditor, assuming that there is one, you could possibly create a IHTMLTxtRange of the entire line and based on the number of characters fudge the width and if it is greater than your htmleditor.size.width - 8 (replace 8 with what ever looks like your margin) insert a <BR> or some HTML code to represent a break in the line.
The problem here is knowing how to get the number of characters in the line. I don't know how to programatically get a line of information. You can select words, characters and sentences but not lines.
It also could possibly be done based on the caret position. If it's x or y coordinates is close to the location of the htmleditor screen then act on it.
Once again this involves using the IHTMLCaret but not sure how to do that.
Thoughts?
Re: custom scrolling / page width
Posted by: Michael Yarbrough (---.carolina.rr.com)
Date: Thursday, 21-Oct-2004, 22:50:53
By this point I guess I am the only guy persuing this topic but thought I better keep it open just in case.
I found out how to get the caret position and determined that if it's x coordinate is 33 pts less than the width of the control (meaning that the htmleditor is width of 1024, and the caret is at x 991) we need to move to the next line otherwise the horizontal scrollbar will appear.
The ugly way to do this is to insert a <BR> before the character, or word, and insert the charater or word on the next line. This seems to work well but if the page is resized for some reason the scrollbar would show up again.
The goal is to produce some sort of solution like MS Outlook, where the text and images are more AutoWrapped than they are done with <BR>'s.
Does anyone know how TextAreas and other html components wrap text automatically? I am guessing I could use the same thing here if I knew where to start looking.
Thanks.
I found out how to get the caret position and determined that if it's x coordinate is 33 pts less than the width of the control (meaning that the htmleditor is width of 1024, and the caret is at x 991) we need to move to the next line otherwise the horizontal scrollbar will appear.
The ugly way to do this is to insert a <BR> before the character, or word, and insert the charater or word on the next line. This seems to work well but if the page is resized for some reason the scrollbar would show up again.
The goal is to produce some sort of solution like MS Outlook, where the text and images are more AutoWrapped than they are done with <BR>'s.
Does anyone know how TextAreas and other html components wrap text automatically? I am guessing I could use the same thing here if I knew where to start looking.
Thanks.
Re: custom scrolling / page width
Posted by: cliffhanger (---.88.42.173.ptr.us.xo.net)
Date: Saturday, 23-Oct-2004, 20:07:12
Solution!
I stripped my code down to the essentials, so I haven’t tested the exact code that I’m posting. It should convey the general idea though.
We’re going to let the htmlEditor worry about wrapping the text. (htmlEditor.Document.body.noWrap = false
And we’ll set its width to the measure at which we want text to wrap. For example, htmlEditor.Width = graphics.DpiX * 8; will make text wrap at 8 inches.
Now place the htmlEditor inside a panel control. Set the panel control's AutoScroll to 'true' (I also set the panel’s BorderStyle to ‘Fixed3D’). Subscribe to the panel's resize event so that we can make sure the htmlEditor.Height == panel.ClientSize.Height;.
Since we will see the panel’s scrollbars, we don’t want htmlEditor to show its scrollbars too, so in the HtmlEditor file HtmlSite.cs, find the GetHostInfo method, and change the DOCHOSTUIINFO structure flag from DOCHOSTUIINFOFLAG.FLAT_SCROLLBAR to DOCHOSTUIINFOFLAG.SCROLL_NO.
Now the htmlEditor will essentially serve as a document for us while the panel serves as a view on that document.
We need the panel to do the scrolling for us, but the .NET panel control does not supply us with a lot of information about its scrolling, so we will have to add that, and we’ll need the following latent functions:
[DllImport("user32")]
public static extern int GetScrollPos( IntPtr hwnd, uint nBar );
[DllImport("user32")]
public static extern int SetScrollPos( IntPtr hwnd, uint nBar, int nPos, bool bRedraw );
[DllImport ("user32.dll")]
private static extern int SendMessage( IntPtr hWnd, uint Msg,
uint wParam, IntPtr lParam );
Also, from now on:
IHTMLBodyElement body = htmlEditor.Document.body;
IHTMLWindow window = htmlEditor.Document.parentWindow;
IDisplayServices display = (IDisplayServices)htmlEditor.Document;
We need to override our new panel’s WndProc method so that when the user drags the scrollbars on the panel control, the htmlEditor control scrolls.
if( m.Msg == 0x0115 /*WM_VSCROLL*/)
{
int pos = GetScrollPos( this.Handle, 1 /*SB_VERT*/ );
body.scrollTop = pos;
}
if( m.Msg == 0x0114 /*WM_HSCROLL*/)
{
int pos = GetScrollPos( this.Handle, 0 /*SB_HORZ*/ );
body.scrollLeft = pos;
}
Now we also need to update the panel’s scrollbars when the user changes the position of the cursor in the htmlEditor. For vertical scrolling, we just listen to the scroll event of IHTMLWindow2:
window.scroll = this;
Whatever control ‘this’ is must have the following function:
[DispId(0)]
public void DispatchHandler()
{
if( window.@event.type == “scroll” )
{
SetScrollPos( panel.Handle, 1 /*SB_VERT*/,
body.scrollTop, true );
}
}
At this point, if the panel is less wide than the htmlEditor (which is the goal of this exercise), the user can type text that won’t be displayed (until the htmlEditor wraps it at 8in). So, IHTMLWindow’s scroll event will not give us any information about the horizontal scroll position.
So we’ll subscribe to the htmlEditor’s UpdateUI event, get the current position of the caret, and (iff its position has changed), scroll so that the caret is in view.
int caretX = 0;
private void htmlEditor_UpdateUI(object sender,
onlyconnect.HtmlUpdateUIEventArgs e)
{
IHTMLCaret caret;
tagPOINT point;
display.GetCaret( out caret );
caret.GetLocation( out point, 1 );
if( point.x != caretX )
{
caretX = point.x;
int xoffset = caretX - (panelBorder.ClientSize.Width-10);
if( xoffset < 0 )
xoffset = 0;
SetScrollPos( panel.Handle, SB_HORZ, xoffset, true );
uint wParam = (SB_THUMBPOSITION & (uint)0x0000FFFF) +
(((uint)xoffset << 16) & (uint)0xFFFF0000);
SendMessage( panel.Handle, WM_HSCROLL,
wParam, IntPtr.Zero );
}
}
The low-order word of the WPARAM for the WM_HSCROLL message is set to SB_THUMBPOSITION to tell the message recipient that the scroll position has been changed to a certain position. And the high-order word of WPARAM is the position to scroll to.
I stripped my code down to the essentials, so I haven’t tested the exact code that I’m posting. It should convey the general idea though.
We’re going to let the htmlEditor worry about wrapping the text. (htmlEditor.Document.body.noWrap = false
And we’ll set its width to the measure at which we want text to wrap. For example, htmlEditor.Width = graphics.DpiX * 8; will make text wrap at 8 inches.Now place the htmlEditor inside a panel control. Set the panel control's AutoScroll to 'true' (I also set the panel’s BorderStyle to ‘Fixed3D’). Subscribe to the panel's resize event so that we can make sure the htmlEditor.Height == panel.ClientSize.Height;.
Since we will see the panel’s scrollbars, we don’t want htmlEditor to show its scrollbars too, so in the HtmlEditor file HtmlSite.cs, find the GetHostInfo method, and change the DOCHOSTUIINFO structure flag from DOCHOSTUIINFOFLAG.FLAT_SCROLLBAR to DOCHOSTUIINFOFLAG.SCROLL_NO.
Now the htmlEditor will essentially serve as a document for us while the panel serves as a view on that document.
We need the panel to do the scrolling for us, but the .NET panel control does not supply us with a lot of information about its scrolling, so we will have to add that, and we’ll need the following latent functions:
[DllImport("user32")]
public static extern int GetScrollPos( IntPtr hwnd, uint nBar );
[DllImport("user32")]
public static extern int SetScrollPos( IntPtr hwnd, uint nBar, int nPos, bool bRedraw );
[DllImport ("user32.dll")]
private static extern int SendMessage( IntPtr hWnd, uint Msg,
uint wParam, IntPtr lParam );
Also, from now on:
IHTMLBodyElement body = htmlEditor.Document.body;
IHTMLWindow window = htmlEditor.Document.parentWindow;
IDisplayServices display = (IDisplayServices)htmlEditor.Document;
We need to override our new panel’s WndProc method so that when the user drags the scrollbars on the panel control, the htmlEditor control scrolls.
if( m.Msg == 0x0115 /*WM_VSCROLL*/)
{
int pos = GetScrollPos( this.Handle, 1 /*SB_VERT*/ );
body.scrollTop = pos;
}
if( m.Msg == 0x0114 /*WM_HSCROLL*/)
{
int pos = GetScrollPos( this.Handle, 0 /*SB_HORZ*/ );
body.scrollLeft = pos;
}
Now we also need to update the panel’s scrollbars when the user changes the position of the cursor in the htmlEditor. For vertical scrolling, we just listen to the scroll event of IHTMLWindow2:
window.scroll = this;
Whatever control ‘this’ is must have the following function:
[DispId(0)]
public void DispatchHandler()
{
if( window.@event.type == “scroll” )
{
SetScrollPos( panel.Handle, 1 /*SB_VERT*/,
body.scrollTop, true );
}
}
At this point, if the panel is less wide than the htmlEditor (which is the goal of this exercise), the user can type text that won’t be displayed (until the htmlEditor wraps it at 8in). So, IHTMLWindow’s scroll event will not give us any information about the horizontal scroll position.
So we’ll subscribe to the htmlEditor’s UpdateUI event, get the current position of the caret, and (iff its position has changed), scroll so that the caret is in view.
int caretX = 0;
private void htmlEditor_UpdateUI(object sender,
onlyconnect.HtmlUpdateUIEventArgs e)
{
IHTMLCaret caret;
tagPOINT point;
display.GetCaret( out caret );
caret.GetLocation( out point, 1 );
if( point.x != caretX )
{
caretX = point.x;
int xoffset = caretX - (panelBorder.ClientSize.Width-10);
if( xoffset < 0 )
xoffset = 0;
SetScrollPos( panel.Handle, SB_HORZ, xoffset, true );
uint wParam = (SB_THUMBPOSITION & (uint)0x0000FFFF) +
(((uint)xoffset << 16) & (uint)0xFFFF0000);
SendMessage( panel.Handle, WM_HSCROLL,
wParam, IntPtr.Zero );
}
}
The low-order word of the WPARAM for the WM_HSCROLL message is set to SB_THUMBPOSITION to tell the message recipient that the scroll position has been changed to a certain position. And the high-order word of WPARAM is the position to scroll to.
Re: custom scrolling / page width
Posted by: Michael Yarbrough (---.wachovia.com)
Date: Sunday, 24-Oct-2004, 03:43:59
Thanks CliffHanger for the info. I see that you mentioned a "htmlEditor.Document.body.noWrap = false" statement. I guess the initial code doesn't have this because I can't find it. Is there a location for checking out the code you have done thus far? Particularly what is behind the noWrap method.
I think we are on the same page. I basically want to emulate the style of an HTML email composition in Outlook. There you have only the vertical scrollbar and not the horizontal. Is this what you have been able to achieve?
Thanks again.
I think we are on the same page. I basically want to emulate the style of an HTML email composition in Outlook. There you have only the vertical scrollbar and not the horizontal. Is this what you have been able to achieve?
Thanks again.
Re: custom scrolling / page width
Posted by: cliffhanger (---.88.42.173.ptr.us.xo.net)
Date: Sunday, 24-Oct-2004, 13:49:11
Michael,
Thanks, I forgot to mention that above. You just have to cast the body member as the class not the interface:
((HTMLBody)htmlEditor.Document.body).noWrap = false;
That line is all you need to have vertical scrolling only. What I was trying to do was to have horizontal scrolling only to a point --- like Microsoft Word's Page Layout view when the window is smaller than the page width.
Good luck!
Thanks, I forgot to mention that above. You just have to cast the body member as the class not the interface:
((HTMLBody)htmlEditor.Document.body).noWrap = false;
That line is all you need to have vertical scrolling only. What I was trying to do was to have horizontal scrolling only to a point --- like Microsoft Word's Page Layout view when the window is smaller than the page width.
Good luck!
Re: custom scrolling / page width
Posted by: cliffhanger (---.88.42.173.ptr.us.xo.net)
Date: Sunday, 24-Oct-2004, 13:54:42
Modification to my previous post:
When you use the vertical scrollbar from the panel control, you can't manually scroll the htmlEditor's content because the panel realizes that the htmlEditor control itself does not extend outside the panel.
I used a vertical scrollbar instead. If anyone's interested, I'll post the code.
When you use the vertical scrollbar from the panel control, you can't manually scroll the htmlEditor's content because the panel realizes that the htmlEditor control itself does not extend outside the panel.
I used a vertical scrollbar instead. If anyone's interested, I'll post the code.
Re: custom scrolling / page width
Posted by: Michael Yarbrough (---.wachovia.com)
Date: Sunday, 24-Oct-2004, 20:17:31
I got my dunce hat on today. I hate to say it but I think I will need to see the code on this one. I think I understand how to do this but I don't know exactly where to place it in my code.
Here are my expectations. Once I set the noWrap = false then my text and images will automagically go to the next line before the horizontal scrollbar appears. Are my expectations correct?
Please post this code and let me know where you put it ( in the htmlsite\editor.cs or main form etc).
Here are my expectations. Once I set the noWrap = false then my text and images will automagically go to the next line before the horizontal scrollbar appears. Are my expectations correct?
Please post this code and let me know where you put it ( in the htmlsite\editor.cs or main form etc).
Re: custom scrolling / page width
Posted by: Michael Yarbrough (---.wachovia.com)
Date: Friday, 29-Oct-2004, 20:12:46
I still haven't been able to figure this one out. If anyone can lead me in the right direction about how to do this please let me know. Code will be needed so please post it.
Re: custom scrolling / page width
Posted by: Michael Yarbrough (---.wachovia.com)
Date: Wednesday, 03-Nov-2004, 13:18:26
Cliffhanger, can you please post the code for this?
Re: custom scrolling / page width
Posted by: cliffhanger (---.88.42.173.ptr.us.xo.net)
Date: Thursday, 04-Nov-2004, 16:17:12
Sorry for the delay - I've been quite busy for the last week.
You are right in assuming that setting the HTMLBody's noWrap member to false will cause your text and images to wrap before a scrollbar appears. I put that single line of code in a wrapper I wrote for the htmlEditor that makes it act a little like a RichTextBox. I wasn't modifying the code of the editor itself.
Note, you might get an error on
((HTMLBody)htmlEditor.Document.body).noWrap = false;
if you try to execute it before the htmlEditor's readyState is "complete"
You are right in assuming that setting the HTMLBody's noWrap member to false will cause your text and images to wrap before a scrollbar appears. I put that single line of code in a wrapper I wrote for the htmlEditor that makes it act a little like a RichTextBox. I wasn't modifying the code of the editor itself.
Note, you might get an error on
((HTMLBody)htmlEditor.Document.body).noWrap = false;
if you try to execute it before the htmlEditor's readyState is "complete"
Re: custom scrolling / page width
Posted by: Michael Yarbrough (169.200.133.---)
Date: Thursday, 04-Nov-2004, 17:17:52
In testing I found that the text wraps appropriately when there are spaces. I was testing with a long single string of characters and was expecting it to wrap just like a text box. If I use sentences it works fine. I would still be interested in figuring out how to get it to wrap single strings as well when they exceed the margin limits. Not sure how to do that or if it can be done. I was hoping that there was some API that we could call to say "EM_NEXTLINE" and it would skip to the next line. I could do it manually with <BR>'s but don't want to interfere with the underlying HTML code.
Thanks.
Thanks.
Re: custom scrolling / page width
Posted by: Mijail Paz (---.net)
Date: Thursday, 08-May-2008, 22:33:52
Its more easy if you use mshtml.HTMLWindow2
something like this
mshtml.HTMLDocument doc;
doc = mi_htmlEditor.Document
doc.parentWindow.scrollTo(0, 9999);
that it
something like this
mshtml.HTMLDocument doc;
doc = mi_htmlEditor.Document
doc.parentWindow.scrollTo(0, 9999);
that it