JavaScript Forum

**elf2002** · 10-11-2010, 04:27 PM

I mean, simpliest script for forums, that makes [ b ] [ \ b ] etc, and which compatible with all sorts of browsers.

**chrishirst** · 10-11-2010, 04:39 PM

Not in javascript, BBcode has to be handled server side.

**elf2002** · 07:33 PM

Quote:

Originally Posted by chrishirst

Not in javascript, BBcode has to be handled server side.

Thanx for answer. I mean, when user types text in the form (like I do it now

)

**chrishirst** · 10-18-2010, 02:06 PM

Something like this?

You need to add your own functions for buttons etc.

**elf2002** · 10-18-2010, 03:15 PM

Quote:

Originally Posted by chrishirst

Something like this?

You need to add your own functions for buttons etc.

Sorry, no.
I need scripts like this

**chrishirst** · 10-18-2010, 04:18 PM

As I pointed out you need to write your own functions for the buttons
This is the code that runs the editor on my CMS.

The full javascript

Code:

var m_bHelpOn = false;
var m_bHelpPrompt = false;
var m_bHelpOff = true;
var code = true;

var m_HelpStatus = 0
setHelpState(m_HelpStatus)
// -1 = help alerts on
// 0 = No help 
// 1 = Prompt for properties

// browser sniffing to compensate for yes you guessed it!!
var m_bIsFF = false;
var m_bIsIE = false;
if (navigator.userAgent.toLowerCase().indexOf("microsoft") > 0) {
   m_bIsIE = true;
}
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){ 
	m_bIsFF = true; 
} 

// prototype method to fix yet another IE shortcoming
// this time it's the lack of indexOf on arrays.
if(!Array.indexOf){
	    Array.prototype.indexOf = function(obj){
	        for(var i=0; i<this.length; i++){
	            if(this[i]==obj){
	                return i;
	            }
	        }
	        return -1;
	    }
	}

var m_sSelText = "";

var m_oTextEditID = "details";

var m_asTagsFormat = new Array("b","i","u","s","strong","em","lcase","c","ucase","o","sup","sub");
var m_asTitleFormat = new Array("bold","italic","underline","strikethough","strong","emphasis","lowercase","capitalise","uppercase","overline","superscript","subscript");
var m_sHelpFormat = "The ~ tag displays the enclosed text as ~ ";
var m_sUseFormat = " \n\n USE: [#]This is some ~ text[/#]"; 
var m_sPromptFormat = "Text to be shown as ~.";

var m_asTagsAlign = new Array("left","center","right");
var m_asTitleAlign = new Array("left","centre","right");
var m_sHelpAlign = "The ~ tag aligns the enclosed text ~ ";
var m_sUseAlign = " \n\n USE: [#]This is some ~ aligned text[/#]"; 
var m_sPromptAlign = "Text to be aligned ~.";

var m_sHelpSize = " Sets the text size. Possible values are 1 to 8.";
var m_sUseSize = " \n\nUSE: [size=#]This is size # text[/size]"
var m_sPromptSize = "Text to be size #";

var m_sHelpHeading = " Sets the heading size. Possible values are 1 to 6.";
var m_sUseHeading = " \n\nUSE: [h#]This is a size # heading[/h#]"
var m_sPromptHeading = "Text to be a heading size #";

var m_sHelpColour = " Sets the text colour.";
var m_sUseColour = " \n\nUSE: [#]This is # text[/#]"
var m_sPromptColour = "Text to be  coloured  #";

var m_asTagsLinks = new Array("url","ftp","mail","referal","img","aff","jump");
var m_asTitleLinks = new Array("link","FTP","email","referral","image","affiliate","jump");
var m_asProtocol = new Array("http://","ftp://","mailto:","","http://","","");
var m_asSample = new Array("www.example.com","example.com","name@example.com","www.example.com/?id=refcode","www.example.com","/jump.asp?site=www.example.com?refid=code","/jump.asp?site=www.example.com");
var m_sHelpLinks = "The # tag is used to create a ; hyperlink";
var m_sUseLinks = " \n\nUSE: [#=\";¬\"]Anchor Text[/#] ";
var m_sUseLinksExtra = " \n\n Leave off the ; to create a link to the local site "; 
var m_sPromptLinks = " ; URL for the link";

var m_sHelpFont = " Sets the font face.";
var m_sUseFont = " \n\nUSE: This text in # font "
var m_sPromptFont = "Text to be # font";

