/* * FORUM Rich Text Editor (2008062500) * Author: Julian Smythe * Support: mailto:tehsausage@gmail.com * Created: 6th May 2008 * Last Updated: 25th Jun 2008 * Tested On: Firefox 2/3, Opera 9.2/9.5, IE 6/7, Safari 2/3.1 **********************************************************************/ function RTE(id,css){ this.html = ''; this.id = id; this.frame = undefined; this.textframe = undefined; this.html = '
'; this.framedoc = undefined; this.IE = (navigator.appName == "Microsoft Internet Explorer"); this.Opera = (navigator.appName == "Opera"); if (css) this.css = css; else this.css = './style.css'; this.Build = function(into){ into.innerHTML = ''; this.frame = this.CreateInternalFrame(into); this.textframe = this.CreateHiddenInput(into); this.EnableDesignMode(this.frame); if (!this.IE && !this.Opera) this.framedoc.execCommand('styleWithCSS',false,false); } this.Focus = function(){ // FIXME (Safari, Firefox(?)) this.frame.focus(); } this.Update = function(){ this.textframe.value = this.framedoc.body.innerHTML; } this.CreateHiddenInput = function(into){ var textframe = document.createElement('textarea'); textframe.name = this.id; textframe.style.display = 'none'; into.appendChild(textframe); return textframe; } this.CreateInternalFrame = function(into){ var frame = document.createElement('iframe'); frame.setAttribute('contentEditable',true); // not needed? frame.id = this.id; frame.className = 'rte-frame'; into.appendChild(frame); if (frame.contentDocument) this.framedoc = frame.contentDocument; else if (frame.contentWindow && frame.contentWindow.document) this.framedoc = frame.contentWindow.document; else if (frame.document) this.framedoc = frame.document; else alert("Could not find frame document"); this.framedoc.open('text/html','replace'); this.framedoc.write('\ \ '+this.html+'\ '); this.framedoc.close(); return frame; } this.EnableDesignMode = function(){ this.framedoc.designMode = 'On'; } this.DisableDesignMode = function(){ this.framedoc.designMode = 'Off'; } this.GetSelected = function(){ if (this.framedoc.selection) return this.framedoc.selection.createRange().text.toString(); else if (this.framedoc.getSelection) return this.framedoc.getSelection(); else alert("Could not get selected text"); } } function RTE_Menu(rte,id){ this.rte = rte; this.id = id; this.IE = (navigator.appName == "Microsoft Internet Explorer"); this.Opera = (navigator.appName == "Opera"); this.buttons = new Array(); this.buttons['bold'] = true; this.buttons['createLink'] = true; this.buttons['decreaseFontSize'] = !this.IE; this.buttons['increaseFontSize'] = !this.IE; this.buttons['insertHorizontalRule'] = true; this.buttons['insertImage'] = true; this.buttons['insertOrderedList'] = true; this.buttons['insertUnorderedList'] = true; this.buttons['indent'] = true; this.buttons['italic'] = true; this.buttons['justifyLeft'] = true; this.buttons['justifyRight'] = true; this.buttons['justifyCenter'] = true; this.buttons['justifyFull'] = true; this.buttons['outdent'] = true; this.buttons['removeFormat'] = true; this.buttons['strikethrough'] = true; this.buttons['subscript'] = true; this.buttons['superscript'] = true; this.buttons['underline'] = true; this.buttons['unlink'] = true; this.buttons['style'] = true; this.buttons['font'] = true; this.buttons['size'] = true; this.styles = new Array(); this.styles['Paragraph'] = ['

','']; this.styles['Heading 1'] = ['

','font-size:2em;font-weight:bold;']; this.styles['Heading 2'] = ['

','font-size:1.5em;font-weight:bold;']; this.styles['Heading 3'] = ['

','font-size:1.2em;font-weight:bold;']; this.styles['Heading 4'] = ['

','font-size:1em;font-weight:bold;']; this.styles['Heading 5'] = ['

','font-size:0.8em;font-weight:bold;']; this.styles['Heading 6'] = ['

','font-size:0.7em;font-weight:bold;']; this.styles['Preformatted'] = ['

','font-family:monospace;'];

	this.fonts = ['Arial','Courier New','Times New Roman','Tahoma','Verdana'];

	this.sizes = new Array;
	this.sizes['1'] = ['1','font-size:0.6em'];
	this.sizes['2'] = ['2','font-size:0.8em'];
	this.sizes['3'] = ['3','font-size:0.9em'];
	this.sizes['4'] = ['4','font-size:1em'];
	this.sizes['5'] = ['5','font-size:1.5em'];
	this.sizes['6'] = ['6','font-size:2em'];
	this.sizes['7'] = ['7','font-size:3em'];

	this.Build = function(into){
		var top = document.createElement('td');
		var bottom = document.createElement('td');
		
		var table = document.createElement('table');
		table.className = 'rte-menu';
		var tbody = document.createElement('tbody');
		table.appendChild(tbody);
		var top_row = document.createElement('tr');
		var bottom_row = document.createElement('tr');
		tbody.appendChild(top_row);
		tbody.appendChild(bottom_row);
		top_row.appendChild(top);
		bottom_row.appendChild(bottom);
		
		into.innerHTML = '';
		into.appendChild(table);

		this.CreateStyleBox(top);
		this.CreateFontBox(top);
		this.CreateSizeBox(top);

		this.CreateButton(top,'big.gif','increaseFontSize','Increase Font Size');
		this.CreateButton(top,'small.gif','decreaseFontSize','Decrease Font Size');

		this.CreateButton(bottom,'bold.gif','bold','Bold');
		this.CreateButton(bottom,'italic.gif','italic','Italic');
		this.CreateButton(bottom,'underline.gif','underline','Underline');
		this.CreateButton(bottom,'strikethrough.gif','strikethrough','Strikethrough');
		this.CreateButton(bottom,'superscript.gif','superscript','Superscript');
		this.CreateButton(bottom,'subscript.gif','subscript','Subscript');

		this.CreateButton(bottom,'align_left.gif','justifyLeft','Align Left');
		this.CreateButton(bottom,'align_center.gif','justifyCenter','Align Center');
		this.CreateButton(bottom,'align_right.gif','justifyRight','Align Right');
		this.CreateButton(bottom,'justify.gif','justifyFull','Justify');

		this.CreateButton(bottom,'hr.gif','insertHorizontalRule','Horizontal Rule');

		this.CreateButton(bottom,'ordered_list.gif','insertOrderedList','Ordered List');
		this.CreateButton(bottom,'unordered_list.gif','insertUnorderedList','Unordered List');

		this.CreateButton(bottom,'unindent.gif','outdent','Unindent');
		this.CreateButton(bottom,'indent.gif','indent','Indent');

		//this.CreateTextColorButton(bottom);
		//this.CreateBackColorButton(bottom);

		this.CreateLinkButton(bottom,'hyperlink.gif','Create Link');
		this.CreateButton(bottom,'unlink.gif','unlink','Remove Link');

		this.CreateImageButton(bottom,'image.gif','Insert Image');

		this.CreateButton(bottom,'removeformat.gif','removeFormat','Remove Formatting');

	}
	this.ClickButtonEvent = function(e){
		if (!e)
			e = window.event
		if (e.target)
			var t = e.target;
		else if (e.srcElement)
			var t = e.srcElement;
		if (t.xarg)
			t.xrtemenu.Exec(t.xcommand,t.xarg);
		else
			t.xrtemenu.Exec(t.xcommand);
	}
	this.ClickBoxEvent = function(e){
		if (!e)
			e = window.event
		if (e.target)
			var t = e.target;
		else if (e.srcElement)
			var t = e.srcElement;
		switch (t.xtype){
			case 'size':
				t.xrtemenu.Exec('fontSize',t.value);
				break;
			case 'font':
				t.xrtemenu.Exec('fontName',t.xrtemenu.fonts[t.selectedIndex-1]);
				break;
			case 'style':
				t.xrtemenu.Exec('formatBlock',t.value);
				break;
		}
		t.selectedIndex = 0;
	}
	this.ClickLinkEvent = function(e){
		if (!e)
			e = window.event
		if (e.target)
			var t = e.target;
		else if (e.srcElement)
			var t = e.srcElement;
		var url = prompt("Enter URL (including http://)");
		if (url)
			t.xrtemenu.Exec('createLink',url);
	}
	this.ClickImageEvent = function(e){
		if (!e)
			e = window.event
		if (e.target)
			var t = e.target;
		else if (e.srcElement)
			var t = e.srcElement;
		var url = prompt("Enter Image URL (including http://)");
		if (url)
			t.xrtemenu.Exec('insertImage',url);
	}
	this.Exec = function(command,arg){
		rte.Focus();
		rte.framedoc.execCommand(command,false,arg);
		rte.Focus();
	}
	this.CreateButton = function(into,imageurl,command,name,arg){
		if (!this.buttons[command])
			return false;
		var button = document.createElement('img');
		button.className = 'rte-button';
		button.style.cssFloat = button.style.styleFloat ='left';
		button.xrtemenu = this;
		button.xcommand = command;
		if (arg)
			button.xarg = arg;
		button.width = '25';
		button.height = '24';
		button.src = './pub/images/'+imageurl;
		button.alt = button.title = name;
		button.onclick = this.ClickButtonEvent;
		into.appendChild(button);
		return true;
	}
	this.CreateStyleBox = function(into){
		if (!this.buttons['style'])
			return false;
		var box = document.createElement('select');
		box.xtype = 'style';
		box.xrtemenu = this;
		box.onchange = this.ClickBoxEvent;
		box.className = 'rte-box rte-style-box';
		box.style.cssFloat = 'left';
		box.style.styleFloat = 'left';	

		var option = document.createElement('option');
		option.innerText = option.text = "[Style]";
		box.appendChild(option);

		for (var i in this.styles){
			var option = document.createElement('option');
			option.innerText = option.text = i;
			option.value = this.styles[i][0];
			if (this.styles[i][1]){
				option.style.cssText = this.styles[i][1];
			}
			box.appendChild(option);
		}
		into.appendChild(box);
	}
	this.CreateFontBox = function(into){
		if (!this.buttons['font'])
			return false;
		var box = document.createElement('select');
		box.xtype = 'font';
		box.xrtemenu = this;
		box.onchange = this.ClickBoxEvent;
		box.className = 'rte-box rte-font-box';
		box.style.cssFloat = 'left';
		box.style.styleFloat = 'left';		

		var option = document.createElement('option');
		option.text = option.innerText = "[Font]";
		box.appendChild(option);

		for (var i in this.fonts){
			var option = document.createElement('option');
			option.text = option.innerText = this.fonts[i];
			option.value = this.fonts[i];
			option.style.fontFamily = this.fonts[i];
			box.appendChild(option);
		}
		into.appendChild(box);
	}
	this.CreateSizeBox = function(into){
		if (!this.buttons['size'])
			return false;
		var box = document.createElement('select');
		box.xtype = 'size';
		box.xrtemenu = this;
		box.onchange = this.ClickBoxEvent;
		box.className = 'rte-box rte-size-box';
		box.style.cssFloat = 'left';
		box.style.styleFloat = 'left';

		var option = document.createElement('option');
		option.text = option.innerText = "[Size]";
		box.appendChild(option);

		for (var i in this.sizes){
			var option = document.createElement('option');
			option.text = option.innerText = i;
			option.value = this.sizes[i][0];
			if (this.sizes[i][1])
				option.style.cssText = this.sizes[i][1];
			box.appendChild(option);
		}
		into.appendChild(box);
	}
	this.CreateLinkButton = function(into,imageurl,name){
		if (!this.buttons['createLink'])
			return false;
		var button = document.createElement('img');
		button.className = 'rte-button';
		button.style.cssFloat = button.style.styleFloat ='left';
		button.xrtemenu = this;
		button.onclick = this.ClickLinkEvent;
		button.width = '25';
		button.height = '24';
		button.src = './pub/images/'+imageurl;
		button.alt = button.title = name;
		into.appendChild(button);
		return true;
	}
	this.CreateImageButton = function(into,imageurl,name){
		if (!this.buttons['insertImage'])
			return false;
		var button = document.createElement('img');
		button.className = 'rte-button';
		button.style.cssFloat = button.style.styleFloat ='left';
		button.xrtemenu = this;
		button.onclick = this.ClickImageEvent;
		button.width = '25';
		button.height = '24';
		button.src = './pub/images/'+imageurl;
		button.alt = button.title = name;
		into.appendChild(button);
		return true;
	}
}