We are using Codepress for the administrator application within our custom CMS. Codepress is a web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it’s being typed in the browser.
We have been very happy with it so far except one little hiccup that we came across when we were integrating it into our CMS: the forms where Codepress was hooked up to were not submitting any entered content for the Codepress enabled form fields. The values were not just set to empty strings in the POST, they were actually missing.
For example, lets say we have a form with the following elements:
- Name – text field named “name”
- Description – textarea with Codepress functionality enabled named “description”
- Submit – button
After entering any content into Name and Description and submitting the form, POST will only have one form related variable in it – “name”. As I mentioned before the “description” variable is not just empty, it isn’t not included in the POST array at all. And here ‘s why:
When Codepress gets hooked up to a form’s textarea element, it hides it and creates an iframe that supports all of the bells and whistles like syntax highlighting etc. Not only does it hide the original textarea but it also modifies DOM and removes any textarea’s ID so it does not get added to a form submission via POST. This explains why the textarea content is fully excluded from the POST.
To fix this you need to tell the form to copy the value from Codepress’s iframe (that the user types in) into the original form’s textarea. The best time to do this, is just before the form gets submitted by assigning this action to the form’s submit button on-click event, for example.
Here is the example of how to do it:
<textarea id="code" onclick="code.toggleEditor()" name="code" ... </textarea>
<input type="submit" onclick="code.toggleEditor()" value="Submit"/>
Note the values of the id and name attributes of the textarea. They are set to “code” so we can reference the textarea by “code” when making a “code.toggleEditor()” call.
You can download Codepress from its dedicated site at sourceforge.net.