I recently created a module for ContentBox that allows you to embed “fiddles” from the excellent http://jsfiddle.net. If you’ve not used this site before, you really should 🙂

In developing this module, I had very specific goals, particularly for the user interface in the rich HTML content editor, namely CKEditor. My goals were simple:

  • Have toolbar icon for easy insert
  • Allow easy insert from context menu (right-click) within the content editor area
  • After content/config/whatever is inserted into content editor area, show something meaningful (other than ugly red iFrame box)
  • Allow user to act on inserted content–particularly, be able to edit all the properties of the content that were configured pre-insert

The first two are really easy. If you look at the source of the PasteBin module, you’ll see really quickly how to do those, so I’m not going to dwell on that. In this post, however, I do want to show how simple it is to make inserted content regions richly editable, treating them like complex data, rather than just simply strings.

NOTE: In the following, I include code-snippets, but often omit unimportant or redundant bits. Be sure to grab the entire source to see everything in its full context 🙂

Insert Content Region

Before we look at creating the editable More >