Extension for easy picking of icons directly from editor

Summary

There are many useful icons bundled with Foswiki and available in FamFamFamContrib ... but did you ever tried to actually add some of them to a topic? You had either to look it up in DocumentGraphics , or find out its URL - quite a hassle. Could it be possible just to pick one from the WYSIWYG editor? This extension aims to do exactly that.

pick_icon.png

Extension adds new button on the TinyMCE editor toolbar - the star visible on the screenshot, which opens icon picker. Just click on desired icon and it will be added into your text.

Installation

Warning: This extension is under development and it will undergo major changes in future. Now it's just a hack of emotions plugin. Your mileage may vary.

  1. Unzip contents of attached foswikiicons.tar.gz into %PUBURLPATH%/System/TinyMCEPlugin/tinymce/jscripts/tiny_mce/plugins. It will create new subdirectory named "foswikiicons" .
  2. Enable foswikiicons plugin for TinyMCE in SitePreferences, for example:
       * Set TINYMCEPLUGIN_ADDITIONAL_MCEPLUGINS = emotions,foswikiicons,autoresize
       * Set TINYMCEPLUGIN_ADDITIONAL_BUTTONS2 = emotions,foswikiicons
       
  3. Create new topic named System.FoswikiIconsMenu, which will become the picker popup window. Copy there contents of attached FoswikiIconsMenu.txt. In the first part, all the icons are macros from DocumentGraphics . Near the end are national flags from FamFamFamContrib - these are using standard img tags without any macros defined.

TODO

  • Rename the plugin files into PickingIconsEasily to be consistent
  • Improve the documentation (this topic is rather a brain dump)
  • The TOC in icon picker does not work
  • The picker can be improved, either by using FormattedSearch over DocumentGraphics (so that the list of icons isn't duplicated), or by putting all icons into one image map (for faster rendering).
  • Use image descriptions (provide title/alt properties).
  • Icons defined by macros don't show as images in the editor
Feedback is welcome!

-- JurajVariny - 19 Nov 2010

Mate, That is excellent! We should get this packaged up as a Foswiki Extension - see ExtensionDeveloperGuide, and get is commited to the SvnRepository ....

If you need help - just ask smile we're on InternetRelayChat too

-- SvenDowideit - 20 Nov 2010

PickingIconsEasily Development

This is the topic to discuss development of download PickingIconsEasily

help If you need support, go to Support.PickingIconsEasily where you can ask questions and find answers to previously asked questions. warning If you want to report a bug, or a feature request, go to Tasks.PickingIconsEasily where you can see already submitted issues and where you can submit a new bug report or feature request.

Active Items

Discussion

Cool! You could make this a plugin which adds itself to TinyMCE automatically, check TinyMCECleanStickyBitsPlugin as an example

-- PaulHarvey - 20 Nov 2010

Updated foswikiicons.tar.gz , the first version was broken.

-- JurajVariny - 21 Nov 2010

BasicForm edit

TopicClassification ExtensionsDevelopment
TopicSummary Extension adds icon picker button on the editor toolbar. Clicking on desired icon adds it into text.
InterestedParties
I Attachment Action Size Date Who Comment
FoswikiIconsMenu.txttxt FoswikiIconsMenu.txt manage 73 K 19 Nov 2010 - 23:58 JurajVariny Example icon picker
foswikiicons.tar.gzgz foswikiicons.tar.gz manage 1 K 21 Nov 2010 - 15:13 JurajVariny TinyMCE plugin
pick_icon.pngpng pick_icon.png manage 84 K 19 Nov 2010 - 23:21 JurajVariny Screenshot of icon picker
Topic revision: r4 - 21 Nov 2010, JurajVariny
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy