Making a code editor in a webpage

One of the big goals that I had over the winter break was to finish the upgrade of the Plymouth AMS website. Is started writing in in xml with a xsl style sheet. Although this is good for simper websites that I am going to be around to keep it up, because this is not the case I had to think of something else. After talking with a more experienced web programer in a workshop, I decided to re-write it in php as a web app. Thus after logging in you could edit the basic html on the site, yet this would leave the more advanced layout out of it. Perfect for what the AMS group will be doing. Ether way it is a huge advance from the front page created website they had before.

All that it will requite is a simple html/text editor written in php. This turned out to be a little more complex then I thought it would be. I started with a simple text area that filled the width of the page. Looks good. But after trying to edit 2 lines I got really annoyed. NO TABS, there was no way to tab, and a programer like me lives for code structure. So now I needed tabs... By default web pages use the tab key to go from one field to another not to add a tab character, luckily after some searching I found this very handy java script that would add tabs to text areas. It works very well, and now I have my beloved tabs again.

So first problem fixed, now another rears its head. This text area allows html code, which tends to have quotes here and there, the Mysql calls to the database I am storing the text in also has both double and single quotes. This does not mix well. Basically once it concatenates the strings together the quoted sections get completely screwed up by the new quotes added to my query. This must be a common occurrence so off I went searching for php functions that would take care of it.

As expected there was a function called htmlentities, basically it converts all applicable characters to HTML entities, aka the escaped form. This takes care of the quote problem, I just save this to the database and edit it when needed, as a bonus the text area field accepts these characters and shows them as they should be with out any problems. Thus there is no need to convert them back when editing the text, only when displaying them in html. See example below...

$query_string="UPDATE `***` SET `***` = '".htmlentities(stripslashes($_POST['***']),ENT_QUOTES)."' WHERE `***` = '***' LIMIT 1";

When displaying the html code from the database it is a little more complicated. First off I wanted this to be a hybrid text/html editor, this when you line return, it puts a <br /> just like a text editor would. To do this use the handy nl2br function, it converts the /n new line characters to <br />. Which looks really good, except that it does every line return, I only want non code style returns so then follow this by str_replace which replaces every "><br />" with just a ">" Thus removing all of the non needed breaks.

The last part is html_entity_decode which convert all HTML entities to their applicable characters. Thus the html is back to normal. You put this all together and it does the job very well.

$message = mysql_fetch_array($result, MYSQL_ASSOC);
$mconverted = nl2br( html_entity_decode($message['text']) ); // Convert back to html code
$removes = str_replace("><br />",">",$mconverted ); // Remove extra br due to code style
$xtpl->assign('message', $removes);