Support forums - Setting the Font Size List

Support forums » Products » Cute Editor for .NET » Re: Source Code: Setting the Font Size List

Setting the Font Size List

Last post 08-03-2004, 4:46 PM by EvilMonkey. 16 replies.


	Sort Posts: Previous Next

07-08-2004, 11:17 AM 1196

EvilMonkey
Joined on 06-18-2004
Posts 19

Setting the Font Size List

Reply Quote

Hello,

I'm trying to get the dropdownlist to contain "1pt", "2pt", etc rather than "1", "2", .....

I tried using the FontSizesList which does display them properly in the dropdownlist but when I try to use them nothing happens.

It looks like the strings from this list are being converted to integers and because I've added the "pt" it craps out. If this is the case is there a work-around I can use?

07-08-2004, 1:59 PM 1197 in reply to 1196

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Setting the Font Size List

Reply Quote

Sorry, that should be "px" rather than "pt"

Even if I write

Foo

in the HTML side of the CuteEditor it automatically changes it to

Foo

when you switch back and forth from Normal and HTML

Any way to turn that automation off?

07-08-2004, 2:30 PM 1198 in reply to 1197

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Setting the Font Size List

Reply Quote

EvilMonkey,

The fontsize dropdown renders the code as followings:

Your text goes here

The SIZE attribute allows you to set your font to an abstract size ranging from 1 to 7. The exact type size corresponding to each of these values is left to your browser. You can't be sure, for example, that SIZE=4 will give you a 12 point typeface; you know only that SIZE=4 will be bigger than SIZE=3.

The table below shows the point size actually used on your Web page by the major browsers. Browsers listed as Microsoft Internet Explorer Version 5.0 (IE 5.0), Netscape Navigator Version 4.2 (NN 4.2) and Version 4.7 (NN 4.7).

	PC		IMAC
Size	IE 5.0	NN 4.2	IE 5.0	NN 4.7
1	7	8	7	9
2	9	9	9	10
3	10	12	12	12
4	12	14	14	14
5	16	18	18	18
6	20	24	24	24
7	30	34	34	34

This table shows, for example, that FONT SIZE=4 gives you a 12 point font under Microsoft Internet Explorer Version 5.0 on the PC. But this same browser on the iMac will give you a 14 point font!

If you do want to set the right size, you approach it is to make use of the Style menu and add a bunch of style items to it called "10pt", "12pt", etc, and then add styles to the stylesheet so they are set to the right size.

asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx

07-08-2004, 3:51 PM 1199 in reply to 1198

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Setting the Font Size List

Reply Quote

Adam wrote:

If you do want to set the right size, you approach it is to make use of the Style menu and add a bunch of style items to it called "10pt", "12pt", etc, and then add styles to the stylesheet so they are set to the right size.

Hmm well you did point out that I was approaching this problem the wrong way.

What I want to have is a DropDownList with items (for example "10px") so that when that item is selected, it wraps

foo

around my text.

I've looked at the StylesDropDown but it wraps foo. So in this case if the contents of the CuteEditor were to be displayed in a different page, then that page would have to have the same style sheet linked to it (not what I'm looking for)

Does the CuteEditor provide an easy way of doing this or am I stuck writing my own Custom DropDownList?

07-12-2004, 9:53 AM 1220 in reply to 1199

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Setting the Font Size List

Reply Quote

Hello

Does anyone know where I can find some sample code for creating a custom DropDownList (or perhaps extending the existing Style or Size DropDownList). I'm trying to use the style attribute rather than the class attribute as shown in the post above this. Is this even possible (all I can find are examples of adding custom buttons)

Thanks

07-12-2004, 10:05 AM 1221 in reply to 1220

BruceD
Joined on 01-16-2004
Colorado USA
Posts 37

Re: Setting the Font Size List

Reply Quote

I think this is what you are looking for...

http://www.cutesoft.net/Forums/ShowPost.aspx?PostID=252

07-12-2004, 10:34 AM 1222 in reply to 1221

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Setting the Font Size List

Reply Quote

Thanks for the reply Bruce but unless I missed something, that didn't solve my problem.

When I add styles to a block of text using that code snippet I get something like this...

testing

But what I want is

testing

That's what I mean by using "style" rather than "class". Sorry if there was a misunderstanding.

07-12-2004, 11:36 AM 1224 in reply to 1222

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Setting the Font Size List

Reply Quote

EvilMonkey,

You can create a custom button and register it to the editor to achieve that.

I will post the code in the afternoon.

07-12-2004, 12:51 PM 1229 in reply to 1224

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Source Code: Setting the Font Size List

Reply Quote

