Postings from 2008/06

FCKEditor for the Radiant CMS

In my experience customizing and deploying CMSs for clients, 99% of folks want a WYSIWYG editor, for good or ill. Usually good.

I’ve customized the FCKEditor for various projects, and I like:
  • the way it uses “connectors” to allow for the integration of the WYSIWYG with in-site assets / resources and file uploads,
  • that it generates clean HTML for the flexibility the WYSIWYG provides,
  • and it’s good at not molesting any custom HTML you throw in.

So I’ve made a Radiant FCKEditor extension and put it on github.

See the readme for install instructions, requirements and other crap.

click for embiggening

Features

  • In-WYSIWYG file uploads and image placement,
  • Spellchecking – provided aspell is installed,
  • Radius-tag awareness – I did my best to tell FCKEditor to leave radius tags alone, even customizing the tags it should ignore at the PageType level,
  • Works everywhere FCKEditor does,
  • Implemented as a “filter”, allowing you to manage arbitrary numbers of page parts with it,
  • You can dynamically add / remove it from page parts as you see fit.

The Future

  • Create an admin tab to allow for editor toolbar customization,
  • Integrate the link browser to allow for dirt-simple in-site linking,
  • Offer optional integration with the page_attachments plugin for more logical file organization.

Get involved

Really! Drop me a line – dan @ endpoint dot com to discuss your ideas or make a fork, push your changes and send me a pull request. All reasonable offers accepted!

"Flexmenu" style menus in the Radiant CMS

I have no idea if there’s a term to describe this kind of navigation, but I’ll use “flexmenu” as it’s what the excellent WebGUI CMS calls them, implemented via nested ul / li tags.

I like this method of site navigation as it gives a user the ability to see the entirety of the site along with the ability to zoom in / out easily and bounce between sub-sections.

As you drill down into the page hierarchy, the siblings of each page stay open. I’ll try to illustrate:

At the root, where “1” is the root.

1.1
1.2 <-- User clicks this
1.3
1.4

Next:

1.1
1.2
  1.2.1
  1.2.2
  1.2.3 <-- User clicks this
  1.2.4
  1.2.5
1.3
1.4

That opens up.

1.1
1.2
  1.2.1
  1.2.2
  1.2.3
    1.2.3.1 <-- leaf node
    1.2.3.2 <-- leaf node
    1.2.3.3 <-- leaf node
  1.2.4
  1.2.5
1.3
1.4

User clicks a completely separate part of the tree, and the 1.2 branch closes.

1.1
1.2
1.3 <-- User clicks here
  1.3.1
  1.3.2
  1.3.3
1.4

This is implemented via two snippets- a container and a recursive snippet for each node:

Container Snippet

 <r:if_parent>
 <div id="left-column-nav">
 <r:find url="/">
   <ul>
     <r:snippet name="menu-line" />
   </ul>
 </r:find>
 </div>
 </r:if_parent>

Recursive Snippet, named “menu-line”

 <r:children:each>
   <li<r:if_self> class="active"</r:if_self>><r:link />
       <r:if_ancestor_or_self>
         <r:if_children>
           <ul>
             <r:snippet name="menu-line" />
           </ul>
         </r:if_children>
       </r:if_ancestor_or_self>
   </li>  
 </r:children:each>

To use an example from a real site, when at the page ”/about/people/”, this navigation menu will yield HTML similar to:

<div id="left-column-nav">
  <ul>
    <li><a href="/about/">About</a>
      <ul>
        <li><a href="/about/goals/">Goals</a></li>  
        <li><a href="/about/history/">History</a></li>  
        <li><a href="/about/mission/">Mission</a></li>  
        <li class="active"><a href="/about/people/">People</a>
          <ul>
            <li><a href="/about/people/executive-committee-members/">Executive Committee Members</a></li>  
            <li><a href="/about/people/other-committees/">Other Committees</a></li>  
          </ul>
        </li>  
      </ul>
    </li>  
    <li><a href="/news/">News</a></li>  
    <li><a href="/programs/">Programs</a></li>  
    <li><a href="/publications/">Publications</a></li>  
    <li><a href="/resources/">Resources</a></li>  
    <li><a href="/morville-house/">Morville House</a></li>  
  </ul>
</div>

Nicely nested and easily styled via CSS.

Recommend me on Working With Rails

Add to Technorati Favorites

Add to Google