Upload images for usage in TinyMCE
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 too looks too big for some projects and than is the following (free) solution an option. You can download your 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:
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 thePHP 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.
include_once (‘upload_class.php’);
$max_size= 1024*250;
$error= ”;
if(isset($_POST[‘Submit’])) {
$my_upload= newfile_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:
$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.
tinyMCE. init({
theme : "advanced",
mode : "specific_textareas",
textarea_trigger : "convert_this",
plugins : "advimage",
external_image_list_url : "images.php",
});
</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.
Related Articles
Performance Tuning Overview
SWFUpload: A nicer file upload experience
PHP Look Back 2006
byteplug: Experimental Online JavaScript Editor
Preloading Images with jQuery
CouchDb Views with PHP
First steps with PHP - booting a script, Part 1
First steps with PHP - booting a script, Part 2
Relatd Projects
A simple command-line tool to create the folders and helper files for a new JavaScript project/library. As a bonus, you can quickly create a website to promote your project.
When you start a new JavaScript library, how do you layout the source files, the tests, the distribution files? Do you have support scripts to generate distributions from source files? Run your JavaScript unit tests? Generators to create new unit test HTMLfiles?
What is XSTM?
XSTM is a n open sourcelibrary which enables high performance object replication between processes. It is an object oriented Distributed Shared Memory, or a Distributed Object Cache.
XSTMhas similarities with technologies like Adobe Flex Data Services , JBoss Cache, Terracotta, Tangosol Coherence , ScaleOut , or IBM's ObjectGrid .
Our model is based on object shares, which work like file shares. When an object is added to a share, it appears on the other machines which have the same share opened. Modifications done to the fields of the object are from this point replicated between machines.
Read more in the project overview.
XSTMis made of three projects. The Java implementation is called JSTMand is the base from which
the other versions are derived. An adapted version made with Luciano, the
author of GWM , is available for GWT . It allowsthis library to be used in a browser. NSTM is a .NET port based on IKVM.
All implementations are compatible with each other so object replication can take
place e.g. between a Java server and a .NET Smart Client.
Just by adding this small JavaScript module to the end of your web pages, you get your form's submissions intercepted and, instead of sending request to the server in the usual way, they are done asynchronously and in an AJAX-style smooth way.
As long as it is a client-side library it will work with any server technology: ASP.NET, PHP, JSP, Classic ASP... and even with local HTM files.
I've included extensibility so that you can add easily your own progress indicators (several included) and show error messages the way you prefer (by default it shows an alert).
It's transparent to your server code and could be used to add AJAX capabilities to some applications without writting a single line of code.
Documentation is included.
Features summary
• No-code AJAXification of web apps
• Supports any server technology, including ASP.NET, JSP, PHP, ASP 3.0...
• In ASP.NET it supports all kinds of postbacks: direct and by code.
• Works in any modern browser that supports AJAX.
• Supports cross-posting of forms, that is, you can send the information to any web page in the same domain. If all your web pages have AJAXInterceptor included (for example, you include it in your master page or template) you can hace
• Respects your custom onsumit event handlers.
• Supports browser history so that your users can hit the previous button and get the last rendered page.
• Two versions of the module:
- AJAXInterceptor.js: full commented one. Useful for debugging purposes.
- AJAXINterceptor_r.js: reduced-size version. It downloads faster as it only is 2.6 kB in size. It's better to use this on production apps.
• Automatically show/hide custom progress indicators.
• Support for cancelling operations.
• Support for custom message displaying.
• Supports any form in your page
Obviously this is not substitute at all of full-fledged APIs like Microsoft's ASP.NET AJAX, PHPLiveX or AJAX.NET, but will let you add AJAX support to your apps in a few seconds and without writing any code. Just give it a try!
In the ZIP you will find teh module, a working sample with ASP.NET and a PDF with the help documentation.
This project is just for fun :-)
I will be very glad if you drop me a line in case you use AJAXInterceptor in any real-world application or if you enhance it with new features.
Visit my .NET blog (Spanish) at http://www.jasoft.organd my e-mail marketing blog (English) at http://www.theemailingexperience.com
JSJaC is a jabber/XMPP client library written in JavaScript to ease implementation of web based jabber/XMPP clients. For communication with a jabber server it needs to support either HTTP Pollingor XMPP Over BOSH(formerly known as HTTP Binding). JSJaC has an object oriented design which should be quite easy to use. Communication is done by using the XML HTTP Request objectalso refered to as AJAX technology. Your browser must support this.
This JavaScript client library allows you to make Facebook API calls from any web site and makes it easy to create Ajax Facebook applications. Since the library does not require any server-side code on your server, you can now create a Facebook application that can be hosted on any web site that serves static HTML. An application that uses this client library should be registered as an iframe type. This applies to either iframe Facebook apps that users access through the Facebook web site or apps that users access directly on the app’s own web sites. Almost all Facebook APIs are supported.
Using Caja, web apps can safely allow scripts in third party content.
The computer industry has only one significant success enabling documents to carry active content safely: scripts in web pages. Normal users regularly browse untrusted sites with Javascript turned on. Modulo browser bugs and phishing, they mostly remain safe. But even though web apps build on this success, they fail to provide its power. Web apps generally remove scripts from third party content, reducing content to passive data. Examples include webmail, groups, blogs, chat, docs and spreadsheets, wikis, and more.
Were scripts in an object-capability language, web apps could provide active content safely, simply, and flexibly. Surprisingly, this is possible within existing web standards. Caja represents our discovery that a subset of Javascript is an object-capability language
jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
Onion ML is an XML template system designed with a bias toward modularity.
Onion ML lets you easily custom XML tags to make modular content design simple and easy to mix with HTML. It is somewhat comparable to XSLT and JSF, but intended to be easier to understand.
You define custom tags either as markup in XML files or as custom JavaScript functions which generate output.
Onion ML also provides several control flow methods necessary for dynamic content. Methods for iterating over data sets and conditionally displaying tags are core to Onion ML's functionality.
