Create A Simple Html Editor With Php And Javascript

[coolcat50 0]

Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML tags. Before we start:

 

You should have basic knowledge of these languages.

HTML/XHTML

Javascript

PHP

You will need

Ability to use filesystem functions.

Chmodding abilities

Features of Editor

Online

PHP safe

Full HTML support

A Few Bad Features

Can only create new documents or overwrite

Fairly unsafe

Now we are ready to begin.

 

The PHP Script

This will be our PHP script that we will use to make the file.

 

Make a file called save.php

 

Here is the code

<?php//First we need to create a function to take out phpfunction clearPHP(){//First we must get the content from the form.$data=$_POST['contents'];//Ok we have a variable containing the contents.//Now we need to replace all php tags$data=str_replace("<?php","<!--",$data);//We are going to package all php as html comments$data=str_replace("?>","-->",$data);//Our main function is finished}//Ok we need to start our file creator$fName=$_POST['file'];$fContents=clearPHP();//We have our information ready to be implanted$file=fopen($fName,'w+');//We have created the file//Now we need to write to the filechmod($file,0777);fwrite($file,$fContents);//Ok close the filefclose($file);?>

That would be about it for our file creating system.

 

The Form

The Javascript

Create a new file called editor.php

This is our Javascript we need in the head tag of our editor. I am just going to demonstrate the bold, italic, underline, and anchor tags.

<script type="text/javascript">//We need to start our bold functionfunction addBold(){var current=document.editor.contents.value//Next add a bold tagdocument.editor.contents.value=current+"<b></b>"}//Now add our italic functionfunction addItalic(){var current=document.editor.contents.valuedocument.editor.contents.value=current+"<i></i>"}//Now our underline functionfunction addUnder(){var current=document.editor.contents.valuedocument.editor.contents.value=current+"<u></u>"}//Now our anchor tag//This is more complex than the othersfunction addLink(){var link=prompt("URL of Link","http://")var title=prompt("Name of Link",link)//We have the values for our tag//Lets add the tagvar current=document.editor.contents.valuedocument.editor.contents.value=current+'<a href="'+link+'">'+title+'</a>'}//That ends the javascript</script>

That is our javascript that will add the tags.

Now we need the form.

 

The Form

Here is the code for our form. We will use buttons to add the Javascript functions.

<form name="editor" action="save.php" method="post"><input type="button" value="Bold" onclick="addBold()" /><input type="button" value="Italic" onclick="addItalic()" /><input type="button" value="Underline" onclick="addUnderline()" /><input type="button" value="Link" onclick="addLink()" /><br /><textarea name="contents" wrap="false" rows="25" columns="20"></textarea><br /><input type="submit" value="Save" /></form>

That gives us our form and now we are done. Style it and you have yourself a simple HTML editor.

 

I hope this tutorial helped you and thank you for reading.

Edited November 18, 2007 by coolcat50 (see edit history)

[KansukeKojima 0]

WOW that is really good and useful... I'll have to see if I can use it anywhere for my site...

[Liam_CF 0]

Can you just make this program available as download so that I can download it as it sounds quite good, but I can't be bothered to make it.Thanks a lot mate.

[coolcat50 0]

Sorry Liam, I use my Nintendo Wii for Internet at the moment, and I can't put stufff up for download or anything like that. You could always copy & paste it, but with that I would want some credit.

[iGuest 3]

Works quite well. I'm slowly working towards changing this script into a Kindle eBook creator (xhtml -> .mobi)