pasteHTML and font size

**pronerd** · Dec 17 '08, 05:24 PM

Originally posted by markjavascript

after that, when type in other letters, (sometimes) I got big letters with size=5.

That is not a bug. Just about every rich text editor will do that. I have the same problem with MS Word. If the cursor is placed next to that text it will be counted as inside the tags so it will have the style of those tags. You could try adding a space after the closing tag so that it will not treat the cursors location as inside the tag.

**markjavascript** · Dec 17 '08, 05:39 PM

Thank you.
The problem is that I cannot disallow the user type a letter next to the big letter and there is no way to recover the font size since my div's font size is in px.

**pronerd** · Dec 17 '08, 05:56 PM

Originally posted by markjavascript

The problem is that I cannot disallow the user type a letter next to the big letter.

Sure you can. As I just explained you could add a space after the closing tag so the cursor would not end up beside the letter(s). Or you could set an onChange event for the field and check to see if the currsor is next to your tag. If it is then move it over a space or two.

Originally posted by markjavascript

there is no way to recover the font size since my div's font size is in px.

I do not understand what you mean. First off you are not setting your font size in px. You are not including any label for the attribute at all. Secondly your HTML syntax is incorrect you should have quotes around all of your attributes. Thirdly all you have to do to get the font size is to read the size attribute of the font tag.

**markjavascript** · Dec 17 '08, 07:58 PM

In the div, I use STYLE="font-size:14px;" while in the javascript use ("<font size='5'>A</font> ".I include the font size in the div now:
-----------------------------

Code:

<html> 
<script> 
   function Test() 
   { 
      document.getElementById("testDiv").focus();
      var Rng = document.selection.createRange(); 
      Rng.pasteHTML("<font size='5'>A</font> "); 
   } 
</script> 
<body> 
   <div id="testDiv" contentEditable="true" STYLE="font-size:14px;"></div> 
   <input type="button" onclick="Test()"> 
</body> 
</html>

-----------------------
Thank you for telling me the mistakes in my first code. Please check this code as well.

Adding a space is a good idea, but, after tested, I found the user can still put the cursor immediataly after the big letter or just delete the space, and then the problem still exists.

**Dormilich** · Dec 17 '08, 09:02 PM

some general remarks
- don't use <font> tags, these are deprecated quite a long time now, if you need to change the font size, use CSS
- contentEditable is not a valid attribute (looke like IE syntax), if you need to edit block text use <textarea>

**markjavascript** · Dec 17 '08, 09:31 PM

Dormilich,

Thank you.
I think we cannot use css for the font size in pasteHTML("<fon t size='5'>A</font> ")
Yse <textarea> is very good, but it is not "rich", we cannot display subscript for example.

**Dormilich** · Dec 18 '08, 05:22 AM

Originally posted by markjavascript

I think we cannot use css for the font size in pasteHTML("<fon t size='5'>A</font> ")

why?

Originally posted by markjavascript

Yse <textarea> is very good, but it is not "rich", we cannot display subscript for example.

you could make an instant previev <div>, what for those users whose browser ignores the contentEditable attribute?

**markjavascript** · Dec 18 '08, 06:52 AM

Thank you.

Do you think we can use css for the font size in pasteHTML("<fon t size='5'>A</font> ")? Anyway, I will try again.

In my website, only 1% visitors not use IE. I will let them select <textarea> or <div>.

**Dormilich** · Dec 18 '08, 07:15 AM

javascript simple css syntax:

Code:

// set font-size to 2em
// [I]element[/I] is your <div>
[I]element[/I].style.fontSize = "2em";

and because I'm in the mood....

Code:

// making only the first letter big
div:first-letter {
  font-size: 200%;
}

**acoder** · Dec 18 '08, 09:12 AM

You can use designMode in Firefox and other browsers by setting it to "on". This would set the whole document, so you would need to use an iframe. See Midas - MozillaZine Knowledge Base

In newer versions of Firefox (3 onwards), you can use contentEditable to apply to a single element. It should also be supported by Opera/Safari - not sure about Chrome.

To see an example of its use (using an iframe), see contentEditable.

**Markus** · Dec 18 '08, 01:50 PM

contentEditable does work in Chrome 1.0.

**markjavascript** · Dec 18 '08, 08:32 PM

To all the experts above,

If my problem may not be solved, can we think another way:
a javascript function that says "all the typed in letters for the DIV will be with font-size=14px"?

**Dormilich** · Dec 19 '08, 08:07 AM

thats easy. add a new css rule

Code:

#id_of_div {
  font-size: 14px;
// you might be better with relative font sizes
}

**markjavascript** · Dec 20 '08, 12:10 AM

Thank you.
Can I put you code into a function setFont('14px') ?
However, even I can put into the function setFont('14px') , do you think
pasteHTML("<fon t size='5'>A</font>");setFont ('14px');
will solve my problem?

pasteHTML and font size

pasteHTML and font size

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment