Archive for the 'Tools' Category

Jul 16 2008

TinyMCE CMS WYSIWYG JavaScript Plugin

Published by admin under Tools

This is a great (and powerful) JavaScript that you can plug in to your site for CMS purposes to make HTML or BBCode easily edited - well that’s what I use it for. TinyMCE is a super customisable WYSIWYG (What You See Is What You Get) that ranges from being very basic (for my purposes) to very advanced, you can even skin it if you so desire.

It’s extremly easy to integrate in to your site and is widely used in various applications such as: Wordpress, PHP-Nuke, Joomla and Expression Engine to name a few. A full list can be found here.

Just download it from the TinyMCE download page. Copy the jscripts folder to the root of your htdocs directory.

Then put the following code in between your page tags:

Simple Editor:
<script src="../jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script> <script type="text/javascript"><!--
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
// --></script>

Now for any <textarea> it will be replaced with the TinyMCE editor functions, the code:


<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
<p>
<img src="media/logo.jpg" alt=" " hspace="5" vspace="5" width="250" height="48" align="right" /> TinyMCE is a platform independent web based Javascript HTML <strong>WYSIWYG</strong> editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.</p>
<p>We recommend <a href="http://www.getfirefox.com" target="_blank">Firefox</a> and <a href="http://www.google.com" target="_blank">Google</a>
</p>
</textarea>

Would be displayed like:
TinyMCE Simple screen shot

The fully featured is extremely comprehensive and looks like:
TinyMCE Full Features Screen Shot

In my application I replaced the “../” for the JavaScript location to a global variable that returns the base path for my site rather than it being a relative path.

I also customised my copy to to only show the buttons I required and I had the button bar at the top, the great thing about this plugin is that you can get it to automatically produce BBCode which is useful if you’ve got a user facing platform.

To find out about how to customise TinyMCE check this out.

2 responses so far

Jul 03 2008

Easy bookmarking and feeds - AddThis Buttons

Published by admin under Tools, Web

This is the best generic social bookmarking button you could ever wish for to have on your website. The best part about it is that it’s completely free! It’s a one button solution for your visitors to bookmark your site on to the likes of Facebook, Digg, Del.icio.us, MySpace, etc.
AddThis example buttons

It’s really easy to add to your existing site, all you need to do is go to AddThis Button Select page and choose the type of button you wish to add (Bookmark/Share or Feed) and then select the most desirable button you wish to be placed on your site and then copy the code it generates in to your site. Easy!
addThis feeds
addThis sharing

Well, if you’re using WordPress, it’s even easier… You can just download the AddThis plugin from WordPress AddThis plugins page and activate the plugin in your WordPress admin area, simple!

So if you’re looking for a great, free and easy solution for your visitors to subscribe to your feeds or bookmark pages on your site then look no further.

Enjoy!

One response so far