Kupu - enabling color chooser

Version and browser info

Plone v2.5

Kupu v1.3.7

Firefox & MSIE

Note: see Duncan Booth's comment below for information (and much simpler instructions) for enabling the color chooser with Kupu 1.4, which ships with Plone 3.

Introduction

Why I chose to reenable color chooser?

My understanding is that color choosing capabilities were intentionally removed from the Plone implementation of Kupu.  Why?  Because it is theoretically and practically incorrect to hard code display attributes into content.  Instead display attributes (such as font colors) s/b assigned by CSS classes to allow them to be changed at the macro level to match changing site skins.

The reason I choose to reinstall Kupu color chooser on my site is that the assigning of classes to areas for text is currently only possible at the paragraph level.  And that does not fit the type of inline notation I have been doing in my personal knowledge base.  So I choose to compromise for the increase in granularity.

(I did note that allowing classes to be assigned at a "text selected" level of granularity is in the Kupu roadmap).  (Update: implemented as of Kupu 1.4!)

In the spirit of open source, I have decided to share this process for those who wish to use it while understanding the reason why perhaps they should not.

The new functionality

This how-to will add two buttons to the Kupu control bar.  These buttons will allow the user to set the foreground and/or background color of an area of text.  Upon clicking on one of the buttons you will be presented with a palette (no surprise) from which you may choose your desired color.  What is a bit unusual from other implementations of color choosers is that the palette will appear in your current browser window i.e. it will not be a popup.

Highlevel Steps

• Register CC Tool and Buttons in javascript init file

• Add CC buttons to tool bar
• Add table element to display color matrix
• Add CSS lines to show buttons
• Special change for Firefox
• Disable Kupu inline style filter
• Remove tags form Plone HTML Filter

Register CC Tool and Buttons in javascript init file

.

comments shown below:

  // add the contextmenu
    var cm = new ContextMenu();
    kupu.setContextMenu(cm);

  // now we can create a UI object which we can use from the UI
    var ui = new KupuUI(prefix+'select.kupu-tb-styles');
    kupu.registerTool('ui', ui);

  // function that returns a function to execute a button command
    var execCommand = function(cmd) {
        return function(button, editor) {
            editor.execCommand(cmd);
        };
    };
   
    // Add Code -- Begin

    var colorchoosertool = new ColorchooserTool('kupu-forecolor-button',
                                          'kupu-hilitecolor-button',
                                           'kupu-colorchooser');
    kupu.registerTool('colorchooser', colorchoosertool);

    // Add Code -- End
    
    var boldchecker = ParentWithStyleChecker(new Array('b', 'strong'),
					     'font-weight', 'bold');
    var boldbutton = new KupuStateButton(prefix+'button.kupu-bold', 
                                         execCommand('bold'),
                                         boldchecker,
                                         'kupu-bold',
                                         'kupu-bold-pressed');
    kupu.registerTool('boldbutton', boldbutton);

Add Buttons to toolbar

Add the lines below to .../kupu/plone/kupu_plone_layer/kupu_wysiwyg_support.html.

Place the code between the Add Code comments shown below:

    <span class="kupu-tb-buttongroup" id="kupu-bg-basicmarkup">

      <!-- Add Code - Begin -->
      <button type="button" class="kupu-forecolor" 
              id="kupu-forecolor-button" title="Color" 
              accesskey="b">&#160;</button>  
      <button type="button" class="kupu-hilitecolor" 
              id="kupu-hilitecolor-button" title="Color" 
              accesskey="b">&#160;</button>
      <!-- Add Code - End-->

      <button type="button" 
              class="kupu-bold" 
              id="kupu-bold-button" 
              title="Bold: Access key (Alt or Ctrl) + B" 
              i18n:attributes="title" accesskey="b">&#160;</button>
      <button type="button" class="kupu-italic" id="kupu-italic-button" 
              title="Italic: Access key (Alt or Ctrl) + I" 
              i18n:attributes="title" accesskey="i">&#160;</button>
    </span>

(To avoid javascript errors, you must add both of the buttons...even if you only intend to use one.)

Add table element to display color matrix

Add the lines below to .../kupu/plone/kupu_plone_layer/kupu_wysiwyg_support.html. (same file as previous step)

Place the code between the Add Code comments shown below:

<input class="standalone" 
       type="submit" 
       name="form.button.cancel" 
       value="Cancel" 
       style="margin-bottom:8px" />
  
    </span>
  
    <select id="kupu-ulstyles" class="kupu-ulstyles">
      <option value="disc" i18n:translate="list-disc">&#9679;</option>
      <option value="square" i18n:translate="list-square">&#9632;</option>
      <option value="circle" i18n:translate="list-circle">&#9675;</option>
      <option value="none" i18n:translate="list-nobullet">no bullet</option>
    </select>
    <select id="kupu-olstyles" class="kupu-olstyles">
      <option value="decimal" i18n:translate="list-decimal">1</option>
      <option value="upper-roman" i18n:translate="list-upperroman">I</option>
      <option value="lower-roman" i18n:translate="list-lowerroman">i</option>
      <option value="upper-alpha" i18n:translate="list-upperalpha">A</option>
      <option value="lower-alpha" i18n:translate="list-loweralpha">a</option>
    </select>

<!-- Add Code - Begin -->
<table cellpadding="0" 
       style="position: fixed; border-style: solid; border-color: black; border-width: 1px;" 
       cellspacing="0" id="kupu-colorchooser">
</table>
 <!-- Add Code - End -->
  
    
    <div style="display:block;" class="kupu-librarydrawer-parent">

    </div>
  
    <div id="kupu-linkdrawer" class="kupu-drawer kupu-linkdrawer">
      <h1 i18n:translate="">External Link</h1>

      <div id="kupu-linkdrawer-addlink" class="kupu-panels kupu-linkdrawer-addlink">
        <table cellspacing="0">

Add CSS lines to show buttons

Add the lines below to .../kupu/plone/kupu_plone_layer/kupuplone.css.dtml.

(I added these lines to the beginning of the file, just beneath the starting comments.)

.kupu-forecolor {
    background-image: url("&dtml-portal_url;/kupuimages/text-color.png");
}
.kupu-hilitecolor {
    background-image: url("&dtml-portal_url;/kupuimages/background-color.png");
}

And you must remove this line from the same file. (It points to a non existant image).  If you do not do this, your foreground image won't show up.

.kupu-forecolor {
    background-image: url("&dtml-portal_url;/plonekupuimages/text-color.gif");
}

Special change for Firefox

Make a change to .../kupu/common/kupueditor.js.

Change useCSS to styleWithCSS in two places in the lines shown below so that:

if (command != 'useCSS') {
   this.content_changed = true;
   // note the negation: the argument doesn't work as
   // expected...
   // Done here otherwise it doesn't always work or gets lost
   // after some commands
   this.getDocument().execCommand('useCSS', !this.config.use_css);
};

is changed to:

if (command != 'styleWithCSS') {
   this.content_changed = true;
   // note the negation: the argument doesn't work as
   // expected...
   // Done here otherwise it doesn't always work or gets lost
   // after some commands
   this.getDocument().execCommand('styleWithCSS', !this.config.use_css);
};

(just search for useCSS to make this change)

This is a bit of a hack on my part in that I made this change based on a blog entry I found (fascinating blog incidentally) without fully understanding the change other than it is required for Firefox to handle this modification correctly.  That said, I have been using this modification for well over a month with no problems.

Disable kupu inline style filter

You can configure Kupu to stop removing certain tags and tag attribute.

• For use with Firefox, you will need to allow span tags.
• For use with MSIE, you will need to allow font tags.
• For both browser you will need to allow the color & background-color attributes.

Here is how to do the configuration.

• Site Setup | Kupu Visual Editor

• You will see a group of tags which are not allowed and a checkbox by them.  The tags are center, span, tt, big, small, u, s, strike, basefont, font.
• Copy the list of tags to your clipboard.
• Uncheck the box by these tags.
• Paste your list of tags into the first box on the left below the Tag heading.
• Remove the span and font tags from your pasted list.
• To the Style Whitelist box, add color & background-color.
• Click Save.

.

Remove tags from Plone HTML Filter

The purpose of the prior step was prevent Kupu from removing tags upon saving a document.  Plone also has it own mechanism to move tags which are deemed as unsafe from a document before it is displayed.  In order for your documents to show their true (and new) colors you will need to alter the configuration of your site to allow the font and span tags to be displayed.

Here's how:

• ZMI | portal_transform | safe html
• Scroll down the valid tags table.
• Both the font and span tags must be added to this table if they are not already there.  They both should have an associated value of 1.  (I believe span is there in a default installation and font will need to be added)
  

Reboot your Plone/Zope server and clear your browser cache

...and color away.

http://www.gerryrodman.com/