// Cross-Browser Rich Text Editor // http://www.kevinroth.com/rte/demo.htm // Written by Kevin Roth (kevin@NOSPAMkevinroth.com - remove NOSPAM) //init variables var isRichText = false; var rng; var currentRTE; var allRTEs = ""; var isIE; var isGecko; var isSafari; var isKonqueror; var imagesPath; var includesPath; var cssFile; function initRTE(imgPath, incPath, css) { //set browser vars var ua = navigator.userAgent.toLowerCase(); isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1)); isGecko = (ua.indexOf("gecko") != -1); isSafari = (ua.indexOf("safari") != -1); isKonqueror = (ua.indexOf("konqueror") != -1); isChrome = (ua.indexOf("chrome") != -1); //check to see if designMode mode is available //if (document.getElementById && document.designMode && !isSafari && !isKonqueror) { if (document.getElementById && document.designMode && !isKonqueror) { isRichText = true; } if (isChrome) isRichText = true; //isRichText = true; if (!isIE) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.MOUSEUP); document.onmouseover = raiseButton; document.onmouseout = normalButton; document.onmousedown = lowerButton; document.onmouseup = raiseButton; //set paths vars imagesPath = imgPath; includesPath = incPath; cssFile = css; if (isRichText) document.writeln(''); //for testing standard textarea, uncomment the following line //isRichText = false; } function writeRichText(rte, html, width, height, buttons, readOnly) { if (isRichText) { if (allRTEs.length > 0) allRTEs += ";"; allRTEs += rte; writeRTE(rte, html, width, height, buttons, readOnly); } else { writeDefault(rte, html, width, height, buttons, readOnly); } } function writeDefault(rte, html, width, height, buttons, readOnly) { if (!readOnly) { document.writeln(''); } else { document.writeln(''); } } function raiseButton(e) { if (isIE) { var el = window.event.srcElement; } else { var el= e.target; } className = el.className; if (className == 'rteImage' || className == 'rteImageLowered') { el.className = 'rteImageRaised'; } } function normalButton(e) { if (isIE) { var el = window.event.srcElement; } else { var el= e.target; } className = el.className; if (className == 'rteImageRaised' || className == 'rteImageLowered') { el.className = 'rteImage'; } } function lowerButton(e) { if (isIE) { var el = window.event.srcElement; } else { var el= e.target; } className = el.className; if (className == 'rteImage' || className == 'rteImageRaised') { el.className = 'rteImageLowered'; } } function writeRTE(rte, html, width, height, buttons, readOnly) { if (readOnly) buttons = false; //adjust minimum table widths if (isIE) { // if (buttons && (width < 600)) width = 360; var tablewidth = width; } else { // if (buttons && (width < 500)) width = 360; var tablewidth = width + 4; } if (buttons == true) { document.writeln(''); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln(' '); document.writeln('
Bold textItalic textInsert imageFormat as codeInsert YouTube content
Insert smiley
Send me an email on update!
'); } document.writeln(''); //document.writeln('
 View Source'); document.writeln(''); document.writeln(''); document.writeln(''); document.getElementById('hdn' + rte).value = html; enableDesignMode(rte, html, readOnly); } function enableDesignMode(rte, html, readOnly) { var frameHtml = "\n"; frameHtml += "\n"; //to reference your stylesheet, set href property below to your stylesheet path and uncomment if (cssFile.length > 0) { frameHtml += "\n"; } else { frameHtml += "\n"; } frameHtml += "\n"; frameHtml += "\n"; frameHtml += html + "\n"; frameHtml += "\n"; frameHtml += ""; if (document.all) { var oRTE = frames[rte].document; oRTE.open(); oRTE.write(frameHtml); oRTE.close(); if (!readOnly) oRTE.designMode = "On"; } else { try { if (!readOnly) document.getElementById(rte).contentDocument.designMode = "on"; try { var oRTE = document.getElementById(rte).contentWindow.document; oRTE.open(); oRTE.write(frameHtml); oRTE.close(); if (isGecko && !readOnly) { //attach a keyboard handler for gecko browsers to make keyboard shortcuts work oRTE.addEventListener("keypress", kb_handler, true); } } catch (e) { alert("Error preloading content."); } } catch (e) { //gecko may take some time to enable design mode. //Keep looping until able to set. if (isGecko) { setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10); } else { return false; } } } } function updateRTEs() { var vRTEs = allRTEs.split(";"); for (var i = 0; i < vRTEs.length; i++) { updateRTE(vRTEs[i]); } } function updateRTE(rte) { if (!isRichText) return; //set message value var oHdnMessage = document.getElementById('hdn' + rte); var oRTE = document.getElementById(rte); var readOnly = false; //check for readOnly mode if (document.all) { if (frames[rte].document.designMode != "On") readOnly = true; } else { if (document.getElementById(rte).contentDocument.designMode != "on") readOnly = true; } if (isRichText && !readOnly) { //if viewing source, switch back to design view //if (document.getElementById("chkSrc" + rte).checked) { // document.getElementById("chkSrc" + rte).checked = false; // toggleHTMLSrc(rte); //} if (oHdnMessage.value == null) oHdnMessage.value = ""; if (document.all) { oHdnMessage.value = frames[rte].document.body.innerHTML; } else { oHdnMessage.value = oRTE.contentWindow.document.body.innerHTML; } //if there is no content (other than formatting) set value to nothing if (stripHTML(oHdnMessage.value.replace(" ", " ")) == "" && oHdnMessage.value.toLowerCase().search("' + selection + ''); //} else if (command == "italic") { // oRTE.document.execCommand("insertHTML", false, '' + selection + ''); } else if (command == "slikawww") { s=prompt('Insert image link:',''); if (s!=null && s!="") oRTE.document.execCommand("insertHTML", false, '[z.img '+s+']'); } else if (command == "code") { oRTE.document.execCommand("insertHTML", false, '<code>' + selection + '</code>'); //oRTE.document.execCommand("insertHTML", false, '' + selection + '

