|
|
|
|
![]() ![]() |
Nov 18 2007, 06:51 PM
Post
#1
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 275 Joined: 5-October 07 From: Random Places Member No.: 51,171 ![]() |
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.
You will need
Features of Editor
A Few Bad Features
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 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. CODE <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. CODE <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. This post has been edited by coolcat50: Nov 18 2007, 08:29 PM |
|
|
|
Nov 18 2007, 08:30 PM
Post
#2
|
|
|
Privileged Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 524 Joined: 13-October 06 From: Alberta, Canada Member No.: 31,584 |
WOW that is really good and useful... I'll have to see if I can use it anywhere for my site...
|
|
|
|
Nov 18 2007, 08:54 PM
Post
#3
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 403 Joined: 14-October 07 From: ERROR 404 Member No.: 51,575 |
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. |
|
|
|
Nov 18 2007, 09:01 PM
Post
#4
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 275 Joined: 5-October 07 From: Random Places Member No.: 51,171 ![]() |
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.
|
|
|
|
![]() ![]() |
Similar Topics
|
Lo-Fi Version | Time is now: 20th July 2008 - 08:23 PM |