pasteHTML and font size

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • markjavascript
    New Member
    • Dec 2008
    • 9
    #1

    pasteHTML and font size

    Hi,

    In an editable div, I inserted a big letter, Rng.pasteHTML(" <font size=5>A</font>");,fine. However, after that, when type in other letters, (sometimes) I got big letters with size=5.

    Here is the code:

    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"></div>
   <input type="button" onclick="Test()">
</body>
</html>
    Please let me know If anything wrong in the code.

    What I tested by this code is:
    Type ABC, click the button, the big A appears, press Return, put the cursor immediately after the big A, then type a letter and this letter is a big letter!

    Any helps would be appreciated.
    Last edited by acoder; Dec 17 '08, 06:54 PM. Reason: Added [code] tags
    Tags: pastehtml chrome
    • pronerd
      Recognized Expert Contributor
      • Nov 2006
      • 392
      #2
      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.

        Comment

        • markjavascript
          New Member
          • Dec 2008
          • 9
          #3
          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.

            Comment

            • pronerd
              Recognized Expert Contributor
              • Nov 2006
              • 392
              #4
              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.

                Comment

                • markjavascript
                  New Member
                  • Dec 2008
                  • 9
                  #5
                  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.
                  Last edited by acoder; Dec 17 '08, 09:51 PM. Reason: Added [code] tags

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      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>

                        Comment

                        • markjavascript
                          New Member
                          • Dec 2008
                          • 9
                          #7
                          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.

                            Comment

                            • Dormilich
                              Recognized Expert Expert
                              • Aug 2008
                              • 8694
                              #8
                              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?

                                Comment

                                • markjavascript
                                  New Member
                                  • Dec 2008
                                  • 9
                                  #9
                                  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>.

                                    Comment

                                    • Dormilich
                                      Recognized Expert Expert
                                      • Aug 2008
                                      • 8694
                                      #10
                                      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%;
}

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          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.

                                            Comment

                                            • Markus
                                              Recognized Expert Expert
                                              • Jun 2007
                                              • 6092
                                              #12
                                              contentEditable does work in Chrome 1.0.

                                                Comment

                                                • markjavascript
                                                  New Member
                                                  • Dec 2008
                                                  • 9
                                                  #13
                                                  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"?

                                                    Comment

                                                    • Dormilich
                                                      Recognized Expert Expert
                                                      • Aug 2008
                                                      • 8694
                                                      #14
                                                      thats easy. add a new css rule
                                                      Code:
                                                      #id_of_div {
  font-size: 14px;
// you might be better with relative font sizes
}

                                                        Comment

                                                        • markjavascript
                                                          New Member
                                                          • Dec 2008
                                                          • 9
                                                          #15
                                                          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?

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...