Welcome Guest ( Log In | Register)



 
Reply to this topicStart new topic
> Create A Simple Html Editor With Php And Javascript
coolcat50
post 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
Spam Patrol



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
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
&lt;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
Go to the top of the page
 
+Quote Post
KansukeKojima
post 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...
Go to the top of the page
 
+Quote Post
Liam_CF
post 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.
Go to the top of the page
 
+Quote Post
coolcat50
post 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
Spam Patrol



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.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. HTML tags and examples(37)
  2. Image Preloader With Progress Bar Status(22)
  3. Basic Html (for Us Kids)(23)
  4. Css And Javascript Combined For Dynamic Layout(9)
  5. Image Rollovers In Javascript(11)
  6. Javascript Framework - A Shortcut Javascript(3)
  7. Integrating Html And Css Part 1(5)
  8. Fast Template Design In Joomla Cms(2)
  9. Document Type Declarations(0)
  10. Simple Scripts In Html And Javascript(7)
  11. How To Make A Simple File Based Shoutbox Using Php And Html(8)
  12. Do You Want To Use Php Code In Your Html Pages?(9)
  13. Javascript Scroll Bar(13)
  14. Spice Up Your Forms(11)
  15. Mootools - My Favourite Javascript Library(3)
  1. Html Legend(9)
  2. Creating Navigation For Html Websites(12)
  3. Want-to-start Html Tutorials(2)
  4. Html Bdo...(13)
  5. How To Use Command Prompt As A Text Editor(6)
  6. Html Span(7)
  7. Cakephp On Ubuntu(0)
  8. [php] Clean Code Functions(5)
  9. Simple Javascript And Password System(6)
  10. How To: Html Tables.(8)
  11. Make A Moderately-secure Password System Using Javascript(4)
  12. Lesser Known Useful Javascript Features(2)
  13. Add Flashing Inbox To Invisionfree Forum(0)


 



- Lo-Fi Version Time is now: 20th July 2008 - 08:23 PM