Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question wysiwyg style detection

    Hi all,

    I created a wysiwyg editor in javascript. it all works fine. but what I still need is the folowing.

    if you press text that is in bold or that is underlined I want the button wich stands for make bold or make underlined turned on. Or pressed in.

    is this possible and how?

    tanks.

    best regards
    Lord_Garfield

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    To see how to handle a selection take a look at:

    http://www.webreference.com/js/colum...ssbrowser.html

    It says there about IE4 and NS4 but I have tested with Mozilla and IE6 and it looks OK that cross-browser solution.

    Once you manage to hadle the selection I think it will be a piece of cake to make it bold, underlined or whichever
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Apr 2004
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to put something in bold is not a problem. it is rather to check if it is bold then make the B button pressed in.

    Like in word. if you place your cursor over a bold word. the B button will be pressed in.

    How can I do this in javascript?

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well you can't tell a button to be pushed in when it's not. My suggestion is to whip up some images for the b, i, and u buttons and just emulate a button with two images (up and down).

    Perhaps a more HTML-friendly way would be to simply give the button a 2px black border or something with CSS when it's in the a "bold" section.

  • #5
    New Coder
    Join Date
    Apr 2004
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I mis explained myself.

    I'm using images already. The problem is more how do I detect that I'm in this "bold area". So I can apply this other style to it.

    or when I'm over text wich has the another font on it then the other text how can I detect wich font so I can put my select box so that that font is selected. etc...

    tanks for the reply's.

    best regards
    LG

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    hm... that means you need a way to find out if a selected characher/word is within <strong> or <b> tags... hm... interesting problem... I'll try to see if it can be solved...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    i'd say it depends heavily on how you're formatting that text. can we see the code you're working with?
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #8
    New Coder
    Join Date
    Apr 2004
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll post a part of it.

    I preload my images wich will be used as a toolbar.
    I have a iframe named textvak1

    I use this function to do basic stuff like setting something in bold.

    function opmaak(commando)
    {
    textvak1.document.execCommand(commando);
    textvak1.focus();

    }

    I call this function for example with this line
    <IMG NAME="myinterfaceimgmap_01" SRC="images/myinterfaceimgmap_01.gif" OnClick="opmaak('Bold')" WIDTH=26 HEIGHT=25 BORDER=0 ALT="" USEMAP="#myinterfaceimgmap_01_Map"></TD>

    hope this helps.

  • #9
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    something like this?

    Code:
    <html>
    <head>
    <title>QueryCommandState</title>
    
    <script type="text/JScript">
    
    function execCom(n){
    
    editBox.focus();
    
    var d = document;
    
     if(d.queryCommandSupported(n)){
    d.execCommand(n);}
    
    }
    
    function querCom(){
    var d, f, e, n;
    
    d = document;
    f = d.commands;
    
    e = new Enumerator(f.elements);
    
    while (!e.atEnd()){
    
    n = e.item().name;
    
    if(d.queryCommandSupported(n)){
    
    d.queryCommandState(n) ? f[n].className = "ON" : f[n].className = "OFF";}
    
    e.moveNext();}
    
    }
    </script>
    
    <style type="text/css">
    
    .container{
    width:40em;
    padding:1em;
    border:2px outset;
    background:threedface}
    
    .edt{
    height:10em;
    padding:1em;
    overflow-y:scroll;
    border:2px inset;
    color:windowtext;
    background:window;
    word-wrap:break-word;
    scrollbar-base-color:threedface}
    
    .toolbar{
    padding:0.5em;
    margin:1em 0 0 0;
    text-align:center;
    border:2px outset}
    
    .OFF{
    font:caption;
    border:2px outset}
    
    .ON{
    font:caption;
    border:2px inset;
    color:activecaption;
    background:threedhighlight}
    
    </style>
    
    </head>
    <body>
    
    <div class="container" onclick="execCom(event.srcElement.name)">
    
    <div contenteditable="true" id="editBox" class="edt" 
    onfocus="querCom()" onbeforeeditfocus="querCom()" onkeydown="querCom()" onkeyup="querCom()">
    <!-- Use Div On Carriage Return --> <div></div>
    </div>
    
    <form  unselectable="on" name="commands" class="toolbar">
    <input type="button" name="Bold"          title="text: bold"           value="Bold"    class="OFF">
    <input type="button" name="Italic"        title="text: italic"         value="Italic"  class="OFF">
    <input type="button" name="StrikeThrough" title="text: strike-through" value="Strike"  class="OFF">
    </form>
    
    </div>
    
    </body>
    </html>
    (Just be sure to use actual command Identifiers as element names...)
    Last edited by swmr; 04-24-2004 at 10:02 AM.
    hmm... ?

  • #10
    Regular Coder
    Join Date
    Feb 2003
    Posts
    638
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I just noticed the slow reaction from that "onbeforeeditfocus" event:


    using onclick="querCom()" seems much faster...
    hmm... ?

  • #11
    New Coder
    Join Date
    Apr 2004
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    tanks I try it..

  • #12
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Lord_Garfield
    I'll post a part of it.

    I preload my images wich will be used as a toolbar.
    I have a iframe named textvak1

    I use this function to do basic stuff like setting something in bold.

    function opmaak(commando)
    {
    textvak1.document.execCommand(commando);
    textvak1.focus();

    }

    I call this function for example with this line
    <IMG NAME="myinterfaceimgmap_01" SRC="images/myinterfaceimgmap_01.gif" OnClick="opmaak('Bold')" WIDTH=26 HEIGHT=25 BORDER=0 ALT="" USEMAP="#myinterfaceimgmap_01_Map"></TD>
    Dynamic Drive has a free script that will do what you want:
    http://www.dynamicdrive.com/dynamici...ressbutton.htm


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •