Forms plugin for TineMCE, by Jason McInerney, 2007.
A work in progress, but fulfills a great need for the TinyMCE community.
INSTALLATION:
Locate your tinyMCE.init() initialization function.
Add "jmform" to your plugins control and the individual buttons (see below) in the theme_advanced_buttons control (or wherever you indicate what buttons).
This will produce five buttons:
Insert/edit form
Insert/edit input elements
Insert/edit select elements
Insert/edit textarea elements
Delete form.
You can optionally insert each icon individually. To do this replace "jmformcontrols" in the buttons control with one or more of the following:
"jmform,jmform_insert_input,jmform_insert_select,jmform_insert_textarea,jmform_delete"
This might help if you wanted to limit end user access to one or more of the buttons.
To enable form HTML tags you must include the following in your tinyMCE.init() for "extended_valid_elements" and probably to "valid_elements" in your main tiny_mce.js file. If you add more attributes in the code, don't forget to add them here, too.
form[name|id|action|method|enctype|accept-charset|onsubmit|onreset|target],input[id|name|type|value|size|maxlength|checked|accept|src|width|height|disabled|readonly|tabindex|accesskey|onfocus|onblur|onchange|onselect|onclick|onkeyup|onkeydown|required|style],textarea[id|name|rows|cols|maxlength|disabled|readonly|tabindex|accesskey|onfocus|onblur|onchange|onselect|onclick|onkeyup|onkeydown|required|style],option[name|id|value|selected|style],select[id|name|type|value|size|maxlength|checked|width|height|disabled|readonly|tabindex|accesskey|onfocus|onblur|onchange|onselect|onclick|multiple|style]
If you do wish to limit end user access to certain form elements, be sure to remove the related tags from your "extended_valid_elements" and/or "valid_elements".
You might want to add onkeyup|onkeydown|maxlength to your init() and to your tiny_mce.js files for this to work.
Word Count requires that you add a call to the function in the onchange and onkeyup attributes of the textarea or input text box and a separate div element or text box for updating the number of words.
For example, if my form has the name PublishingForm, and I created a div with the id PublishingCount, and I wanted a maximum of 600 words, I would add the following to my textarea onchange and onkeyup attributes:
WordCount('PublishingForm',this,'PublishingCount',600);
So the full code for the textarea and output div ends up as (after using JMForms to edit and after TinyMCE processes it):
and
, Firefox 2.0.02 for example), you should add the following to your TinyMCE.init to avoid any issues with forms: force_br_newlines : true, force_p_newlines : false, Otherwise each newline could break or re-insert your form (the latter is odd behavior, perhaps a TinyMCE bug). You might find this makes editing much better overall, too, since it won't double-space. AUTO-VALIDATION: If you insert a form with the auto-validation checked, be sure you check "required" in the "advanced" tab for each element you wish the form to verify. Also, on your page that ultimately displays the form you must include the jmformproc.js file, in a manner similar to the way you include the tinymce.js file. For example: Feel free to modify the validation script to suit your needs (e.g. add email format verification, password 1 & 2 comparison, etc.). Enjoy!