, Please 
0
You should have basic knowledge of these languages.
- HTML/XHTML
- Javascript
- PHP
- Ability to use filesystem functions.
- Chmodding abilities
- Online
- PHP safe
- Full HTML support
- Can only create new documents or overwrite
- Fairly unsafe
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 php
function 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 file
chmod($file,0777);
fwrite($file,$fContents);
//Ok close the file
fclose($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 function
function addBold()
{
var current=document.editor.contents.value
//Next add a bold tag
document.editor.contents.value=current+"<b></b>"
}
//Now add our italic function
function addItalic()
{
var current=document.editor.contents.value
document.editor.contents.value=current+"<i></i>"
}
//Now our underline function
function addUnder()
{
var current=document.editor.contents.value
document.editor.contents.value=current+"<u></u>"
}
//Now our anchor tag
//This is more complex than the others
function 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 tag
var current=document.editor.contents.value
document.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 by coolcat50, 18 November 2007 - 08:29 PM.
