Adding custom shortcut links to TinyMCE dialogs in Plone

Plone's Products.TinyMCE versions 1.3beta+ provide custom shortcut links in Add link and Add images dialogs. You can add your site specific shortcuts there yourself.

The most common use case is a shortcut link into a folder which acts as a site image bank. On multilingual sites this folder is

  • Below natural language folders in the site root (e.g.  /image-bank when you have /fi and /en)
  • Language neutral – images are shared across the languages

Because of the special language neutral nature, navigating to the image bank folder using normal Plone navigation is difficult.

For adding images use case we can fix this by including a shortcut which directly takes you to the image bank from main Add image screen.

Below is an example of Finnish shortcut “Kuvapankki” which is a custom addition besides Home and Current Folder.

../_images/tinymce_images.png

New TinyMCE shortcuts can be registered as global utility via Products.TinyMCE.interfaces.IShortcut interface.

We’ll register our image bank as a shortcut into TinyMCE image dialog.

First make sure your add-on is grok’ed.

Then drop in the following file shortcut.py file into your add-on:

from five import grok

from Products.TinyMCE.interfaces.shortcut import ITinyMCEShortcut

class ImageBankShortcut(grok.GlobalUtility):
    """Provides shortcut to the language neutral image bank below language folders """

    grok.name("imagebank")
    grok.provides(ITinyMCEShortcut)

    # This time we don't bother with i18n and assume
    # the whole world understands Finnish
    title = u'Kuvapankki'

    # Portal root relative path
    link = "/kuvapankki"

    def render(self, context):

        # http://collective-docs.readthedocs.org/en/latest/misc/context.html
        portal_state = context.restrictedTraverse('@@plone_portal_state')

        return ["""
        <img src="img/folder_current.png" />
        <a id="currentfolder" href="%s">%s</a>
        """ % (portal_state.portal_url() + self.link, self.title)]

After this you still need to go to TinyMCE control panel (http://localhost:8080/Plone/@@tinymce-controlpanel) and enable the link button in the settings for Image Shortcuts.

Note: You might also want to disable TinyMCE inline image uploads through CSS and disable image creation in arbitraty folders on your site.

If you have anything to contribute for this article do it in collective.developermanual WYSIWYG page.

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

Leave a Reply

Your email address will not be published. Required fields are marked *