Lightweight WYSIWYG Editor for PHP

A dead simple javascript based WYSIWYG html editor for PHP. It is lightwight, fastloading html editor can be integrated to PHP scripts easily.

I always wanted a very simple WYSIWYG editor for my PHP scripts with just simple functions like bold, italic, URL and Image insertion and nothing more than that! I came across many many open source editors and each had disadvantages like popup html window for inserting links, slow loading and much more, which just couldnt satisfy my expectations.

That is why i wrote this very simple editor, just exactly what i wanted. The whole script is just under 2kb It has only basic functions and very importantly inserting URL is so easy! No more html windows popping up!

jseditor-demo.PNG

Features

– Light weight
– Fast loading script
– No html popups for inserting links
– Easy integration to PHP or other scripts
– Free to use for personal or commercial
– You can use this editor and toolbar images for any personal or commercial licenses.
– Works in IE/Firefox

Demo

Download (10kb)

Note: This project has been discontinued and Lightweight Textarea HTML Editor is the successor. It is free for download and its the best alternative for the this editor as it is much simpler and faster to implement.

How it works

When you initialize editor specifying the name, width and height of the editor, it creates a iframe element and enters to rich text design mode. since the iframe cannot be used to do form posts, and on submitting it moves the raw html to a hidden input box (created by editor) and then does the form post. The input box is an alternative to textarea box and works like a replacement.

How to initiate the editor

Follow the 2 steps.

1. Place the following code inside the head element of html page

[sourcecode language=”html”][/sourcecode]

2. Initiate and call the editor with the name of the editor, its width and height. The name and ID should be the same. Place it inside the form and include onSubmit event if you want to POST to another php script.

onSubmit="doCheck('tbox');"
Start('tbox',600,400);

[sourcecode language=”html”]



[/sourcecode]

How do i load the editor with data?

If you want to load the editor with html data, place it inside source.php file. if you are pulling from mysql, place the necessary code in that file. If you want to change the filename open editor.js and find a line with source.php and change to the different php file.

[sourcecode=”html”]
document.write(““);
[/sourcecode]

Bold Icon

italic.gif Italic icon

underline.gif Underline icon

link.gif Create hyperlink icon

unlink.gif Undo hyperlink (unlink) icon

picture.gif Insert picture icon

You can use these editor icons for any personal or commercial purpose! Although the code looks much simple, i did a lot of head scratch to get this editor work in firefox.

How do i replace/remove the default loading text in the editor?

just open source.php and replace the content to what you want the editor to load when it initializes. You can also leave it blank.