var m_asTagsQuote = new Array("quote","rant");
var m_asTitleQuote = new Array(" a quote"," a rant");
var m_sHelpQuote = "The [#] tag displays the enclosed text as ~ ";
var m_sUseQuote = " \n\n USE: [#]This is ~ [/#]"; 
var m_sPromptQuote = "Text to be shown as a ~.";
var m_sQuoteTitle = "Enter a title for the # box";

var m_asTagsElement = new Array("both","left","right","p","div");
var m_abEmptyElement = new Array(true,true,true,false,false,false);
var m_asETags = new Array("clear","clear","clear","p","div");
var m_asTitleElement = new Array("clearing","clearing","clearing","paragraph","division");
var m_sHelpElement = "This [~] tag inserts a ~:# element ";
var m_sHelpEmptyElement = "The # tag inserts a ~ element ";
var m_sUseElement = " \n\n USE: [#]~[/#]"; 
var m_sUseEmptyElement = " \n\n USE: [~]#[/~]"; 
var m_sPromptElement = "Text to be inside a #.";

var m_asTagsSearch = new Array("google","yahoo","msn");
var m_asTitleSearch = new Array("Google","Yahoo!","msn");
var m_sHelpSearch = "The [search] tag creates a link to search ~ for the phrase";
var m_sUseSearch = " \n\n USE: [search=#]This is some text to search ~ for[/search]"; 
var m_sPromptSearch = "Text to search ~ for.";

	function setURL(p_sTag) {
	var l_sLinkText = "";
	var l_sURI = null;
	var l_sUseLinks = null;
	
	if (p_sTag != "mail") {
		 l_sUseLinks = m_sUseLinks + m_sUseLinksExtra;
		 l_sPromptLinks = m_sPromptLinks + m_sUseLinksExtra;
		 } else {
		 l_sUseLinks = m_sUseLinks;
		 l_sPromptLinks = m_sPromptLinks
	}
		if (m_bHelpOn) {
			alert(setDetails(m_sHelpLinks, m_asProtocol, m_asSample, m_asTitleLinks, m_asTagsLinks, p_sTag ) + setDetails(l_sUseLinks, m_asProtocol, m_asSample, m_asTitleLinks, m_asTagsLinks, p_sTag ) );
		}
		l_sURI = prompt(setDetails(l_sPromptLinks, m_asProtocol, m_asSample, m_asTitleLinks, m_asTagsLinks, p_sTag ),getProtocol(m_asProtocol, m_asTagsLinks ,p_sTag));

		if (l_sURI != null) {
			if (m_sSelText != "") { 
				l_sLinkText = getLinkText(p_sTag, l_sURI, m_sSelText);
			} else {
				l_sLinkText = getLinkText(p_sTag, l_sURI, "");
			}
		}
		
		if (l_sLinkText != "") {
			insertText(m_oTextEditID,l_sLinkText);
		}
		document.thisform.url.selectedIndex = 0;
	}
	
	function getLinkText(p_sTag, p_sURI, p_sAnchor) {
	var l_sLinkText = "";
	if (p_sAnchor == "") {
		p_sAnchor = prompt("Anchor text for the link (leave blank to use URL)","");
	}
	if (p_sURI != "") {
		l_sLinkText = "[" + p_sTag +"=\"" + p_sURI + "\"]" ;
		if (p_sAnchor != "") {
			l_sLinkText += p_sAnchor + "[/" + p_sTag +"]";
		} else {
			l_sLinkText += p_sURI + "[/" + p_sTag +"]";
		}
	}		
//document.getElementById("msg").innerHTML = p_sURI +  " Selected " + p_sAnchor;
	return l_sLinkText;
	}

	function setDetails(p_sStr, p_PArray, p_SArray, p_TitleArray, p_TagArray, p_sTag ) {
	if (p_PArray) {
		p_sStr = p_sStr.replace( /;/g, p_PArray[p_TagArray.indexOf(p_sTag)]);
		}
	if (p_SArray) {
		p_sStr = p_sStr.replace( /¬/g, p_SArray[p_TagArray.indexOf(p_sTag)]);
		}
	if (p_TitleArray) {
		p_sStr = p_sStr.replace( /~/g, p_TitleArray[p_TagArray.indexOf(p_sTag)] )
		}
		return p_sStr.replace( /#/g, p_sTag );
	}
	
	
	function getProtocol(p_PArray, p_TagArray ,p_sTag) {
		return p_PArray[p_TagArray.indexOf(p_sTag)];
	}
	
	function getIsEmpty(p_PArray, p_TagArray ,p_sTag) {
		return p_PArray[p_TagArray.indexOf(p_sTag)];
	}

	function getTag(p_PArray, p_TagArray ,p_sTag) {
		return p_PArray[p_TagArray.indexOf(p_sTag)];
	}
	
	function setLinkText(p_sTag,p_sURI) {
		return "[" + p_sTag + "=\"" + p_sURI + "\"]" + m_sSelText + "[/" + p_sTag + "]";
	}
	
	function insertSymbol(p_sText) {
	insertText(m_oTextEditID,"[" + p_sText + "]");
		document.thisform.symbol.selectedIndex = 0;
	}
	
	function getSelText(p_sObjID) {
	l_oObj = document.getElementById(p_sObjID);
		if (m_bIsFF) {
			m_sSelText = (l_oObj.value).substring(l_oObj.selectionStart, l_oObj.selectionEnd);
		} else {
			if (window.getSelection){ 
			m_sSelText = window.getSelection(); 
			}else if (document.getSelection){ 
			m_sSelText = document.getSelection(); 
			}else if (document.selection){ 
			m_sSelText = document.selection.createRange().text; 
			} 
		}
	}
	
	function insertText(p_oObj, p_sText) {
	l_oObj = document.getElementById(p_oObj);
	
	if (document.selection) {
		l_oObj.focus();
		var l_sSel = document.selection.createRange();
		l_sSel.text = p_sText;
	} else if (l_oObj.selectionStart || l_oObj.selectionStart == '0') {
		var l_iStartPos = l_oObj.selectionStart;
		var l_iEndPos = l_oObj.selectionEnd;
		l_oObj.value = l_oObj.value.substring(0, l_iStartPos)+ p_sText+ l_oObj.value.substring(l_iEndPos, l_oObj.value.length);
	} else {
	l_oObj.value += p_sText;
	}
	m_sSelText = "";
	l_sSel = null;
	}
	
	function appendText(p_oObj, p_sText) {
	p_oObj.value += p_sText;
	}
	
	function prependText(p_oObj, p_sText) {
	p_oObj.value =  p_sText + p_oObj.value;
	}

	function setSearch(p_sValue) {
		if (m_bHelpOn) {
		alert( setPrompt(m_sHelpSearch, m_asTitleSearch,m_asTagsSearch, p_sValue ) + setPrompt(m_sUseSearch, m_asTitleSearch,m_asTagsSearch, p_sValue ) );
		}
		if (m_sSelText == "") {
			m_sSelText = prompt(setPrompt(m_sPromptSearch,m_asTitleSearch, m_asTagsSearch, p_sValue ),"Text");
		}
		if (m_sSelText!=null) {
			l_sText="[search=\"" + p_sValue +"\"]" + m_sSelText + "[/search]";
			insertText(m_oTextEditID,l_sText);
		}
//		document.thisform.se.selectedIndex = 0;
	}

	function setElement(p_sValue) {
	var l_bIsEmpty = getIsEmpty(m_abEmptyElement,m_asTagsElement,p_sValue);
	var l_sTag = "";
	var l_sText = "";
	
	if (l_bIsEmpty) {
		l_sTag = getTag(m_asETags,m_asTagsElement,p_sValue);
	} else {
		l_sTag = p_sValue;
	}
	
		if (m_bHelpOn) {
			if (l_bIsEmpty) {
				alert( setPrompt(m_sHelpElement, m_asETags,m_asTagsElement, p_sValue ) + setPrompt(m_sUseEmptyElement, m_asETags,m_asTagsElement, p_sValue ) );
			} else {		
				alert( setPrompt(m_sHelpEmptyElement, m_asTitleElement,m_asTagsElement, p_sValue ) + setPrompt(m_sUseElement, m_asTitleElement,m_asTagsElement, p_sValue ) );
			}
		}
		if (!l_bIsEmpty) {
			if (m_sSelText == "") {
				m_sSelText = prompt(setQuest(m_sPromptElement,p_sValue ),"");
			}
		}
		
		if (l_bIsEmpty) {
			l_sText="[" + l_sTag +"]" + p_sValue + "[/" + l_sTag +"]";
		} else {		
			if (m_sSelText!=null) {
				l_sText="[" + l_sTag +"]" + m_sSelText + "[/" + l_sTag +"]";
			}
		}
		
		if (l_sText != "") {
			insertText(m_oTextEditID,l_sText);
		}
		
		document.thisform.element.selectedIndex = 0;
	}

	function setHeading(p_sValue) {
		if (m_bHelpOn) {
		alert( m_sHelpHeading  + setQuest(m_sUseHeading,p_sValue ) );
		}
		if (m_sSelText == "") {
			m_sSelText=prompt(setQuest(m_sPromptHeading, p_sValue ),"Text");
		}
		if (m_sSelText!=null) {
				l_sText="[h" + p_sValue +"]" + m_sSelText + "[/h" + p_sValue +"]";
				insertText(m_oTextEditID,l_sText);
		}
		document.thisform.heading.selectedIndex = 0;
	}
	
	function setColour(p_sValue) {
		if (m_bHelpOn) {
		alert( m_sHelpColour  + setQuest(m_sUseColour,p_sValue ) );
		}
		if (m_sSelText == "") {
			m_sSelText=prompt(setQuest(m_sPromptColour, p_sValue ),"Text");
		}
		if (m_sSelText!=null) {
				l_sText="[" + p_sValue +"]" + m_sSelText + "[/" + p_sValue +"]";
				insertText(m_oTextEditID,l_sText);
		}
		document.thisform.colour.selectedIndex = 0;
	}
	
	function setFont(p_sValue) {
		if (m_bHelpOn) {
		alert( m_sHelpFont  + setQuest(m_sUseFont,p_sValue ) );
		} 
		if (m_sSelText == "") {
			m_sSelText=prompt(setQuest(m_sPromptFont, p_sValue ),"Text");
		}
		if (m_sSelText!=null) {
			l_sText="" + m_sSelText + "";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.font.selectedIndex = 0;
	}
	
	function setSize(p_sValue) {
		if (m_bHelpOn) {
		alert( m_sHelpSize  + setQuest(m_sUseSize,p_sValue ) );
		} 
		if (m_sSelText == "") {
			m_sSelText=prompt(setQuest(m_sPromptSize, p_sValue ),"Text");
		}
		if (m_sSelText!=null) {
			l_sText="[size" + p_sValue +"]" + m_sSelText + "[/size]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.size.selectedIndex = 0;
	}
	
	function setAlign(p_sValue) {
		if (m_bHelpOn) {
		alert( setPrompt(m_sHelpAlign, m_asTitleAlign,m_asTagsAlign, p_sValue ) + setPrompt(m_sUseAlign, m_asTitleAlign,m_asTagsAlign, p_sValue ) );
		}
		if (m_sSelText == "") {
			m_sSelText = prompt(setPrompt(m_sPromptAlign,p_sValue ),m_sSelText);
		}
		if (m_sSelText!=null) {
			l_sText="[" + p_sValue +"]" + m_sSelText + "[/" + p_sValue +"]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.align.selectedIndex = 0;
	}

	function setQuote(p_sValue) {
		if (m_bHelpOn) {
		alert( setPrompt(m_sHelpQuote, m_asTitleQuote,m_asTagsQuote, p_sValue ) + setPrompt(m_sUseQuote, m_asTitleQuote,m_asTagsQuote, p_sValue ) );
		}
		if (m_sSelText == "") {
			if (p_sValue != "rant") {
				var l_sTitle = prompt(setQuest(m_sQuoteTitle, p_sValue));
			}
			m_sSelText=prompt(setQuest(m_sPromptQuote, p_sValue ),"Text");
		} else {
			if (p_sValue != "rant") {
				var l_sTitle = prompt(setQuest(m_sQuoteTitle, p_sValue));
			}
		}

		if (m_sSelText!=null) {
			l_sText="[" + p_sValue;
			if (l_sTitle) {
				l_sText += "=\"" + l_sTitle + "\"";
			}
			l_sText += "]" + m_sSelText + "[/" + p_sValue +"]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.size.selectedIndex = 0;
	}
	
	function setAffProduct() {
		var l_oSelected = document.getElementById("affref");
		l_sSelText = l_oSelected.options[l_oSelected.selectedIndex].value;
		l_sTag = "referal";
		
		if (l_sSelText!=null) {
			l_sText="[" + l_sTag + "=\"" + l_sSelText + "\"]" + l_sSelText + "[/" + l_sTag +"]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.affref.selectedIndex = 0;
	}
	function setQuickProduct() {
		var l_oSelected = document.getElementById("quickref");
		l_sSelText = l_oSelected.options[l_oSelected.selectedIndex].value;
		l_sTag = "qprod";
		
		if (l_sSelText!=null) {
			l_sText="[" + l_sTag + "=\"" + l_sSelText + "\"]" + l_sSelText + "[/" + l_sTag +"]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.quickref.selectedIndex = 0;
	}
		
	function setFormat(p_sTag) {
		if (m_bHelpOn) {
		alert( setPrompt(m_sHelpFormat, m_asTitleFormat,m_asTagsFormat, p_sTag ) + setPrompt(m_sUseFormat, m_asTitleFormat,m_asTagsFormat, p_sTag ) );
		}
		if (m_sSelText == "") {
			m_sSelText=prompt(setPrompt(m_sPromptFormat, m_asTitleFormat,m_asTagsFormat, p_sTag ),"Text");
		}
		if (m_sSelText!=null) {
			l_sText="[" + p_sTag +"]" + m_sSelText + "[/" + p_sTag +"]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.format.selectedIndex = 0;
	}

	function setArticle(p_sText) {
		if (p_sText!="") {
			l_sText="[article]" + p_sText + "[/article]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.sel_article.selectedIndex = 0;
	}

	function setCore(p_sText) {
		if (p_sText!="") {
			l_sText="[local]" + p_sText + "[/local]";
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.sel_core.selectedIndex = 0;
	}
		
	function setPrompt(p_sStr, p_TitleArray, p_TagArray, p_sTag ) {
		if (p_TitleArray) {
			p_sStr = p_sStr.replace( /~/g, p_TitleArray[p_TagArray.indexOf(p_sTag)] )
		}
		return p_sStr.replace( /#/g, p_sTag );
	}
		
	function setQuest(p_sStr, p_sTag ) {
		return p_sStr.replace( /#/g, p_sTag );
	}
	
		
	function ltrim(s) {
		return s.replace( /^\s*/, "" );
	}
	function rtrim(s) {
		return s.replace( /\s*$/, "" );
	}
	function trim ( s ) {
		return rtrim(ltrim(s));
	}
	
	function setHelpState(p_iSel){
	m_HelpStatus = p_iSel;
		if (m_HelpStatus == -1){
			m_bHelpOff = false;
			m_bHelpPrompt = false;
			m_bHelpOn = true;
		} else if (m_HelpStatus == 0) {
			m_bHelpOn = false;
			m_bHelpPrompt = false;
			m_bHelpOff = true;
		} else if (m_HelpStatus == 1) {
			m_bHelpOn = false;
			m_bHelpOff = false;
			m_bHelpPrompt = true;
		}
	}
	setUserText

	function setUserText(p_sValue) {
	l_sText = "[" + p_sValue +"]";
		if (m_bHelpOn) {
			alert("Special function to insert predefined text \n\nUSE: " + l_sText);
		} else {
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.usertext.selectedIndex = 0;
	}

	function setUserSnippet(p_sValue, p_iUserId) {
		l_sText = '[snippet=\"' + p_iUserId + '\"]' + p_sValue + '[/snippet]';
		if (m_bHelpOn) {
			alert("Special function to insert user defined text snippets \n\nUSE: " + l_sText);
		} else {
			insertText(m_oTextEditID,l_sText);
		}
		document.thisform.usersnippet.selectedIndex = 0;
	}
	
	function co() {
	l_sText = "[company]";
		if (m_bHelpOn) {
			alert("Special function to add company name to text \n\nUSE: " + l_sText);
		} else {
			insertText(m_oTextEditID,l_sText);
		}
	}
	
	function copy() {
	l_sText = "[copy]";
		if (m_bHelpOn) {
			alert("Special function to add copyright symbol &copy; to text \n\nUSE: " + l_sText);
		} else {
			insertText(m_oTextEditID,l_sText);
		}
	}
	
	function tm() {
	l_sText = "[tm]";
		if (m_bHelpOn) {
			alert("Special function to add trademark symbol ™ to text \n\nUSE: " + l_sText);
		} else {
			insertText(m_oTextEditID,l_sText);
		}
	}
	
	function reg() {
	l_sText = "[reg]";
		if (m_bHelpOn) {
			alert("Special function to add registrated mark &reg;  to text \n\nUSE: " + l_sText);
		} else {
			insertText(m_oTextEditID,l_sText);
		}
	}
	
	function hr() {
	l_sText = "[hr]";
		if (m_bHelpOn) {
			alert("Horizontal Rule creates a horizontal line across the page.\n\nUSE: " + l_sText);
		} else {
			insertText(m_oTextEditID,l_sText);
		}
	}


	function CheckLen(p_sShowCount, p_sInput, p_iLimit) {
	e = document.getElementById(p_sInput);
		if (e.value.length > p_iLimit) {
		 // if too long...trim it!
			e.value = e.value.substring(0, p_iLimit);
		// otherwise, update 'characters left' counter
		} else {
			document.getElementById(p_sShowCount).innerHTML = p_iLimit - e.value.length;
		}
	}	
	// to be rewritten
		
	
	function list() {
		if (m_bHelpOn) {
			alert("List Tag Builds a bulleted, numbered, or alphabetical list.\n\nUSE:item1[/*]
item2[/*]
item3[/*]
");
		} else if (m_bHelpOff) {
			AddTxt="[li]  [/li][li]  [/li][li]  [/li]
";
			AddText(AddTxt);
		} else {
			type=prompt("Type of list Enter \'A\' for alphabetical, \'1\' for numbered, Leave blank for bulleted.","");
			while ((type!="") && (type!="A") && (type!="a") && (type!="1") && (type!=null)) {
				type=prompt("ERROR! The only possible values for type of list are blank 'A' and '1'.","");
			}
			if (type!=null) {
				if (type=="") {
					AddTxt="[list]";
				} else {
					AddTxt="";
				}
				txt="1";
				while ((txt!="") && (txt!=null)) {
					txt=prompt("List item Leave blank to end list","");
					if (txt!="") {
						AddTxt+="[li]"+txt+"[/li]";
					}
				}
				if (type=="") {
					AddTxt+="
";
				} else {
					AddTxt+="[/list="+type+"]";
				}
				AddText(AddTxt);
			}
		}
	}
	
	function resizeTextarea()
	{
		if (document.thisform.SelectSize.value == 1)
		{
			document.thisform.details.cols = 45;
			document.thisform.details.rows = 11;
		}
		if (document.thisform.SelectSize.value == 2)
		{
			document.thisform.details.cols = 70;
			document.thisform.details.rows = 12;
		}
		if (document.thisform.SelectSize.value == 3)
		{
			document.thisform.details.cols = 90;
			document.thisform.details.rows = 12;
		}
		if (document.thisform.SelectSize.value == 4)
		{
			document.thisform.details.cols = 130;
			document.thisform.details.rows = 15;
		}
	}
	
	function ResetForm(form) {
		var where_to= confirm("Do you really want to Reset the Form Fields?");
		if (where_to== true) {
			form.reset();
		}
	}
	
	function viewPost()
	{
		if (document.thisform.details)
		{
			if (trim(document.thisform.details.value)=="")
			{
			return false
			} else {
			popupWin = window.open('/preview.asp', 'preview_page', 'scrollbars=yes,width=900,height=600')
			return true
			}
		}
	}
	
	function closePreview() {
		popupWin.close;
	}

**chrishirst** · 04:20 PM

The HTML

HTML Code:

<div class="legend">
Formatting Mode:
</div> <!-- .legend -->

<div class="input">

<select tabIndex="-1" onchange="setHelpState(this.options[this.selectedIndex].value)"  name="sethelp" id="sethelp">
<option value="-1">Help on</option>
<option value="0" selected="selected">Help off</option>
<!-- <option value="1">Prompt</option> -->
</select>

</div> <!-- .input -->

<div class="clear_both"></div>
</div> <!-- .form_row -->

<div class="form_row">

<div class="legend">
Format Text:
</div> <!-- .legend -->

<div class="input">

<select tabIndex="-1" onchange="setFormat(this.options[this.selectedIndex].value)" name="format" id="format">
<option value="" selected="selected">Select Format</option>
<option style="font-weight:bold;" value="b">Bold text</option>
<option style="font-style:italic;" value="i">Italic text</option>
<option style="text-decoration:underline;" value="u">Underlined text</option>
<option style="text-decoration:line-through;" value="s">Strikethrough text</option>

<option style="font-weight:bold;" value="strong">Strong text</option>
<option style="font-weight:bold;font-style:italic;" value="em">Emphasised text</option>
<option style="text-transform:lowercase;" value="lcase">Lowercase text</option>
<option style="text-transform:capitalize;" value="c">Propercase text</option>
<option style="text-transform:uppercase;" value="ucase">Uppercase text</option>
<option style="vertical-align:super;" value="sup">Superscript text</option>
<option style="vertical-align:sub;" value="sub">Subscript text</option>
<option style="text-decoration:overline;" value="o">Overline text</option>
</select>

<select tabIndex="-1" onchange="setFont(this.options[this.selectedIndex].value)" name="font" id="font">
<option value="" selected="selected">Select Font</option>
<option style="font-family:'Andale Mono';" value="Andale Mono">Andale Mono</option>
<option style="font-family:'Arial';" value="Arial">Arial</option>
<option style="font-family:'Arial Black';" value="Arial Black">Arial Black</option>
<option style="font-family:'Book Antiqua';" value="Book Antiqua">Book Antiqua</option>
<option style="font-family:'Century Gothic';" value="Century Gothic">Century Gothic</option>

<option style="font-family:'Comic Sans MS';" value="Comic Sans MS">Comic Sans MS</option>

<option style="font-family:'Courier';" value="Courier">Courier</option>
<option style="font-family:'Courier New';" value="Courier New">Courier New</option>
<option style="font-family:'Geneva';" value="Geneva">Geneva</option>
<option style="font-family:'Georgia';" value="Georgia">Georgia</option>
<option style="font-family:'Helvitica';" value="Helvitica">Helvitica</option>
<option style="font-family:'Impact';" value="Impact">Impact</option>
<option style="font-family:'Lucida Console';" value="Lucida Console">Lucida Console</option>
<option style="font-family:'Script MT Bold';" value="Script MT Bold">Script MT Bold</option>

<option style="font-family:'Stencil';" value="Stencil">Stencil</option>
<option style="font-family:'Tahoma';" value="Tahoma">Tahoma</option>
<option style="font-family:'Times';" value="Times">Times</option>
<option style="font-family:'Times New Roman';" value="Times New Roman">Times New Roman</option>
<option style="font-family:'Trebuchet MS';" value="Trebuchet MS">Trebuchet MS</option>
<option style="font-family:'Verdana';" value="Verdana">Verdana</option>
</select>

<select tabIndex="-1" onchange="setHeading(this.options[this.selectedIndex].value)" name="heading" id="heading">
<option value="" selected="selected">Heading</option>

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>


</div> <!-- .input -->

<div class="clear_both"></div>
</div> <!-- .form_row -->

<div class="form_row">

<div class="legend">
Size &amp; Colour:
</div> <!-- .legend -->

<div class="input">

<select tabIndex="-1" onchange="setSize(this.options[this.selectedIndex].value)" name="size" id="size">

<option value="" selected>Text Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>

</select>

<select tabIndex="-1" onchange="setColour(this.options[this.selectedIndex].value)" name="colour" id="colour">
<option value="" selected="selected">Text Colour</option>
<option style="color: beige;background-color:black;" value="beige">Beige</option>
<option style="color: black;" value="black">Black</option>
<option style="color: blue;" value="blue">Blue</option>
<option style="color: brown;" value="brown">Brown</option>

<option style="color: gold;" value="gold">Gold</option>
<option style="color: green;" value="green">Green</option>

<option style="color: limegreen;" value="limegreen">Lime Green</option>
<option style="color: maroon;" value="maroon">Maroon</option>
<option style="color: navy;" value="navy">Navy</option>
<option style="color: orange;" value="orange">Orange</option>
<option style="color: pink;" value="pink">Pink</option>
<option style="color: purple;" value="purple">Purple</option>
<option style="color: red;" value="red">Red</option>

<option style="color: teal;" value="teal">Teal</option>

<option style="color: violet;" value="violet">Violet</option>
<option style="color: white;background-color:black;" value="white">White</option>
<option style="color: yellow;background-color: black;" value="yellow">Yellow</option>
</select>

<select tabIndex="-1" onchange="setColour(this.options[this.selectedIndex].value)" name="backcolour" id="backcolour">
<option value="" selected="selected">Background Colour</option>
<option style="background-color: beige;color:black;" value="bg_beige">Beige</option>
<option style="background-color: black;color:white;" value="bg_black">Black</option>
<option style="background-color: blue;color:white;" value="bg_blue">Blue</option>

<option style="background-color: brown;color:white;" value="bg_brown">Brown</option>
<option style="background-color: gold;" value="bg_gold">Gold</option>
<option style="background-color: green" value="bg_green">Green</option>
<option style="background-color:limegreen;" value="bg_limegreen">Lime Green</option>
<option style="background-color: maroon;" value="bg_maroon">Maroon</option>
<option style="background-color: navy;color:black;" value="bg_navy">Navy</option>
<option style="background-color: orange;" value="bg_orange">Orange</option>
<option style="background-color: pink;" value="bg_pink">Pink</option>
<option style="background-color: purple;" value="bg_purple">Purple</option>

<option style="background-color: red;" value="bg_red">Red</option>
<option style="background-color: teal;" value="bg_teal">Teal</option>
<option style="background-color: violet;" value="bg_violet">Violet</option>
<option style="background-color: white;color:black;" value="bg_white">White</option>
<option style="background-color: yellow;" value="bg_yellow">Yellow</option>
</select>

</div> <!-- .input -->

<div class="clear_both"></div>
</div> <!-- .form_row -->

<div class="form_row">

<div class="legend">
Insert Text:
</div> <!-- .legend -->

<div class="input">


<select tabIndex="-1" onchange="insertSymbol(this.options[this.selectedIndex].value)" name="symbol" id="symbol">
<option value="" selected="selected">Insert Symbol</option>
<option value="acute">Acute Symbol (&acute;)</option>

<option value="amp">Ampersand (&amp;)</option>
<option value="apos">Apostrophe (')</option>
<option value="bar">Vertical Bar (&brvbar;)</option>
<option value="quo">Quotation (&quot;)</option>
<option value="br">Line Break (&lt;br&gt;)</option>
<option value="nbsp">NBSP (&amp;nbsp;)</option>

<option value="copy">Copyright (&copy;)</option>
<option value="middot">Middot (&middot;)</option>
<option value="tm">Trademark (™)</option>
<option value="reg">Registration Mark (&reg;)</option>
<option value="divide">Divide (&divide;)</option>
<option value="multiply">Multiplication (&times;)</option>

<option value="plusminus">Plus or Minus (&plusmn;)</option>
<option value="deg">Degree (&deg;)</option>
<option value="super1">Superscript 1 (¹)</option>
<option value="super2">Superscript 2 (²)</option>
<option value="super3">Superscript 3 (³)</option>
<option value="lt">Less Than (&lt;)</option>

<option value="gt">Greater Than (&gt;)</option>
<option value="para">Paragraph Marker (&para;)</option>
<option value="quarter">Fractional Quarter (¼)</option>
<option value="half">Fractional Half (½)</option>
<option value="threequart">Fractional Threequarter (¾) </option>
<option value="micro">Micro (&micro;)</option>

<option value="invexc">Inverted Exclamation (&iexcl;)</option>
<option value="invquest">Inverted Question Mark (&iquest;)</option>
<option value="laquo">Left Quotation (&laquo;)</option>
<option value="raquo">Right Quotation (&raquo;)</option>
<option value="macro">Spacing Macron (&macr;)</option>
<option value="negate">Negation (&not;)</option>

<option value="ordf">Feminine Ordinal (&ordf;)</option>
<option value="ordm">Masculine Ordinal (&ordm;)</option>
<option value="poweredby">Powered By</option>
<option value="curr">Currency (&curren;)</option>
<option value="pound">GB Pound (£)</option>
<option value="dollar">Dollar ($)</option>
<option value="cent">Cent (&cent;)</option>

<option value="yen">Yen (&yen;)</option>
<option value="sd">Spacing Diaeresis (&uml;)</option>
<option value="sect">Section (&sect;)</option>
<option value="cedill">Spacing Cedilla (&cedil;)</option>
</select>
<select tabIndex="-1" onchange="setElement(this.options[this.selectedIndex].value)" name="element" id="element">
<option value="" selected>Insert Element</option>
<option value="both">Clearing div (both)</option>

<option value="left">Clearing div (left)</option>
<option value="right">Clearing div (right)</option>
<option value="p">Paragraph</option>
<option value="div">Division</option>
</select>

**elf2002** · 10-18-2010, 06:59 PM

On the furst look this is it.
Thanx

PS
I hope, it is supported by all types of browsers.

**mushget** · 10-18-2010, 11:36 PM

Your need html editor?

**kristinajosep** · 10-25-2010, 02:40 AM

These all information which you share over here is great. For HTML code there are some of things are in formatting text script in all these there are so many things which is good to use it.