SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help me with formated text box

    I'm trying to do a box like this one:


    (forget the advanced button)

    I want buttons like Bold, Italic and Underlined, Color button, size button, URL button, table button, and so on...

    I have this questions, how can i give the actions to the buttons, in the way that they will only place the tags around the text the user is selecting?

    For example, i have the blue text selected:

    Like a blue bird in the sky...
    In a normal form, i would click the BOLD button and this would be the result:

    Like a blue bird in the sky...<b></b>
    (notice on the b tags)

    And this is what i want:

    <b>Like a blue bird</b> in the sky...
    (being the blue text the selected one).

    This doesn't sound to difficult i think, can you help me?

    Thanks!

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at http://www.quirksmode.org/dom/range_intro.html.

    Maybe somebody else will come and expand on my post.

  3. #3
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesnt look easy....

    Why IE 6/7 is not compatible with W3C?

  4. #4
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've found a MOD for PHPbb that does exactly that and i could base on it to do the same, but i can't indetify the code that does the research of the text select by the user, can you find it?

    JS is strange....

    PHP Code:
    ################################################################# 
    ## Mod Title: Smartor's Editor for phpBB2
    ## Mod Version: 1.1.0 Final
    ## Author: Smartor <smartor@zapo.net> - http://b0k13a.hostbet.net
    ## Description: This replaces the original JavaScript in 'posting_body'
    ##        with a better BBCode-and-smilie-inserting script.
    ##        Will allow you insert BBCode or smilie at your cursor.
    ##        Only tested with phpBB 2.0.1
    ## 
    ## Installation Level:     Easy 
    ## Installation Time:     5 Minutes 
    ##
    ## Files To Edit: 1
    ##    templates/template_XX/posting_body.tpl
    ##
    ## Included Files: 1
    ##    templates/template_XX/smartor_editor.js
    ################################################################# 
    ## 
    ## Author Note:
    ## 
    ##    You should change all your templates
    ##
    ##    This MOD is Copyright  Smartor, 2002
    ##   
    ##    (Any changes to this MOD must retain my Copyright Notice)
    ## 
    ################################################################# 
    ## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD 
    ################################################################# 
    ##
    ## Revision History:
    ##
    ## v1.1.0
    ##    - Included "How to add new BBCode Button.txt"
    ## v1.0.1
    ##    - Removed 'Close All Tags' because it is no longer needed
    ## v1.0.0
    ##    - Initial Release and Final.
    ##
    #################################################################
    ## Example Page:     http://b0k13a.hostbet.net/forum
    ################################################################# 



    #-----[ OPEN ]------------------------------------------ 

    templates/subSilver/posting_body.tpl

    #
    #-----[ REPLACE SECTION ]-------------------------------
    #
    <script language="JavaScript" type="text/javascript">
    <!--

    ...
    ...
    ...

    //-->
    </script>

    #
    #-----[ WITH ]------------------------------------------
    #
    <script language="JavaScript" src="templates/subSilver/smartor_editor.js" type="text/javascript"></script>


    #
    #-----[ FIND ]------------------------------------------
    #
              <tr align="center" valign="middle"> 
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onClick="bbstyle(0)" onMouseOver="helpline('b')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px" onClick="bbstyle(2)" onMouseOver="helpline('i')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px" onClick="bbstyle(4)" onMouseOver="helpline('u')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onClick="bbstyle(6)" onMouseOver="helpline('q')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onClick="bbstyle(8)" onMouseOver="helpline('c')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onClick="bbstyle(10)" onMouseOver="helpline('l')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onClick="bbstyle(12)" onMouseOver="helpline('o')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="p" name="addbbcode14" value="Img" style="width: 40px"  onClick="bbstyle(14)" onMouseOver="helpline('p')" />
                  </span></td>
                <td><span class="genmed"> 
                  <input type="button" class="button" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onClick="bbstyle(16)" onMouseOver="helpline('w')" />
                  </span></td>
              </tr>

    #
    #-----[ REPLACE WITH ]----------------------------------
    #
              <tr align="left" valign="middle"> 
                <td>
                  <span class="genmed"> 
                  <input type="button" class="button" name="bold" value="B" style="font-weight:bold; width: 30px" onClick="BBCbold()" onMouseOver="helpline('b')" />
                  <input type="button" class="button" name="italic" value="i" style="font-style:italic; width: 30px" onClick="BBCitalic()" onMouseOver="helpline('i')" />
                  <input type="button" class="button" name="under" value="U" style="text-decoration: underline; width: 30px" onClick="BBCunder()" onMouseOver="helpline('u')" />
                  <input type="button" class="button" name="quote" value="Quote" style="width: 50px" onClick="BBCquote()" onMouseOver="helpline('q')" />
                  <input type="button" class="button" name="code" value="Code" style="width: 40px" onClick="BBCcode()" onMouseOver="helpline('c')" />
                  <input type="button" class="button" name="img" value="IMG" style="width: 40px"  onClick="BBCimg()" onMouseOver="helpline('p')" />
                  <input type="button" class="button" name="url" value="URL" style="text-decoration: underline; width: 40px" onClick="BBCurl()" onMouseOver="helpline('w')" />
                  </span>
                </td>
              </tr>

    #
    #-----[ FIND, REMOVE ]-------------------------------------
    #
    <td nowrap="nowrap" align="right"><span class="gensmall"><a href="javascript:bbstyle(-1)" class="genmed" onMouseOver="helpline('a')">{L_BBCODE_CLOSE_TAGS}</a></span></td>


    #
    #-----[ MAKE FILE: template/subSilver/smartor_editor.js ]------------------------------------------
    #
    var theSelection = false;

    var clientPC = navigator.userAgent.toLowerCase();
    var clientVer = parseInt(navigator.appVersion);

    var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
    var is_nav  = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                    && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                    && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));

    var is_win   = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
    var is_mac    = (clientPC.indexOf("mac")!=-1);

    b_help = "Bold text: [B]text[/B]";
    i_help = "Italic text: [I]text[/I]";
    u_help = "Underline text: [U]text[/U]";
    q_help = "Quote text: [QUOTE]text[/QUOTE]";
    c_help = "Code display: [CODE]code[/CODE]";
    p_help = "Insert image: [IMG]http://image_url[/IMG]";
    w_help = "Insert URL: [URL]http://url[/URL] or [URL=http://url]URL text[/URL]";
    s_help = "Font color: [COLOR=red]text[/COLOR] Tip: can also use HTML color=#FF0000";
    f_help = "Font size: [SIZE=9]small text[/SIZE]";

    var Quote = 0;
    var Bold  = 0;
    var Italic = 0;
    var Underline = 0;
    var Code = 0;

    function helpline(help) {
        document.post.helpbox.value = eval(help + "_help");
        document.post.helpbox.readOnly = "true";
    }

    function checkForm() {
        formErrors = false;    
        if (document.post.message.value.length < 2) {
            formErrors = "You must enter a message when posting";
        }
        if (formErrors) {
            alert(formErrors);
            return false;
        } else {
            //formObj.preview.disabled = true;
            //formObj.submit.disabled = true;
            return true;
        }
    }

    function emoticon(text) {
        text = ' ' + text + ' ';
        PostWrite(text);
    }

    function bbfontstyle(bbopen, bbclose) {
        if ((clientVer >= 4) && is_ie && is_win) {
            theSelection = document.selection.createRange().text;
            if (!theSelection) {
                document.post.message.value += bbopen + bbclose;
                document.post.message.focus();
                return;
            }
            document.selection.createRange().text = bbopen + theSelection + bbclose;
            document.post.message.focus();
            return;
        } else {
            document.post.message.value += bbopen + bbclose;
            document.post.message.focus();
            return;
        }
        storeCaret(document.post.message);
    }

    function storeCaret(textEl) {
        if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
    }

    function PostWrite(text) {
        if (document.post.message.createTextRange && document.post.message.caretPos) {
            var caretPos = document.post.message.caretPos;
            caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?    text + ' ' : text;
        }
        else document.post.message.value += text;
        document.post.message.focus(caretPos)
    }

    function BBCcode() {
        if ((clientVer >= 4) && is_ie && is_win) {
            theSelection = document.selection.createRange().text;
            if (theSelection != '') {
            document.selection.createRange().text = "[CODE]" + theSelection + "[/CODE]";
            document.post.message.focus();
            return;
            }
        }
        if (Code == 0) {
            ToAdd = "[CODE]";
            document.post.code.value = "Code*";
            Code = 1;
        } else {
            ToAdd = "[/CODE]";
            document.post.code.value = "Code";
            Code = 0;
        }
        PostWrite(ToAdd);
    }

    function BBCquote() {
        if ((clientVer >= 4) && is_ie && is_win) {
            theSelection = document.selection.createRange().text;
            if (theSelection != '') {
            document.selection.createRange().text = "[QUOTE]" + theSelection + "[/QUOTE]";
            document.post.message.focus();
            return;
            }
        }
        if (Quote == 0) {
            ToAdd = "[QUOTE]";
            document.post.quote.value = "Quote*";
            Quote = 1;
        } else {
            ToAdd = "[/QUOTE]";
            document.post.quote.value = "Quote";
            Quote = 0;
        }
        PostWrite(ToAdd);
    }

    function BBCbold() {
        if ((clientVer >= 4) && is_ie && is_win) {
            theSelection = document.selection.createRange().text;
            if (theSelection != '') {
            document.selection.createRange().text = "[B]" + theSelection + "[/B]";
            document.post.message.focus();
            return;
            }
        }
        if (Bold == 0) {
            ToAdd = "[B]";
            document.post.bold.value = "B*";
            Bold = 1;
        } else {
            ToAdd = "[/B]";
            document.post.bold.value = "B";
            Bold = 0;
        }
        PostWrite(ToAdd);
    }

    function BBCitalic() {
        if ((clientVer >= 4) && is_ie && is_win) {
            theSelection = document.selection.createRange().text;
            if (theSelection != '') {
            document.selection.createRange().text = "[I]" + theSelection + "[/I]";
            document.post.message.focus();
            return;
            }
        }
        if (Italic == 0) {
            ToAdd = "[I]";
            document.post.italic.value = "i*";
            Italic = 1;
        } else {
            ToAdd = "[/I]";
            document.post.italic.value = "i";
            Italic = 0;
        }
        PostWrite(ToAdd);
    }

    function BBCunder() {
        if ((clientVer >= 4) && is_ie && is_win) {
            theSelection = document.selection.createRange().text;
            if (theSelection != '') {
            document.selection.createRange().text = "[U]" + theSelection + "[/U]";
            document.post.message.focus();
            return;
            }
        }
        if (Underline == 0) {
            ToAdd = "[U]";
            document.post.under.value = "U*";
            Underline = 1;
        } else {
            ToAdd = "[/U]";
            document.post.under.value = "U";
            Underline = 0;
        }
        PostWrite(ToAdd);
    }

    function BBCurl() {
        var FoundErrors = '';
        var enterURL   = prompt("Enter your URL", "http://");
        var enterTITLE = prompt("Enter the webpage title", "Webpage Title");
        if (!enterURL)    {
            FoundErrors += " You have not entered the URL yet!";
        }
        if (!enterTITLE)  {
            FoundErrors += " You have not entered the title yet!";
        }
        if (FoundErrors)  {
            alert("Error!"+FoundErrors);
            return;
        }
        var ToAdd = "[URL="+enterURL+"]"+enterTITLE+"[/URL]";
        document.post.message.value+=ToAdd;
        document.post.message.focus();
    }

    function BBCimg() {
        var FoundErrors = '';
        var enterURL   = prompt("Enter your image URL","http://");
        if (!enterURL) {
            FoundErrors += " You have not entered the URL yet!";
        }
        if (FoundErrors) {
            alert("Error!"+FoundErrors);
            return;
        }
        var ToAdd = "[IMG]"+enterURL+"[/IMG]";
        document.post.message.value+=ToAdd;
        document.post.message.focus();
    }

    #
    #-----[ SAVE/CLOSE ALL FILES ]------------------------------------------
    #
    # EoM 

  5. #5
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it?

    if ((clientVer >= 4) && is_ie && is_win) {
    theSelection = document.selection.createRange().text;
    if (theSelection != '') {
    document.selection.createRange().text = "" + theSelection + "";
    document.post.message.focus();
    return;
    }

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks like its for the IE 4.

    Quote Originally Posted by Mr Jojo View Post
    That doesnt look easy....
    Yeah, it will take a bit of work.
    Quote Originally Posted by Mr Jojo View Post
    Why IE 6/7 is not compatible with W3C?
    Ahh, excellent point.


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
  •