the singularity of being and nothingness
Posts tagged ContentBox
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: Creating a CKEditor Plugin for Complex Data Types
Jan 19th
I recently developed a simple module for ContentBox called jsFiddle. Basically, it allows you to insert “fiddles” from the excellent http://jsfiddle.net into your posts and pages. In developing this module (and CKEditor plugin), I wanted to be able to insert complex data into the content editor, but then be able to re-edit that content after insertion. I’m pretty happy with how it turned out.
In the following paragraphs, I’m going to walk through the process of developing a ContentBox module that includes a CKEditor plugin which is capable of content re-editing. Hopefully this will inspire some others to develop some killer new ContentBox modules with helpful CKEditor plugins.
Some ContextNOTE: In this walkthrough, i will include snippets of code, but most of them will be severely trimmed for the purposes of this post. If you really want to follow along with the full code, please grab it from the GitHub repo. Furthermore, I’m not advocating that this is the “best” or “only” way to accomplish this. My only intention is to share some ideas about things that have worked for me. So if you have corrections or suggestions for how things can be done better, I’m always ready and willing for civil, constructive feedback 🙂
Before we More >
CKEditor and ContentBox: A Fun Editing Option
Jan 13th
Over the last two days, I’ve been playing around alot with a new plugin that I’ve been working on for inclusion in CKEditor, expressly for the purposes of creating a very handy way of inserting snippets of code, decorated by Syntax Highlighter, into ContentBox‘s content editor.
Some of the functionality I’ve been playing around with is the different ways in which you can trigger “edit” events on elements in CKEditor, primarily for the purpose of opening a modal window and allowing for editing of the element’s properties (such as href, title, class, etc.). This weekend, I brought the options in the new plugin I’m working on up to the following:
- Via link in context menu
- Double-clicking the element
- And the most interesting…using jQuery to help overlay an inline-tooltip (see below)
In my next post, i’ll describe how to do this…just wanted to put out a teaser before I sleep and prepare for the new week!
Share this: 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 >
