HTML Rich Text Area


	Home
	Requirements
	Whats New
	Features
	Architechure
	Security
	License Agreement


	Evaluation


	Deployment


	Using
	Interface
	ASP
	Submitting
	Customization
	Settings
	Programming
	DB Integration
	Image Library
	Custom Buttons
	Presentation


	Contact Us

Custom Buttons

It is possible to add your own functionality to the HTML Rich Text Area. Three custom buttons have been provided but more can be readily added.

In the /inc/HTMLRichTextAreaFactorySettings.js file refer to the last few lines.

// Declare the details of the user defined custom button #1
	var SHOWCUSTOMBUTTON1 = false;
	var CUSTOMBUTTON1CALLBACKTOOLTIP = "Custom button 1 tool tip";	
	var CUSTOMBUTTON1CALLBACK = "CustomButton1Handler";
	var CUSTOMBUTTON1IMAGE = "F1.gif";

// Example
	function CustomButton1Handler(iframeId)
	{
		// Get a reference to the document object being edited
		var objEditor = GetEditorRef(iframeId);
		alert('This will return the HTML');
		alert(objEditor.body.innerHTML);
	}
	
// Declare the details of the user defined custom button #2
	var SHOWCUSTOMBUTTON2 = false;
	var CUSTOMBUTTON2CALLBACKTOOLTIP = "Custom button 2 tool tip";	
	var CUSTOMBUTTON2CALLBACK = "CustomButton2Handler";
	var CUSTOMBUTTON2IMAGE = "F2.gif";

// Example
	function CustomButton2Handler(iframeId)
	{
		// Get a reference to the document object being edited
		var objEditor = GetEditorRef(iframeId);
		
		alert('This will insert text into the document');
		PutHTML(iframeId, "<b>Just Inserted</b>")
	}

// Declare the details of the user defined custom button #3
	var SHOWCUSTOMBUTTON3 = false;
	var CUSTOMBUTTON3CALLBACKTOOLTIP = "Custom button 3 tool tip";	
	var CUSTOMBUTTON3CALLBACK = "CustomButton3Handler";
	var CUSTOMBUTTON3IMAGE = "F3.gif";

// Example
	function CustomButton3Handler(iframeId)
	{
		// Get a reference to the document object being edited
		var objEditor = GetEditorRef(iframeId);
	
		alert('This will clear the web page');
		objEditor.body.innerHTML = "";
	}

By setting SHOWCUSTOMBUTTON1, SHOWCUSTOMBUTTON2 or SHOWCUSTOMBUTTON3 to true the custom buttons will appear. The tooltip, image and javascription functions can be changed by editing the CUSTOMBUTTONxCALLBACKTOOLTIP, CUSTOMBUTTONxIMAGE, CUSTOMBUTTONxCALLBACK variables respectively.

If you create a new image place it in the /inc/HTMLRTAImages/ directory. The image should be in GIF format that is 23 pixels wide and 22 pixels high.

Custom handlers have already been written to demonstrate how to interface with the HTML. The event handlers need to accept one string variable that identifies the HTML Rich Text Area. Within the event handler call var objEditor = GetEditorRef(iframeId);. This will return the document object of the HTML being edited. objEditor.body.innerHTML will therefore access the raw HTML of the Rich Text Area.

To edit the HTML programmatically, call PutHTML(iframeId, [HTML]);