View Full Version : Need Help CMS button

10-20-2008, 02:12 AM
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)

rnd me
10-20-2008, 08:38 AM
example application for firefox:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>dan's simple w3 editor</title>


body {background-color: aliceblue; }
textarea {font-family:Tahoma, sans-serif; font-size:100&#37;;border: 2px groove #88f ; padding: 5px}

String.prototype.underline= function(){ return "<u>"+this+"<\/u>" }

<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;


<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;


<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;


<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;


<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 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>


function el(tid) {
return document.getElementById(tid);

function escHT(t) {
var tt = document.createTextNode(t);
var d = document.createElement("div");
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;


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;



Philip M
10-20-2008, 08:53 AM
This works in all browsers:-

<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.sel ectionEnd);// IE:Moz
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection){ //IE
else{ //Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value .length);

<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');" />

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

10-20-2008, 10:56 AM
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