TinyMCE is a great online WYSIWYG editor which is used for a lot of projects, for example this Wordpress blog application (the content backend). I use TinyMCE for custom projects too. TinyMCE is free, generates good HTML code and the interface is easy to learn even for non-webmaster.

The project is open source and the developer Moxiecode earns money by selling useful plugins for image and link management. Sometimes the Image manager “looks too big” for projects, in this case the following (free) solution is an option. You can download your TinyMCE copy from the TinyMCE website.

The editor has two different modes: simple and advanced mode. In the advanced mode is it possible to load several (already included) plugins. The advanced image function has an option to select images from a list. This list is a just a little JavaScript snippet which stores file name and the alternative text notation:

var tinyMCEImageList = new Array(["Logo", "logo.jpg"]);

Using PHP we are able to generate this list dynamically. But first we need a script that uploads the images and store the data into a database. We use for our example the PHP Upload Class from finalwebsites.com. The following snippet should do that job (check the examples with the upload class for more information about the upload process). Store this code together with an upload form in some PHP script.

< ?php
include_once ('upload_class.php'); 
 
$max_size = 1024*250;
$error = '';
 
if(isset($_POST['Submit'])) {
	$my_upload = new file_upload;
	$my_upload->upload_dir = $_SERVER['DOCUMENT_ROOT']."/fotos/";
	$my_upload->extensions = array(".png", ".gif", ".jpg");
	$my_upload->rename_file = false;
	$my_upload->the_temp_file = $_FILES['upload']['tmp_name'];
	$my_upload->the_file = $_FILES['upload']['name'];
	$my_upload->http_error = $_FILES['upload']['error'];
	$my_upload->replace = "n";
	if ($my_upload->upload()) {
		$conn = mysql_connect("localhost", "user", "pw");
		mysql_select_db("database", $conn);
		mysql_query(sprintf("INSERT INTO foto_table SET file_name = '%s', alt_txt = '%s'",
			$my_upload->file_copy),
			mysql_real_escape_string($_POST['alt_txt'], $conn)
		);
	}
	$error = $my_upload->show_error_string();
}
?>

Next we need a script that will create the image list from the data we have stored in our database:

< ?php
$conn = mysql_connect("localhost", "user", "pw");
mysql_select_db("database", $conn);
 
$dir = '/fotos/';
 
$sql = "SELECT * FROM foto_table";
$res = mysql_query($sql);
$js = 'var tinyMCEImageList = new Array(
	// Name, URL';
while ($obj = mysql_fetch_object($res)) {
		$js .= '
	["'.$obj->alt_txt.'", "'.$dir.$obj->file_name.'"],';
}
$js = rtrim($js, ',').');';
echo $js;
?>

Now we are able to use this dynamic list in our TinyMCE WYSIWYG editor. The following JavaScript snippet shows a very basic configuration, The script has many options and maybe you have already your own configuration in your content management system.

<script type="text/javascript"><!--mce:0--></script>

The most important part are the declarations for the plugin and the image list. With these settings you should notice the dialog box:

As you see the alternative name is used in this list and also for other attributes within the image element.

This example is a quick and free alternative if you don’t like to buy the commercial image manger. You can download the example files here.