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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Location
    United States
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need Help CMS button

    Hello I'm working on a basic cms and i'm trying to , develop buttons that will put "<b></b>", "<etc></etc>",<img src="images/check.gif"/>. I'm not looking for a RTE (Rich Text Editor) just the ability to click Bold button and <b></b> will be shown in the textarea. Since i'm js newbie , i was wonder if any of you could assist me with this? (i hope this is in the right section)
    Last edited by prospect; 10-20-2008 at 10:11 AM. Reason: forgot to be a little more specific with something.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,333
    Thanks
    11
    Thanked 587 Times in 568 Posts
    example application for firefox:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>dan's simple w3 editor</title>
    
    <style>
    
    body {background-color: aliceblue; }
    textarea {font-family:Tahoma, sans-serif; font-size:100&#37;;border: 2px groove #88f ; padding: 5px}
    
    </style>
    <script>
    	String.prototype.underline=	function(){ return  "<u>"+this+"<\/u>" }
    </script>
    </head>
    
    <body>
    <textarea  id='t2' name='t2' rows='50' cols='110'  style="width:90%; height:60%;position:absolute; left:4px; top: 250px;" ></textarea>
    
    
    <span   style="color: red" >Format:&nbsp;
    
    <input  value="B" type="button"  title="Display in bold"  onClick="AF('bold',0);"  style="font-weight: bold;border: 1px solid #000; color: #000" >&nbsp;
    
    <input  value="I" type="button"  title="Display in italic"  onClick="bv='italics'; AF(bv,0);"  style="font-style:italic; font-weight: 600; padding-right: 9px; border: 1px solid #000; color: #000" >&nbsp;
    
    <input  value="U" type="button"  title="Display w/ underline"  onClick="bv='underline'; AF(bv,0);"  style="text-decoration: underline;border: 1px solid #000; color: #000" >&nbsp;
    
    <input  value="S" type="button"  title="Display in Strike-Through"  onClick="bv='strike'; AF(bv,0);"  style="text-decoration:line-through;border: 1px solid #000; color: #000" >&nbsp;
    
    <input  value="F" type="button"  title="Display blinking"  onClick="bv='blink' ; AF(bv,0);"  style="text-decoration: blink; border: 1px solid #000; color: #000" >&nbsp;
    
    |&nbsp;
    
    <input  value="big" type="button"  title="Use a big font"  onClick="bv='big'; AF(bv,0);"  style="border: 1px solid #000; color: #000" >&nbsp;
    
    <input  value="small" type="button"  title="Use a small font"  onClick="bv='small'; AF(bv,0);"  style="border: 1px solid #000; color: #000" >&nbsp;
    
    |&nbsp;
    
    <input  value="sub" type="button"  title="Display as sub-script"  onClick="bv='sub'; AF(bv,0);"  style="border: 1px solid #000; color: #000" >&nbsp;
    
    <input  value="sup" type="button"  title="Display as super-script"  onClick="bv='sup'; AF(bv,0);"  style="border: 1px solid #000; color: #000" >&nbsp;
    
    |&nbsp;
    
    <input  value="Pre" type="button"  title="Display as pre-formatted text (preserves white-space)"  onClick="bv='fixed'; AF(bv,0);"  style="border: 1px solid #000; color: #000" >&nbsp;
    
    |&nbsp;
    
    <input  value="Link" type="button"  title="Add a hyper-link to a URL to selected text"  onClick="bv='link'; AF(bv,'vi');"  style="border: 1px solid #000; color: #000" ></span>
    
    
    
    
    <select  size="1" class="editCmd" id="editCombo2" accesskey="a" tabindex="0"  class="combo" style="background-color:#000000; color:#FFFFFF"
    onChange="if(this.selectedIndex) {var oj = this.options[this.selectedIndex];bv=oj.value; bl=(!!oj.lang)?oj.lang:0; AF(bv, bl);};  this.selectedIndex=0"  >
    	<option>Transforms</option>
    	<option  value="toLowerCase"  title="displays a string in lowercase letters ">toLowerCase</option>
    	<option value="toUpperCase"  title="DISPLAYS A STRING IN UPPERCASE LETTERS ">toUpperCase</option>
    	<option  value="escape"  lang="fo"  title="Safe Encodes a string ">escape</option>
    	<option  value="unescape"   lang="fo" title="Decodes a string encoded by escape() ">unescape</option>
    	<option  value="escJS"  title="Converts selected text into a JavaScript string">JSON String</option>
    	<option value="escHT"   lang="fo"  title="Make the selected text XML-safe">XML escape</option>
    </select>
    
    
    
    <script>
    
    function el(tid) {
        return document.getElementById(tid);
    }
    
    function escHT(t) {
        var tt = document.createTextNode(t);
        var d = document.createElement("div");
        d.appendChild(tt);
        return d.innerHTML;
    }
    
    function escJS(tes) {
        var tes2 = tes.replace(/([\r\n])/gm, "");
        var qw = tes2.replace(/(["'\f\b\n\t\r\/\\])/gm, "\\$1");
        return qw;
    }
    
    
    
    
    lastText=el("t2");
    
    function getSel (q) {
        v = q.value;
        s = q.selectionStart;
        e = q.selectionEnd;
        return [[0, s, e - s, e, v.length], [v.slice(0, s), v.slice(s, e), v.substr(e)]];
    }
    
    function AF(v, l) {
        var t = getSel(lastText);
        oh = lastText.scrollTop;
        if (!l) {
            lastText.value = t[1][0] + t[1][1][v]() + t[1][2];
        }
        if (l == "vi") {
            var s = prompt("Enter the URL to link to.");
            lastText.value = t[1][0] + t[1][1][v](s) + t[1][2];
        }
        if (l == "xh") {
            var s = prompt("Enter a name for the link.", serial(4));
            lastText.value = t[1][0] + t[1][1].anchor(s) + t[1][2];
        }
        if (l == "no") {
            lastText.value = t[1][0] + v + t[1][1] + t[1][2];
        }
        if (l == "fo") {
            var s = eval(v);
            lastText.value = t[1][0] + s(t[1][1]) + t[1][2];
        }
        if (l == "da") {
            var d = new Date;
            lastText.value = t[1][0] + d[v]() + t[1][1] + t[1][2];
        }
        if (l == "cs") {
            alert(v, l);
        }
        lastText.scrollTop = oh;
    }
    
    </script>
    
    </body>
    </html>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    This works in all browsers:-

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function formatText(el,tag){
    var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
    var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
    if(document.selection){    //IE
    document.selection.createRange().text=newText;
    }
    else{   //Moz
    el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
    }
    }
    </script>
    </head>
    
    <body>
    <form name="myForm">
    <textarea name="myTextarea" rows = "12" cols = "50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br>
    <input type="button" value="Bold" onclick="formatText (myTextarea,'b');" />
    <input type="button" value="Italic" onclick="formatText (myTextarea,'i');" />
    <input type="button" value="Underline" onclick="formatText (myTextarea,'u');" />
    </form>
    </body>
    </html>
    Author - Kor


    The whole aim of practical politics is to keep the populace alarmed (and hence clamorous to be led to safety)
    by menacing it with an endless series of hobgoblins, all of them imaginary.
    H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist

  • Users who have thanked Philip M for this post:

    prospect (10-20-2008)

  • #4
    New to the CF scene
    Join Date
    Oct 2008
    Location
    United States
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks wow this actually helped me alot. oh btw is there anything that i can do like putting a image in there

    i modified the code a little add/changed so when the (a) button is clicked it gives them <img src="blah.gif"/> instead of <img src="blah.gif"/></img src="blah.gif"/>.

    Thanks again .

    (Philip M)
    doesn't work in IE7* it put sends the value into the submit button
    Last edited by prospect; 10-20-2008 at 03:00 PM. Reason: had add comment/issue @ Philip M


  •  

    Posting Permissions

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