TinyMCE Skin - Cirkuit

Style your TinyMCE Editor with Cirkuit Skin

Current Version: 0.5 - Last Updated: April 5, 2011 - Verified as compatible with the newest jQuery libraries (currently, version 1.5.2)

'cirkuitSkin' is a simple and clean tinyMCE theme skin that comes with a few extra enhancements over the default TinMCE skin:


  • Uses new menu icon sprite for diferent toolbar icons. This sprite was a combination of TinyMCE's default icons and the FamFamFam Silk Icon Set
  • Look and feel of buttons inspired by Wordpress.
  • Ability to show / hide advanced toolbar for TinyMCE in Example 2. Code for this was revised from http://www.neele.name/pdw_toggle_toolbars
  • Ability to make editor height smaller than default 450px, and even smaller than minimum 150px hardcoded in to TinyMCE in Example 4.

As you can see, a lot of this skin is the combined work of other open source projects that currently exist, however when they are all merged together 'as-is', there are a lot of conflicting issues and very quirky problems in Internet Explorer (surprise surprise) and a few other issues with webkit browsers. All of these issues have been fixed in our TinyMCE cirkuit skin.

Examples

Example 1 - Default editor with three toolbars (one standard and two advanced)
Example 2 - Default editor with one primary toolbar and two collapsible advanced toolbars
Example 3 - Editor with one toolbar for simplified text
Example 4 - Very small (30px height) editor for extremely simple text

Installation

Cirkuit TinyMCE Skin
  1. Download the Cirkuit TinyMCE Skin
  2. Unpack the skin ZIP file in to your tinyMCE skins directory located within the tinyMCE directory at themes/advanced/skins/ on your server
  3. Add the skin:"cirkuit" option to your tinyMCE init or copy the source code from one of the example pages
  4. Enjoy!
Revised PDW 'Kitchen Sink' TinyMCE Plugin
  1. Download the Revised PDW 'Kitchen Sink' TinyMCE Plugin
  2. Unpack the plugin ZIP file in to your tinyMCE plugins directory located within the tinyMCE directory at plugins/ on your server
  3. Add pdw to your tinyMCE plugins option in init or copy the source code from the Example 2 page
  4. Add the pdw_toggle_on and pdw_toggle_toolbars option to your tinyMCE init
  5. Create an anchor or button to toggle the pdw_toggle_toolbars
  6. Enjoy!
* PDW Kitchen Sink plugin also requires jQuery cookie plugin. It is a good idea to look at 'Example 2' for more thorough installation.

Compatible Browsers

This plugin has been verified as working in the following browsers:
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Mozilla Firefox 3
  • Google Chrome
  • Safari
  • Opera
*Any browser not listed simply has not yet been tested. Please let us know about your experiences with other browsers by leaving feedback.

Other Info

  • Tested with TinyMCE 3.4
  • Requires the jQuery library
    • Tested with all versions of jQuery from 1.3.1 through 1.5.2
  • Now works with AdvList Plugin

Feedback

Email:
Please send comments, problems, and suggestions by using our contact form

IRC:
irc.freenode.net
#cirkuit

© 2008-2024 - Plugin by Cirkuit Networks, Inc. - http://www.cirkuit.net/
Images from http://www.freeimages.co.uk/