Simple WYSIWYG Editor
Creating a WYSIWYG textbox for your website is actually quite simple.
Thanks to the html iframe component that contains the execCommand
function, which enables us to access html tags in real time.
The following snippets shows how to implement this function:
editor.js
var Editor; function Format(action) { Editor.execCommand(action, false, null); } function Colour(colour) { Editor.execCommand("forecolor",false, colour); } window.onload = function() { Editor = document.getElementById('textbox').contentWindow.document; Editor.designMode = "on"; document.forms[0].onsubmit = function() { var text = document.getElementById('text'); text.value = Editor.body.innerHTML; } }
In the top script we attach anonymous methods to the page load event and one on the form submit event (assigns the contents of the iframe to a form control - since we need to submit it via the page)
editor.html
<html> <head> <title>Simple Javascript WYSIWYG Editor</title> <script language="Javascript" src="editor.js"></script> </head> <body> <form method="POST"> <div> <input type="button" onclick="Colour('Green')" style="background-color:Green;" /> <input type="button" onclick="Colour('Red')" style="background-color:Red;" /> <input type="button" onclick="Colour('Blue')" style="background-color:Blue;" /> <input type="button" onclick="Colour('Black')" style="background-color:Black;" /> <input type="button" onclick="Format('bold')" value="B" /> <input type="button" onclick="Format('italic')" value="I" /> <input type="button" onclick="Format('Underline')" value="U" /> <input type="button" onclick="Format('justifycenter')" value="C" /> <input type="button" onclick="Format('justifyleft')" value="L" /> <input type="button" onclick="Format('justifyright')" value="R" /><br/> <iframe id="textbox" style="width:300px; height:150px"></iframe><br/> <input type="submit" value="Go" /> <input type="hidden" id="text" name="text" /> </div> </form> </body> </html>
BackColor: Get or set the background color of the selected region.
(this property shows some weird behavior in Firefox 2.0)
Copy: Copies the selected region to the clipboard.
Cut: Removes the selected region from the document.
Paste: Adds data from clipboard to region (if applicable).
InsertHorizontalRule: Adds a horizontal rule to the region.
InsertImage: Displays an IE defined modal dialog that contains full image selection features, alt tag modification, border setting, etc.
InsertMarquee: Converts the selected text into a marque.
InsertSelectDropDown: Adds a drop down list to the region.
Print: Displays the windows print dialog so that the region can be printed.
Refresh: Refreshes the region.
CreateLink: Displays an IE defined modal dialog that lets you add a hyperlink using either selected text or new text.
InsertUnorderedList: Toggles between the selected text being an unordered list and normal text.
2009-08-17: I went through all the comments I received regarding this post and wrote some additional code that can be downloaded from here, which will be featured in a future article.
Date - 2007-02-01 12:00:00
Comments - 34
Strongly Typed PHP
Often you'll hear the term "strongly typed" which refers to certain constraints
being enforced regarding variables.
PHP is a "weakly typed" language which means php doesn't require (nor support it for that matter)
explicit type declaration of variables.
Whatever value one assign to a variable, determines its type and when you assign something else to
it, it changes type according again. (Most uncompiled languages use this technique)
(which can lead to very dodge code)
But what if you want to make your classes strongly typed? (Force whoever
use your class to assign the correct values to your class properties) - surely we can put checks
in our code, but that can get a bit tedious.
Overloading in PHP 5 is a quick solution, one can overload the get and set members
and control whatever variables get assigned and retrieved from your class.
Here is a quick snippet:
<?php class StronglyTyped { private $x; private function __get($name) { if (!isset($this->enforcetype[$name])) { die("<b>Exception occured: </b>calling property $name which does not exist or set private"); } return $this->x[$name]; } private function __set($name,$value) { $type = $this->enforcetype[$name]; if (isset($type) && $type != "") { $given = gettype($value); if ($given == $type) $this->x[$name] = $value; else { $exception = ($given != "") ? "<b>Exception occured on $name property:</b> Type <i>$type</i> expected, type <i>$given</i> was supplied" : "<b>Exception occured:</b> no type specified for property $name"; die($exception); } } else die("<b>Exception occured:</b> property $name not defined<br/>"); } } ?>
class test extends StronglyTyped { public $enforcetype = array("stringy" => "string", "inty" => "integer", "booly" => "bool"); }
Date - 2007-01-28 12:00:00
Comments - 7
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27