Loading...


bookmark - Create A Simple Html Editor With Php And Javascript

Create A Simple Html Editor With Php And Javascript

 
 Discussion by coolcat50 with 4 Replies.
 Last Update: December 10, 2011, 9:32 am
 
bookmark - Create A Simple Html Editor With Php And Javascript  
Quickly Post to Create A Simple Html Editor With Php And Javascript w/o signup Share Info about Create A Simple Html Editor With Php And Javascript using Facebook, Twitter etc. email your friend about Create A Simple Html Editor With Php And Javascript Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print

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.

   Sun Nov 18, 2007    Reply         

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

   Sun Nov 18, 2007    Reply         

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.

   Sun Nov 18, 2007    Reply         


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.

   Sun Nov 18, 2007    Reply         

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

   Sat Dec 10, 2011    Reply         

Quickly Post to Create A Simple Html Editor With Php And Javascript w/o signup Share Info about Create A Simple Html Editor With Php And Javascript using Facebook, Twitter etc. email your friend about Create A Simple Html Editor With Php And Javascript Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print

Similar Topics:

Best Php And Mysql Editor For Noobs

hi there guys, from my previous posting, i am a noob in php and mysql programming. I want to know if there are any php and mysql editors which are best for me as a noob. i appreciate your kindness ...more

   06-May-2008    Reply         

Htaccess - Making Html To Parse Php

I came across an interesting trick while I was trying to make multiple domains to be parked but each would have different index page. (See my previous post). You don't have to rename file_as.html to file_as.php. You can eliminate the hassle of losing search engine link. There's ...more

   22-Dec-2009    Reply         

How To Create A Good Website With H...

Hi All, As i signed up today I thought that I should help people on making there websites better and more suffisticatedToday I am just going to show you how to make a very simple website. But first I shall show you what the main tags you will be using meen. You will be usin ...more

   04-May-2010    Reply         

Change Your Computer Password Change Your Computer Password   Change Your Computer Password Change Your Computer Password (6) (10) Tricks With Php Variables   Tricks With Php Variables