EvilMonkey,

Please try the following code. Keep me posted.

function changeSize(editorID,value) {

EditorID = editorID+"_editBox";

var editor = document.getElementById(EditorID);

editor.focus();

var sel = editor.document.selection.createRange();

if (sel.htmlText != "")

sel.pasteHTML( '' + sel.htmlText + '' );

}

</script>

DropDownList temp = new DropDownList();

temp.Attributes.Add("OnChange","changeSize('Editor1',this[this.selectedIndex].value)");

temp.Items.Add(new ListItem("Font Size List",""));

temp.ID = "FontSizeList";// This ID will be used in template

temp.Items.Add(new ListItem("10","10"));

temp.Items.Add(new ListItem("12","12"));

temp.Items.Add(new ListItem("14","14"));

temp.Attributes.Add("style","width:40; margin-left:5;font:8pt Verdana;vertical-align:middle;");

Editor1.RegisterCustomButton(temp); // don't forget register the button to the editor

07-12-2004, 3:11 PM 1237 in reply to 1229

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Source Code: Setting the Font Size List

Reply Quote

Unfortunately the javascript seems to be broken.

sel.length returns "undefined" so I never enter the for loop

If I change "sel.length" with a number (say 1) then the javascript craps out on sel(i) (looks like I cant access it as an array)

I can do...

var str = sel.text

for (i = 0; i < str.length; i++)

....

But then I still can't extract the tagName.

I could wrap str with.... str but I'm assuming that this could cause problems if an Image is part of the selection (which I think you are trying to check for in the code).

Ideas/Suggestions?

Thanks

07-12-2004, 4:47 PM 1238 in reply to 1237

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: Source Code: Setting the Font Size List

Reply Quote

I updated the above code. Please try again and keep me posted.

07-12-2004, 5:05 PM 1239 in reply to 1238

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Source Code: Setting the Font Size List

Reply Quote

Works for text but if an image is part of the selection then the image gets removed.

07-12-2004, 5:09 PM 1240 in reply to 1239

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Source Code: Setting the Font Size List

Reply Quote

Eeep my bad.

I accidently pasted sel.text rather than sel.htmlText. Once I corrected that it seems to work :)

Thanks for the help

07-29-2004, 12:24 PM 1377 in reply to 1240

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Source Code: Setting the Font Size List

Reply Quote

Hello,

I'm looking for help to further change the above code for a custom DropDownList. Using the Font Face DropDownList as an example, after someone has highlighted some text and chosen their font face, the selection of text remains highlighted and the DropDownList goes back to having "Font" selected. Any ideas how to mimic this functionality?

07-29-2004, 1:11 PM 1378 in reply to 1377

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Source Code: Setting the Font Size List

Reply Quote

Would also like to add that it does some terrible things to the html code when you start switching different attributes (like font face and size) to the same section of text. Any hope of being able to fix this?

Off Topic: Looks like there's something wrong with the Edit functionality of the forum (which is why I created another reply rather than editing the last one)

07-29-2004, 1:22 PM 1379 in reply to 1378

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Source Code: Setting the Font Size List

Reply Quote

Sorry, I should have done more testing rather than writing a new message for each bug. Anyway, with the given code once a block of text has had its size changed, you can't change it again. That is, say I change a block to be 12px, but then change it again to 16px, the resulting html looks like this...

....

08-03-2004, 4:46 PM 1425 in reply to 1379

EvilMonkey
Joined on 06-18-2004
Posts 19

Re: Source Code: Setting the Font Size List

Reply Quote

For anyone thats interested, I've come across a code snippet (found online) that I have modified that seems to work better than the function that Adam offered.

In the _Format function in WinIE.js, add the following case statement...

case "FontStyleSize":
 checkRange(editing.EditorID); // get the focus and text range
 editor.document.execCommand('RemoveFormat');
 editor.document.execCommand('FontName',0,'RandomGarbageToCheckAgainst');
 var fontArray = editor.all.tags("FONT");
 for (i = 0; i < fontArray.length; i++)
 {
 if (fontArray[i].face == 'RandomGarbageToCheckAgainst')
 {
 fontArray[i].face = "";
 fontArray[i].style.fontSize = szValue;
 fontArray[i].outerHTML = fontArray[i].outerHTML.replace(/face=['"]+/, "");
 }
 }
 break;

And when creating the custom dropdownlist....

temp.Attributes.Add("OnChange", "_Format('body','FontStyleSize',this.options[this.selectedIndex].value);this.selectedIndex=0;");

Where 'temp' is the custom dropdownlist and 'body' is the id of the CuteEditor

Hopefully this will be helpful for others.