A Nicer TinyMCE Interface, Based on WordPress UI, and New Smileys

· 2 min read

Original publication

This post was originally published on June 12, 2008 on The Standard, the Raincity Studios blog, credited to “Hubert Florin”. This post reflects the context and tools of its time; some links and services mentioned no longer exist.

View the original on the Internet Archive

TinyMCE is ugly!

I worked on a better User Interface for TinyMCE, inspired by the new Wordpress interface. The intention is to make TinyMCE easier to use and read for bloggers, editors. TinyMCE is ugly, but thank god, it left some options to design it so we could have something like this :

[Screenshot originally shown here.]

How to use it?

I attached two css files. One is theme.css, it's code that should be put in the theme stylesheet, for example , if the theme is garland, add the css rules to :

/themes/garland/style.css

The other one is tinymce.css, that's the file that TinyMCE should use in the configuration of the module (CSS fieldset in tinymce settings). This file should be copy/pasted in the css folder or theme folder, and pointed to in the TinyMCE configuration page. For example, if the file is in /themes/garland/css/ ,then go to :

admin/settings/tinymce/

and edit the profile you want to access the new style. in the CSS fieldset, change 'Editor CSS:' to 'Define Css' , and add : ' /themes/garland/css/tinymce.css ' in the 'CSS path' field.

Additionally, an image is used for the buttons, and should be put in the image folder in the theme. (see the theme.css file to change this)

Some new smileys

Also attached, I designed a set of Smileys that can be used with TinyMCE. Originally designed to replace the set of smileys shipped in with the Smileys Module, I thought that it was a bit strange to have the smileys available for the comments, but not for the blogger using tinymce... so I basically replaced the smileys in TinyMCE with mine, and it works great ! This set of smileys should be part of the next Smileys module, soon to be released, and I think that the maintainer of this module is working on a better integration with TinyMCe.

Note: To use the smileys, the img tag should be added in the filter settings used by the editor. This folder should replace the 'emotions' folder in :

sites/all/tinymce/tinymce/jscripts/tiny_mce/plugins/

or

modules/tinymce/tinymce/jscripts/tiny_mce/plugins/

Attachments:

Your business deserves to be found.

Tell us about your project. We answer in English or French, and we travel anywhere in the MRC de Papineau.

Display

Your choices stay in this browser. Nothing is sent.

Text size
100%
Colours
Reading
More help
Site accessibility