SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    WYSIWYG editor : working on a few basic stuff

    Would anyone have the time to show me a bit of code that would transform a highlighted regular text in a textarea into a bold one once a specific button hitten?

    thanks in advance

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Are you doing a true WYSIWYG editor or do you just want to add <b></b> tags around a range of text in a regular textarea? If you're going full WYSIWYG, then I suggest FCKEditor. Use the Basic toolbar option if you don't want to give your users too many ways to mess things up.

  3. #3
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool link vinnie thanks

    Actually I'd like to add some basic stuff (not a true editor), but it would be more like custome BBcode .

    So I guess my question is still valid... Unless I can change the code produced by FCKEditor.

  4. #4
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FCKEditor is gud but I think it is not light weight.... Is there any lightweight HTML text editor available???????

    Thanx

    Naveen.V

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't get it to work for a textarea, so I used a <div> and styled it to look like a textarea (the upper box is a div and the lower box is a textarea and they look indentical). The code below works in IE6, but not Firefox1.0.


    PHP Code:
    <!DOCTYPE html
      
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"


    <
    html xmlns="http://www.w3.org/1999/xhtml" 
      
    xml:lang="en" lang="en">

    <
    head>
      <
    title>Web Design 1</title>
      <
    meta name="author" content="Mr. Smith, I presume" />
      <
    meta name="description"  content="web" />


    <
    style type="text/css">
    <!-- 
    body{
        
    background-image
    url(http://www.grsites.com/folders/my_backgrounds/write038.gif);
    }
    .
    bold_button{
        
    height40px;
        
    width40px;
        
    font-weightbolder;
        
    border-styleoutset;
        
    border-width3px;
    }

    .
    italic_button{
        
    height40px;
        
    width40px;
        
    font-styleitalic;
        
    border-styleoutset;
        
    border-width3px;
    }

    #html_button{
        
    margin-top:5px;
        
    border-styleoutset;
        
    border-width3px;
    }

    .
    box_style{
        
    margin-top:5px;
        
    border-styleinset;
        
    border-width3px;
        
    width50%;
        
    height100px;
        
    overflowauto;
        
    background-image:
    url(http://www.grsites.com/folders/my_backgrounds/misc180.gif);
    }
    -->
    </
    style>

    <
    script language="javascript">
    <!-- 
    Hide from browsers lacking javascript

    window
    .onload 
        function()
        {
            
    document.f.buttonB.onclick change_font;
            
    document.f.buttonI.onclick change_font;
            
    document.f.html_button.onclick display_html;
                
        }

    function 
    change_font()
    {
        
    //Creates a TextRange object encompassing the selection:
        
    var sText document.selection.createRange();
        
        
        
    /* TEST(see below): NEED TO ADD <div id="test></div>
        TO THE END OF THE HTML FOR THIS TEST TO HAVE A PLACE
        TO WRITE TO(and turn off background-image styling for
        <body>):                                      */
        /*
        alert(sText);
        alert(sText.parentElement().id);
        document.getElementById("test").innerText=    
            "parent id: " + sText.parentElement().id;
        */
        
        
        
    var parent=sText.parentElement().id;
        if (
    parent == "" || parent == "editable_div")
            
    //Catch all for when editable_div is the parent
            //plus another occurence: when you click the bold
            //or italic button and no text is selected: sText 
            //exists, but there is no text range, and sometimes
            //the interpretation is that there is no parent.
            //Strangely enough, in those cases the 'id' returns
            //nothing: not null nor undefined, just blank. Uncomment
            //and run the test above to see for yourself. The 
            //blank id usually occurs when you first type some text
            //and click on the bold or italics button without 
            //selecting a range.

        
    {
            if(
    this.name=="buttonB")
            {    
                    
    document.execCommand("Bold");
                    
    document.getElementById("editable_div").focus();
            }
            else if(
    this.name=="buttonI")
            {
                
    document.execCommand("Italic");
                
    document.getElementById("editable_div").focus();

            }
        }
    }

    function 
    display_html()
    {
        
    document.f.html_viewer.value =
            
    document.getElementById("editable_div").innerHTML;
    }

    // End hiding -->
    </script>

    </head>


    <body>
    <form name="f" method="post" action="">

    <input  unselectable="on" name="buttonB" class="bold_button" type="button" value="B"/>
    <input  unselectable="on" name="buttonI" class="italic_button" type="button" value="i"/>

    <div contenteditable="true" id="editable_div" class="box_style">editable DNA (<em>enter new DNA strands for assimilation</em>)</div>

    <textarea contenteditable="false" name="html_viewer" id="html_viewer" class="box_style">non editable DNA</textarea>

    <div><input name="html_button" id="html_button" type="button" value="See DNA structure in first box"/></div>

    <!-- <div id="test"></div> -->
    </form>
    </body>
    </html> 
    Notes:

    unselectable="on"

    is kind of quirky. I had to play with the on-off state to get the best functionality in the editable_div. I'm not sure why it needs to be on, but with it on and explicitly putting the focus back on the editable_div after clicking a button, the editable_div worked best.

    It was interesting to note that while the default text in the 'show html textarea' cannot be changed since contentEditable="false" was included in the tag(i.e. you can't add or delete text), the text could still be changed to bold or italic, which I found strange. So, I took steps to prevent that functionality.

    One problem: when you hit return, the default functionality is to put <p> tags around the previous text and the subsequent text. Therefore, you can't hit return and go to the next line. I'm not sure how to correct that.
    Last edited by 7stud; Oct 20, 2004 at 07:15.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by contactnaveen
    FCKEditor is gud but I think it is not light weight.... Is there any lightweight HTML text editor available???????
    I doubt it. Actually, the beta version 2.0 is about 50% smaller than 1.x. You also have to remember that not all of the FCKeditor files are used every time the editor is loaded. Only about 40-50% of the files are used because there are different scripts to use for IE and Moz, and different skin files that are used/not used.

  7. #7
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot for your replies

  8. #8
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I have checked it and it looks great... However I have some problems with the dropdown (using IE5.5... hey I'm at job ok?....).
    It's like they don't want to stay dropped down.
    Has anyone else experienced that?

  9. #9
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by contactnaveen
    FCKEditor is gud but I think it is not light weight.... Is there any lightweight HTML text editor available???????
    http://www.kevinroth.com/rte/demo.htm

  10. #10
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CoderGoblin

    Thanx for your reply.. Its good and very neat...


Bookmarks

Posting Permissions

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