Upload images for usage in TinyMCE

Olaf — Wed, 24 Sep 2008 22:13:52 +0000

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">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.Similar Posts:

Dynamic Flash Photo Galleries!

Olaf — Sun, 29 Apr 2007 17:28:50 +0000

The latest product from TemplateMonster is some new CMS with a stylish flash powered photo gallery front end. While the product is developed for the “non professional” webmaster are the CMS features really advanced. The gallery script looks a little like the bigger PHP photo galleries but there is need no for a database and the CMS has some nice features like:

automatic thumbnail generation (loads much faster than resizing a photo using Flash’s jpg object)
a PHP powered file upload
an unlimited number of categories and photos for each category (only the load time is the limit)
easy to modify descriptions for photo’s and categories
The ability to modify all information and configuration via the text editor (if PHP is not available on the websites host)

The CMS looks very clean and doesn’t require a lot of HTML knowledge to manage any photo gallery listing. The price is maybe a little to high: Starting at $235 each license could be a little to to high for some webmasters. On the other site the front end looks very nice and would be an impression for every visitor!

Our partner finalwebsites.com (website is in Dutch language) is since a short time a TemplateMonster partner, maybe you like to take have quick look on these new Dynamic Photo Galleries.Similar Posts:

Web Development Blog » cms

Upload images for usage in TinyMCE

Dynamic Flash Photo Galleries!