in a recent interview my boss showed me a website that was basically a small CMS written in PHP and MySQL with a WYSIWYG editor on the pages that needed editing.
he asked if i could create something of these standards. i told him i could definately do the PHP work, but i wasn't sure of creating the WYSIWYG editor because i'm not that fluent in Javascript.
he told me that the creator of this website had used a prebuilt WYSIWYG editor and that i wouldn't be required to create my own, which i am happy about. i'd always thought WYSIWYG editors would be difficult to implement, so i did a short spell of Googling for WYSIWYG editors and had a look at a few, the most striking editor i found was
FCKeditor [im a link] (the name is derived from the author's initials), so i decided to download it and try it out.
FCKeditor is a free, open source WYSIWYG editor with a large number of formatting features, including a built in character map and smilies, it's about 800kb, of which half is example pages and documentation.
it includes the API to implement the system effortlessly into languages like PHP, ASP, ColdFusion etc. i was actually
very suprised to see how easy it was to implement, to start off with, to show the editor, all you had to do was include the integration API file, and call something like this:
Code:
<?php
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// $oFCKeditor->BasePath = '/FCKeditor/'; // '/FCKeditor/' is the default value.
$sBasePath = $_SERVER['PHP_SELF'];
$sBasePath = substr( $sBasePath, 0, strpos( $sBasePath, "_samples" ) );
$oFCKeditor = new FCKeditor('FCKeditor1');
$oFCKeditor->BasePath = $sBasePath;
$oFCKeditor->Value = 'This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor</a>.';
$oFCKeditor->Create();
?>
although this might look slightly tedious, it's actually not, you simply define the path to the configuration files of FCKeditor, $oFCKeditor->Value contains the text that will appear in the editor when it loads, and that's it!
but with this script being open source, it's easy to modify, so i made it as easy as possible, while still incorporating common functionality. included in fckeditor.php (the integration API class file):
Code:
function basepath ( $SBasePath )
{
$position = strpos( $sBasePath, "_samples" );
$basepath = substr( $sBasePath, 0, $position );
return $basepath;
}
and remodelled the default class constructor to be more automated:
Code:
function FCKeditor( $instanceName = 'DefaultName',
$BasePath = '',
$Value = '',
$Height = '200' )
{
$this->InstanceName = $instanceName;
$this->BasePath = $BasePath;
$this->Width = '100%';
$this->Height = $Height;
$this->ToolbarSet = 'Default';
$this->Value = $Value;
$this->Config = array();
$this->Create();
}
so now, all we need to call from the front page is:
Code:
$wysiwyg = new editor(
'TheWYSIWYGEditor' , # name of textarea
'' , # base path
'Welcome to the <b>WYSIWYG</b> editor. This is FCKeditor.', # default text
'400' #width of applet
);
so while incorporating
more selective functionality than the default code (now includes width of applet, i thought height would be fine to stay at 100% wide) and being easier to use, it makes the script even better than before, and that's saying something.
i
highly recommend this script, i give it a 9.5/10 rating and i will always be using it when i need it.
the only downers in this script is that the code it inserts is slightly outdated (i.e. they use <font> tags to style fonts, and capital letters in some definitions) but that can all be changed if you want to, because it's open source, just find the code definitions file and change it.
---------
this post isn't spam, i'm kind of reviewing the script, and promoting it, it's excellent, anyone who was thinking of getting one should, it's so easy to use.