the singularity of being and nothingness
Posts tagged Module
CKEditor Plugin: Redux
Jan 21st
In my last post, I showed how it’s not only possible, but also pretty dang easy to make a custom CKEditor plugin that can interact seamlessly with a module. While it worked pretty well in modern browsers, it completely bombed on older versions of Internet Explorer (surprise, surprise).
The main *problem* with older IE support is the use of a custom html tag (<fiddle>) to store the complex data type in CKEditor. Not only does CSS styling on this unknown element fail in <IE8, but it’s insertion into CKEditor also fails completely, presumably because of the old DOM implementation.
While annoying, this is hardly a deal killer. The choice to use a “fiddle” element was hardly required…I did it because I wanted to. However, in the spirit of backward-compatibility, I’ve updated the plugin to work with a plain-old <div>.
Without further ado, here are a relevant pieces that I’ve updated:
EntryHelper.cfm (The File Where the Insertion Occurs)/*
* Common method to prepare fiddles for insertion...and insert them
* @inputs - collection of inputs
*/
function prepareFiddle( inputs ) {
...
// create double-mustache syntax
html += '
<div id="cbjsfiddle">jsFiddle - {1}'.format( vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6], vals[7], vals[8] ); // insert into More > ContentBox: Editable Content Regions in CKEditor
Jan 2nd
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.
Insert Content RegionNOTE: 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 🙂
Before we look at creating the editable More >
ContentBox: Hooking into the Page Editor
Dec 27th
As you’re developing ContentBox modules, you will certainly come to a point where you’ll want to be able to extend the Page/Entry editor. Whether you need to add a custom section to the options sidebar, or add some functionality beneath the main content editing area, ContentBox makes it incredibly easy to add your own custom functionality/views via interceptors.
In what follows, I’ll share an example of a module I recently developed and show how simple it is to add your own custom functionality to the ContentBox page/entry editor.
Some ContextBefore we begin, let me describe what we’re building. My module is called “Super Menu”, and allows users to not only create custom menus from page/post content (as well as custom links), but also allows users to apply these custom menus to individual pages and entries. Because of this, my module needs to have a “section” in the page/entry editor that allows users to choose from a drop-down of menu names. For my module, I decided to place it in the “Page Details” sidebar. At the end, it should look something like this (notice the custom “Super Menu” section at the bottom):
And, of course, when the form itself is submitted, I’ll want to More >
