Nov 21, 2009

Create A Simple Html Editor With Php And Javascript

free web hosting
Open Discussion > MODERATED AREA > Tutorials

Create A Simple Html Editor With Php And Javascript

coolcat50
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.

 

 

 


Comment/Reply (w/o sign-up)

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

Comment/Reply (w/o sign-up)

Liam_CF
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.

Comment/Reply (w/o sign-up)

coolcat50
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.

Comment/Reply (w/o sign-up)



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : create, simple, html, editor, php, javascript

  1. Create Dynamic Html/php Pages Using Simple Vb.net Code
    Taking your application data, and creating a webpage for others to vie (1)
  2. Add Flashing Inbox To Invisionfree Forum
    Html code for invsiionfree!! (2)
    Do you find it annoying when you are on your invisionfree forum, and you get a new message, and it
    ends up taking you 5 minutes to notice? This code makes the inbox link flash bold red saying how
    many messages you have. In version 1 the word inbox stays the same, and doesnt change at all (for
    Example this is flashing: Inbox (2) In version 2 (the second code) the word inbox changes to
    messages (constantly, so that if you have none, it says messages (0) instead of inbox (0). It still
    flashes Red Put the following In the Header and Body Section (Admin Cp>>>Skinning ....
  3. Lesser Known Useful Javascript Features
    (2)
    Variables Javascript assigns every variable a type which changes as we assign different
    values to the variable. We can get the type of a variable using the ' typeof ' operator.
    For eg., CODE var hello = "Welcome to Trap17"; var year = 2008; alert(typeof hello );
    alert(typeof year ); The above lines will output the type of the first variable 'hello'
    as String and the second variable 'year' as Number . The types of Javascript variables
    are Boolean, Function, Number, Object and String . A variable with no explicitly assigned v....
  4. Make A Moderately-secure Password System Using Javascript
    using file redirection to hide the password. (11)
    JavaScript is very handy at making forms, allowing for much more customization and easier ways to
    send data. So making Login forms using JavaScript may seem to many to be a very feasable idea.
    However, JavaScript is very bad at protecting Passwords, as since the passwords are not encypted and
    the whole JavaScript code is in the page, a person could just view the Page Source and find out
    everything. Even if you use an external JavaScript, it would still be poor as the file name for the
    external JavaScript would still be revealed. But I have an answer! There is a relative....
  5. How To: Html Tables.
    I find these really useful. (8)
    If you are a novice web designer, but want your site to look advanced and proffessional, then what
    better way to do so than to use HTML tables? HTML tables are a really easy way of formatting your
    text, to make your ste look proffesional. It looks good, and its easy, what more can you ask for?
    You have to use the tag, so first lets start off with: HTML Table > /table > In
    between theese two tags, we will add the data for the table, using the tags and . =Table
    Heading (Title) =Table Data (what you want in the table) =table row (new row) So, lets ....
  6. Simple Javascript And Password System
    How to protect your pages with password (10)
    The quickest way to get a password protection system up and running is to use a Prompt box in
    JavaScript that has a title like "Enter your Email Address". Only you and the relevant users know
    what the password should be, could even be one each, that can be sorted out at the next page then
    pass the "input" directly through the url by changing the .href, like
    http://www.iSource.net.nz/users/?leTmeIn= The page that then processes this should also check for
    the referring page, and three fails from an IP if you like the php (the next page): CODE //
    processdownloads.p....
  7. [php] Clean Code Functions
    Clean up your html output from php scripts (5)
    There is another Topic about writing 'clean' HTML code posted elsewhere on the Forum.
    I'll edit this Topic and add the link so you can review it on your own, and there is no need for
    me to comment on it in this thread, but the purpose of this Topic is to introduce a pair of
    functions which can be used for making sure that the HTML output from my scripts is readable when a
    view-source is reviewed. Two handy functions are included here. They work together quite nicely,
    and I will start this Tutorial with a short summary of the reasons for their 'being....
  8. Cakephp On Ubuntu
    using your own public_html folder (1)
    Hi, there are many tutorials about this, but i would like to type the steps i followed in order to
    get cakephp working on my user public_html folder. as many of you probably know, if you have
    apache's userdir module loaded, you can put your web pages on /home/user/public_html , and
    access them with the url: http://localhost/~user/ . I really prefer this, so all my web pages are
    on my personal home, but how to configure cakephp to work with these paths, i got a hard time with
    this, but finally got it!. here's how: in case you don't have apache2's userd....
  9. Html Span
    (7)
    HTML Span Description The span tag is quite the handy tag to have at your disposal. You can use
    it for everything from Text Formating, to creating a scrollable text area. When combined with CSS it
    becomes an easy-to-use tool for making your website as uniform as possible, as your not bogged down
    with tags for every heading and title on your website. Try It Out CODE Heading or
    title goes here. All the content inside the div tags go here Above we have a very
    basic page. The tag would be used to house the content of your page. The woul....
  10. How To Use Command Prompt As A Text Editor
    (6)
    In this tutorial, I will show you how you can use Command Prompt to create text files. It is very
    simple and you can also use it to write output from a command into a text file. This can be
    particularly useful when you need documentation from a DOS program in a text file when you use the
    help command or something similar. In order to do this you simply use this DOS command. echo
    Text >> test.txt This will create a new text file called test and echo the contents into it. If
    we wanted to write a 2 line document, we could do something like: echo Hello >> test.txt e....
  11. Html Bdo...
    (13)
    Description I find that it is often difficult to write a sentence backwards, but thanks to HTML, I
    can now complete this task in only a few seconds. Now the only problem is it is very difficult to
    read... Try It Out Welcome to one of the most useless functions of HTML. The tags enable you to
    write a sentence backwards. The code is quite simple. CODE I find that it is often difficult
    to write a sentence backwards, but thanks to HTML, I can now complete this task in only a few
    seconds. Now the only problem is it is very difficult to read... Well there you go.....
  12. Want-to-start Html Tutorials
    An HTML tutorial that covers the basics (2)
    NOTE: Don't use a rich text editor* for writing HTML code! Use Notepad in Windows,
    SimpleText in Mac or TextEdit in OSX, but you must set the following preferences for the HTML code
    to work! In the Format menu, select Plain Text. Open the preferences window from the Text Edit
    menu, then select "Ignore rich text commands in HTML files." Start Creating Your Own HTML File
    You can either use HTM or HTML file extensions. For more information, visit:
    http://filext.com/file-extension/htm for HTM or http://filext.com/file-extension/html for HTML.
    Ope....
  13. Creating Navigation For Html Websites
    Have a common navigation menu for the whole website! (12)
    Pre-requisite: HTML, inline frame tags 1 Attachment(.zip) included. Updates : 29-12-07: Doctype
    added in example files (Advised by jlhaslip) Designing a whole website takes a lot of planning
    and organization. Designing a proper navigation system is a basic step in building your website. If
    you are developing webpages in html you would have observed that as you go on creating pages it
    becomes difficult to maintain the links to the pages. This article will guide you in developing a
    common navigation menu for your website. It describes three ways, so if you don'....
  14. Html Legend
    Learn how to create a handy legend with HTML! (9)
    I think this is pretty neat... good for those people who maybe aren't that great at designing
    things but still want something to look nice.. CODE Legend title Content try it in
    note pad.. it looks nice...good for forums, sign up forms.......
  15. Mootools - My Favourite Javascript Library
    (3)
    It kind of amazes me that there's not even a mention of the Mootools javascript library
    throughout this whole forum. So here I'll do a brief introduction and a tutorial on how to
    produce the famous accordion effect. MooTools is a compact, modular, Object-Oriented javascript
    framework designed to make writing extensible and compatible code easier and faster. MooTools lets
    you get the job done efficiently and effectively. It is slightly based on the powerful Prototype
    javascript framework , of which Scriptaculous runs on. (But frankly, I dislike Scriptaculou....
  16. Spice Up Your Forms
    With a bit of CSS and HTML alignment (11)
    Ever wonder how to make those stylish forms you see everywhere? Well now it's your change to
    learn. This short tutorial will show you how to do exactly that. Here is a bit of css to spice
    up the form. I have included comments to explain what classes will change what in the forms.
    CODE .form table { background-color: #187cae; } /*The following css class will change the
    table cells within the .form div */ .form td { background-color: #bbe0f4;            padding: 3px;
               border: 0px;            font-family: verdana;            font-size: 10px;  ....
  17. Javascript Scroll Bar
    A scroll bar for your webpage using javascript (13)
    In this tutorial I will show you how to create two buttons in the bottom left of the screen that,
    when hovered over, will scroll the page. Now to start with, we must create a our buttons, the first
    line will create a div element, or block. Using blocks you can position items anywhere on a page.
    We use the ID property just to let us know what the block is used for, as for the first block, its
    obvious that it contains the vertical buttons and the second two blocks contains the horizontal
    buttons. The style property of the div tag tells the browser how to draw it, in the....
  18. Do You Want To Use Php Code In Your Html Pages?
    Within two minutes you will! (9)
    Whilst searching around for help to setup cutenews blog I came across a way to use php in html pages
    - lo and behold it works! so I thought I'd share it with you all (Unfortunately I can't
    remember the site so I wrote this up a couple of minutes after I did it:) ). This method requires a
    web server with apache installed. So, luckily for us all this covers the whole of Trap17... even
    Qupis /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> Just
    to make the point, this is in no way a difficult task and it doesn't require yo....
  19. How To Make A Simple File Based Shoutbox Using Php And Html
    (8)
    A simple tut to make a simple shoutbox. Let me jump right in. First of all you need the standard
    equipment for PHP, an IDE like XAMPP and an editor like PHP EDITOR 2OO7. Were going to make a
    simple guestbook using three files, webpage.php, shout.php and shout.txt. Webpage.php can be
    changed to whatver you want, it will be the page on which the guestbok is shown, you could even use
    this code and add it to another php page n your site. Shout.php is the proccessing page and
    shout.txt is where the shouts are stored. Firstly we need to make the visual design of the box.....
  20. Simple Scripts In Html And Javascript
    Things like BackgroundColorChanger and so (7)
    like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
    on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
    desktop and write the following: QUOTE browser interpretation: html - tag
    means "hey, browser, here comes HTML" in the body-tag you define the looking of your site. you can
    add things like "bgcolor" for the background, "text" for the textcolor and link / alink / hlink /
    vlink to define the linkcolor ( ) the scripttag is the tag, we'll need now (sorr....
  21. Document Type Declarations
    And why we use them in html pages (0)
    This code: CODE    HTML 4.0 Strict document                ... Your HTML
    content here ...      ... More HTML content here ...    represents a minimum, acceptable
    web-page according to the W3C which is the organisation that sets the standards for the World Wide
    Web, or as we call it, the Internet. In another Tutorial, you can learn about the html code, but in
    this Tutorial, I wish to emphasis the importance of the DTD or Document Type Declaration, the first
    line in the sample code above. What it does is tells the Browser that a certain set....
  22. Fast Template Design In Joomla Cms
    Basic knowlege of Html needed (2)
    Joomla is one of the most powerfull CMS sistems around. It is free under GNU/GPL license and
    everyone with simple knowlege of webdesign (and even without it) can use it for it's website.
    For now the only way i know on how to design a template in joomla is by using Dreamweaver and Joomla
    (joomlasolutions1.0.mxp-dreamweaver.mxp) extension for dreamweaver! Template design in joomla is
    quite simple really. This template that i'll show you is the most simplest of them all, but
    it's enough for one to learn Basics of template design. Further notice is that this is ....
  23. Integrating Html And Css Part 1
    (5)
    Ok. Well i am writing this as a series of tutorials i will be doing on this subject, so enjoy. I
    hope this helps. Introduction to HTML and CSS
    HTML and CSS are to work together. HTML is what puts the characters on the page, while CSS is what
    makes everything look outreageous! For instance, I would use HTML if i wanted to put "Trap17 is the
    poop!" onto my page, although if i wanted to make it look nice like this by adding a font, and maybe
    some color, then I would use CSS. Learn the HTML. Ok this is my little into....
  24. Javascript Framework - A Shortcut Javascript
    a shortcut javascript (3)
    hi, today im going to give you small tutorial how to use `Prototype JavaScript Framework` 1st you
    have to download `Prototype JavaScript Framework`library from http://prototype.conio.net/
    prototype makes easy to using Javascript, ex : when you want to point (get) the element from HTML
    usually we use : CODE document.getElementById('elementId') with prototype we use
    CODE $('elementId') , yeah...world getting small..with prototype. example we`re going
    to get value from an element of CODE with prototype we use CODE alert(....
  25. Image Rollovers In Javascript
    A Write-Once, Use-Anywhere Approach (11)
    Tutorial: Image Rollovers w/ Javascript, by Rob J. Secord, B.Sc. (SystemWisdom) See a
    working Sample of this Script! Download a ZIP containing all working files in this tutorial!
    Note: If you are not interested in reading this entire tutorial and/or have a basic understanding of
    the underlying concepts, you may safely skip to the Implementation section to get the code!
    Description : A Dynamic Image Rollover Script tested to work in 4 major internet browsers: MSIE,
    FireFox, Netscape and Opera. Using only Javascript combined with regular HTML Images ( ....
  26. Css And Javascript Combined For Dynamic Layout
    use of different CSS files at same site (9)
    This tutorial is meant for people that are dealing with problems while coding their site at 100% of
    width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS
    file (take this in account when creating your website). How this script works. In the HEAD of your
    HTML document will apply this command, so variable.js file will be load at start: CODE
    In browser JavaScript file variable.js is loaded. This Javascript file consist of this parameters,
    copy this code and name it variable.js CODE // JavaScript Document if (sc....
  27. Basic Html (for Us Kids)
    (23)
    What is HTML? HTML (hypertext markup language) is computer language that is used to webpages. It
    can be confusing to understand for some of us kids. HTML pages are text files that has of HTML tags
    (they can place the text or images whereever you want to place it), and text you can place between
    the tags so the text willshow up on your page when you put it on the WWW. Tags are instructions that
    tell your browser what to show on ya website. They break up your webpage into basic sections. All
    tags start with a (right bracket). If you are a starter you need 4 tools A....
  28. How To: Change An Image When A User Clicks On It
    using both php and javascript (12)
    How To: Change An Image When A User Clicks On It using both php and javascript - a powerful
    combination I have seen quite a few how tos offering a method of doing this but none of which
    resembled my method of making use of both php and javascript. This code is fairly repetitive and
    most of the functions are easy to pick-up if you haven't heard of them before. Here it is...
    Create your two images. Call them anything you like, you'd just need to change their filenames
    in $imgano $imgayes. In fact with this script you can easily create more than one pair....
  29. Image Preloader With Progress Bar Status
    Pure Client-Side JavaScript tested in 4 Browsers! (28)
    Tutorial: Image Preloader with Progress Bar, by Rob J. Secord, B.Sc. (SystemWisdom)
    Description : A Tutorial for a Client-Side Image Preloader with Dynamic Real-Time Progress Bar
    Indicator written in JavaScript! Tested to work with 4 Major Internet Browsers: Firefox, MSIE,
    Netscape, Opera (Complete sample solution provided at end of tutorial, just put it on your
    web-server, add your images and go!) Intended Audience : Beginner to Intermediate Web
    Developers. Although this tutorial will cover some advanced aspects of JavaScript, I will try to
    explain it all ....
  30. HTML tags and examples
    Condensed form of course from my site... (37)
    Well, I decided to try and help out some of the users here who might be unexperienced in HTML, so I
    condensed the begginer's HTML course at my website. Here it is... Lesson 1 HTML means Hyper
    Text Markup Language. HTML is a very common language used for many websites, is the base for more
    complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the
    easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two
    arrows-like brackets created by hitting Shift and the comma key, or Shift and the period....

    1. Looking for create, simple, html, editor, php, javascript
Similar
Create Dynamic Html/php Pages Using Simple Vb.net Code - Taking your application data, and creating a webpage for others to vie
Add Flashing Inbox To Invisionfree Forum - Html code for invsiionfree!!
Lesser Known Useful Javascript Features
Make A Moderately-secure Password System Using Javascript - using file redirection to hide the password.
How To: Html Tables. - I find these really useful.
Simple Javascript And Password System - How to protect your pages with password
[php] Clean Code Functions - Clean up your html output from php scripts
Cakephp On Ubuntu - using your own public_html folder
Html Span
How To Use Command Prompt As A Text Editor
Html Bdo...
Want-to-start Html Tutorials - An HTML tutorial that covers the basics
Creating Navigation For Html Websites - Have a common navigation menu for the whole website!
Html Legend - Learn how to create a handy legend with HTML!
Mootools - My Favourite Javascript Library
Spice Up Your Forms - With a bit of CSS and HTML alignment
Javascript Scroll Bar - A scroll bar for your webpage using javascript
Do You Want To Use Php Code In Your Html Pages? - Within two minutes you will!
How To Make A Simple File Based Shoutbox Using Php And Html
Simple Scripts In Html And Javascript - Things like BackgroundColorChanger and so
Document Type Declarations - And why we use them in html pages
Fast Template Design In Joomla Cms - Basic knowlege of Html needed
Integrating Html And Css Part 1
Javascript Framework - A Shortcut Javascript - a shortcut javascript
Image Rollovers In Javascript - A Write-Once, Use-Anywhere Approach
Css And Javascript Combined For Dynamic Layout - use of different CSS files at same site
Basic Html (for Us Kids)
How To: Change An Image When A User Clicks On It - using both php and javascript
Image Preloader With Progress Bar Status - Pure Client-Side JavaScript tested in 4 Browsers!
HTML tags and examples - Condensed form of course from my site...

Searching Video's for create, simple, html, editor, php, javascript
See Also,
advertisement


Create A Simple Html Editor With Php And Javascript

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com