Element plugins are a bunch of files that define an element in the form “textbox, textarea, captcha, etc”, Typically an element plugin is composed of 5 files.

• An XML files that defines meta information about the element like its name, description, default values, parameters , storage requirements,etc.
• A Javascript file containing a class that defines how the elements behaves in the WYSIWYG editor environment.
• A PHP file that “among other things” controls how the element behaves on the frontend (Rendering and validation)
• A 100×32 png image, the draggable icon for that element in the WYSIWYG editor environment.
• A language file per language.

We'll be dissecting the textbox element for this example, Check the comments for more details TODO: Publish an XSD

<?xml version="1.0" encoding="utf-8"?>
<!--
* XML config file for textbox plugin
*
* @version $Id: textbox.xml 29 2008-12-09 07:13:01Z dr_drsh $
* @package Joomla
* @subpackage JForms
* @copyright Copyright (C) 2008 Mostafa Muhammad. All rights reserved.
* @license GNU/GPL
-->
 
<JFormPlugin 
type='element' <!-- element or stroage (for now) -->
limit='0'  <!-- the maximum number of elements of this type to be elements allowed per form , 0 for no limit -->
group='basic' <!-- the category under which to list this element (in the wysiwyg editor ) -->
>
 
<name>textbox</name> <!-- Unique name , should match the folder name -->
<description>TEXTBOXPLUGINDESCRIPTION</description> <!-- Just description , I'm using this place holder to allow translation -->
<files>
	<file type='jsEntryPoint'>textbox.js</file> <!-- The javascript file name -->
	<file type='phpEntryPoint'>textbox.php</file> <!-- the php filename -->
	<file type='icon'>textbox.png</file><!-- the icon -->
</files>
 
<!-- 
 To better understand how parameters work, try to play around with values while having a WYSIWYG form editor window open, refresh to see how things change.
-->
<parameters>
	<param
 name="label" <!-- name of the parameters , used for reference in code and db -->
 control="textbox" <!-- defines what input control is used to represent this parameter in the WYSIWYG Editor -->
 label="Label" <!-- Used to label that control --> 
 default='Textbox' <!-- default value for that parameter -->
 valueType='string' <!-- How will this parameter be stored? as a string or number -->
 translate='1' <!-- allows translation of this parameter using JoomFish -->
 />
	<param name="maxLength" label="Maximum length" control="textbox" default='50' valueType='integer' translate='0' />
	<param name="required" label="Required" control="checkbox" default='0' valueType='integer' translate='0' />
	<param name="isUserEmail" label="User E-mail?" control="checkbox" default='0' valueType='integer' translate='0' />
 
	<param name="validation" control="list" label="Validation" default='' valueType='string' translate='0'>
		<option value='NoValidation'>No validation</option>
		<option value='Email'>E-mail</option>
		<option value='Other'>Other (Specify)</option>
	</param>
	<param name="altValidation" label="Other validation rule" control="textbox" default='' valueType='string' translate='0' />
 
	<param name="lh" control="none" valueType='integer' default='16' translate='0' />
	<param name="lw" control="none" valueType='integer' default='70' translate='0' />
	<param name="ch" control="none" valueType='integer' default='16' translate='0' />
	<param name="cw" control="none" valueType='integer' default='200' translate='0' />	
 
        <!-- The hash parameter is mandatory for every element -->
	<param name="hash" control="none" valueType='string' default='' translate='0' />
 
	<param name="defaultValue" control="none" valueType='string' default='' translate='1' />
 
 
 
</parameters>
<!-- 
Storage requirements 
 
This field requires a textfield with maximum length of 254 characters
 
requirefs indicates whether or not this element has "File system" requirements "e.g. Upload form element", clearly this element doesn't
 
-->
<storage type='textfield' size='254' requirefs='false' />
</JFormPlugin>