'); } else if (command == "youtube") { s=prompt('Insert Youtube link:',''); if (s!=null && s!="") { s=s.replace(/http.*v=([a-zA-Z0-9_]+).*/,"$1"); //alert(s); oRTE.document.execCommand("insertHTML", false, '[z.youtube '+s+']'); } } else if (command == "quote") { oRTE.document.execCommand("insertHTML", false, option); } else if (command == "smiley") { //save current values parent.command = command; currentRTE = rte; //position and show color palette buttonElement = document.getElementById(command + '_' + rte); // Ernst de Moor: Fix the amount of digging parents up, in case the RTE editor itself is displayed in a div. document.getElementById('cps' + rte).style.left = getOffsetLeft(buttonElement, 4) + "px"; document.getElementById('cps' + rte).style.top = (getOffsetTop(buttonElement, 4) + buttonElement.offsetHeight + 4) + "px"; if (document.getElementById('cps' + rte).style.visibility == "hidden") { document.getElementById('cps' + rte).style.visibility = "visible"; document.getElementById('cps' + rte).style.display = "inline"; } else { document.getElementById('cps' + rte).style.visibility = "hidden"; document.getElementById('cps' + rte).style.display = "none"; } } else if (command == "createlink") { var sz = prompt("Enter a URL:", ""); try { //ignore error for blank urls oRTE.document.execCommand("Unlink", false, null); oRTE.document.execCommand("CreateLink", false, sz); } catch (e) { //do nothing } } else { oRTE.focus(); oRTE.document.execCommand(command, false, option); oRTE.focus(); } } catch (e) { alert(e); } } function setSmiley(s) { var rte = currentRTE; var oRTE; if (document.all) { oRTE = frames[rte]; } else { oRTE = document.getElementById(rte).contentWindow; } var parentCommand = parent.command; if (document.all) { //retrieve selected range var sel = oRTE.document.selection; //if (parentCommand == "") parentCommand = "backcolor"; if (sel != null) { var newRng = sel.createRange(); newRng = rng; newRng.select(); } } oRTE.focus(); t=''; if (s=='#01') t=':)'; else if (s=='#02') t=':lol:'; else if (s=='#03') t='8)'; else if (s=='#04') t=':('; else if (s=='#05') t=':?'; else if (s=='#06') t='(l)'; else if (s=='#07') t=':o'; else if (s=='#08') t='(z)'; else if (s=='#09') t=';)'; else if (s=='#10') t=';('; else if (s=='#11') t=':|'; else if (s=='#12') t='*-)'; else if (s=='#13') t='(roka)'; else if (s=='#14') t=':S'; else if (s=='#15') t=':P'; else if (s=='#16') t='(p)'; else if (s=='#17') t='(6)'; else if (s=='#18') t='(a)'; else if (s=='#19') t=':X'; else if (s=='#20') t='(d)'; else if (s=='#21') t='(n)'; else if (s=='#22') t='(b)'; else if (s=='#23') t='(r)'; else if (s=='#24') t='(*)'; oRTE.document.execCommand("insertHTML", false, t); oRTE.focus(); document.getElementById('cps' + rte).style.visibility = "hidden"; document.getElementById('cps' + rte).style.display = "none"; } //Function to set color function setColor(color) { var rte = currentRTE; var oRTE; if (document.all) { oRTE = frames[rte]; } else { oRTE = document.getElementById(rte).contentWindow; } var parentCommand = parent.command; if (document.all) { //retrieve selected range var sel = oRTE.document.selection; if (parentCommand == "hilitecolor") parentCommand = "backcolor"; if (sel != null) { var newRng = sel.createRange(); newRng = rng; newRng.select(); } } oRTE.focus(); oRTE.document.execCommand(parentCommand, false, color); oRTE.focus(); document.getElementById('cp' + rte).style.visibility = "hidden"; document.getElementById('cp' + rte).style.display = "none"; } //Function to add image function AddImage(rte) { var oRTE; if (document.all) { oRTE = frames[rte]; //get current selected range var selection = oRTE.document.selection; if (selection != null) { rng = selection.createRange(); } } else { oRTE = document.getElementById(rte).contentWindow; //get currently selected range var selection = oRTE.getSelection(); rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange(); } imagePath = prompt('Enter Image URL:', 'http://'); if ((imagePath != null) && (imagePath != "")) { oRTE.focus(); oRTE.document.execCommand('InsertImage', false, imagePath); oRTE.focus(); } } //function to perform spell check function checkspell() { try { var tmpis = new ActiveXObject("ieSpell.ieSpellExtension"); tmpis.CheckAllLinkedDocuments(document); } catch(exception) { if(exception.number==-2146827859) { if (confirm("ieSpell not detected. Click Ok to go to download page.")) window.open("http://www.iespell.com/download.php","DownLoad"); } else { alert("Error Loading ieSpell: Exception " + exception.number); } } } // Ernst de Moor: Fix the amount of digging parents up, in case the RTE editor itself is displayed in a div. function getOffsetTop(elm, parents_up) { var mOffsetTop = elm.offsetTop; var mOffsetParent = elm.offsetParent; if(!parents_up) { parents_up = 10000; // arbitrary big number } //while(parents_up>0 && mOffsetParent) { while(mOffsetParent = mOffsetParent.offsetParent) { mOffsetTop += mOffsetParent.offsetTop; //mOffsetParent = mOffsetParent.offsetParent; parents_up--; } return mOffsetTop; } // Ernst de Moor: Fix the amount of digging parents up, in case the RTE editor itself is displayed in a div. function getOffsetLeft(elm, parents_up) { var mOffsetLeft = elm.offsetLeft; var mOffsetParent = elm; if(!parents_up) { parents_up = 10000; // arbitrary big number } //while(parents_up>0 && mOffsetParent) { while(mOffsetParent = mOffsetParent.offsetParent) { mOffsetLeft += mOffsetParent.offsetLeft; //mOffsetParent = mOffsetParent.offsetParent; //alert(mOffsetLeft); parents_up--; } return mOffsetLeft; } function Select(rte, selectname) { var oRTE; if (document.all) { oRTE = frames[rte]; //get current selected range var selection = oRTE.document.selection; if (selection != null) { rng = selection.createRange(); } } else { oRTE = document.getElementById(rte).contentWindow; //get currently selected range var selection = oRTE.getSelection(); rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange(); } var idx = document.getElementById(selectname).selectedIndex; // First one is always a label if (idx != 0) { var selected = document.getElementById(selectname).options[idx].value; var cmd = selectname.replace('_' + rte, ''); oRTE.focus(); oRTE.document.execCommand(cmd, false, selected); oRTE.focus(); document.getElementById(selectname).selectedIndex = 0; } } function kb_handler(evt) { var rte = evt.target.id; //contributed by Anti Veeranna (thanks Anti!) if (evt.ctrlKey) { var key = String.fromCharCode(evt.charCode).toLowerCase(); var cmd = ''; switch (key) { case 'b': cmd = "bold"; break; case 'i': cmd = "italic"; break; case 'u': cmd = "underline"; break; }; if (cmd) { FormatText(rte, cmd, true); //evt.target.ownerDocument.execCommand(cmd, false, true); // stop the event bubble evt.preventDefault(); evt.stopPropagation(); } } } function docChanged (evt) { alert('changed'); } function stripHTML(oldString) { var newString = oldString.replace(/(<([^>]+)>)/ig,""); //replace carriage returns and line feeds newString = newString.replace(/\r\n/g," "); newString = newString.replace(/\n/g," "); newString = newString.replace(/\r/g," "); //trim string newString = trim(newString); return newString; } function trim(inputString) { // Removes leading and trailing spaces from the passed string. Also removes // consecutive spaces and replaces it with one space. If something besides // a string is passed in (null, custom object, etc.) then return the input. if (typeof inputString != "string") return inputString; var retValue = inputString; var ch = retValue.substring(0, 1); while (ch == " ") { // Check for spaces at the beginning of the string retValue = retValue.substring(1, retValue.length); ch = retValue.substring(0, 1); } ch = retValue.substring(retValue.length-1, retValue.length); while (ch == " ") { // Check for spaces at the end of the string retValue = retValue.substring(0, retValue.length-1); ch = retValue.substring(retValue.length-1, retValue.length); } // Note that there are two spaces in the string - look for multiple spaces within the string while (retValue.indexOf(" ") != -1) { // Again, there are two spaces in each of the strings retValue = retValue.substring(0, retValue.indexOf(" ")) + retValue.substring(retValue.indexOf(" ")+1, retValue.length); } return retValue; // Return the trimmed string back to the user }