Midas

Midas is an editor much like TinyMCE and FCKEditor, but with a different usage paradigm. It expects that an entire page is something that can be editable, and allows editable regions to be specified.

The important difference is that it uses the HTML5 contentEditable feature on block elements, instead of using iframes, which allows for CSS to be applied in ways that other editors don’t handle.

I wrote and used a similar editor in the past (written in 2005, and utilized until now). It was pretty outdated, used iframes for contentEditable, and did some lame hackery to pull CSS in and apply it to the contents of the editable iframe. The methodology has some downsides in how the CSS can be created and managed, and I wasn’t able to find a solid editor that used anything besides iframes.

A lot of things have changed in the time that I originally wrote the editor, and it seemed time for a re-write. I decided to open source it so the community could build on it, and maybe help out. It’s fully tested using jasmine and cucumber, and the plan is to build it out to the same, or close to the same level as the other editors. But until then, it has some features that the other editors don’t provide, and lacks some that they do.

It requires Prototype, but after development slows down, it should become library agnostic. Midas only supports W3C compatible implementations of the contentEditable spec, which means Gecko and Webkit. Officially supported browsers are Firefox 3.6+, Safari 4.0+, and Chrome (it would seem all versions). More support for other browsers will be added over time, in theory, or we could wait until all the browsers support the W3C spec, which is my personal pipe dream.

1. Clone or fork the project and copy the files from public/distro into your own project.

2. Include the Javascript and CSS in the head tag of your HTML file(s).
Using the minified Javascript and bundled CSS (recommended):

• all the Javascript files in lib
• midas.min.js – minified and packed Javascript (configuration is not minified)
• midas_bundle.js – optional include, that keeps the palettes, panels, and select menus from making an ajax request
• midas.bundle.css – minified CSS, with image URLs replaced with data URLs (no images are needed when using this CSS, which greatly reduces the number of requests)

Using the non-minified and non-bundled versions:

• all the Javascript files in lib
• midas.js – non-minified / non-packed Javascript
• midas_bundle.js – optional include, that keeps the palettes, panels, and select menus from making an ajax request
• midas.css – non-bundled CSS, with image URLs intact
• you’ll also need copy the image assets from the projects public/images path

3. Add some ‘editable’ classnames to some block elements (div, h1, etc.), making sure that these elements also have proper ID attributes (for saving).

5. Instantiate Midas (at the bottom of the page, in window.onload, or in dom:loaded etc):

var midas = new Midas();

The Midas constructor takes three arguments, all objects, in the following manner:

• midas options
• toolbar options
• region options

So, instantiating Midas can be as simple as:

var midas = new Midas();

to as advanced as:

  var midas = new Midas({
    classname: 'some-editable-classname',
    saveUrl: '/path/to/save.aspx',
    useIframe: false
    }, {
    // toolbar options
    }, {
    // region options
  });

1. Midas Options

• classname — the classname on block elements to look for (default: ‘editable’)
• saveUrl: — the path to save to (default: window.location.href)
• saveMethod: — the save method, can be ‘put’ for update, or ‘post’ for create (default: ‘put’)
• configuration: — optionally provide a different configuration object (default: Midas.Config)
• useIframe: — this will load the document being edited into an iframe over the document being shown — can be true/false, or a string of the document to load (default: true)

2. Toolbar Options

• appendTo — element to append the toolbar to (default: null)

3. Region Options

• inline — inline mode allows the content regions to expand with the content, non-inline mode gets the width/height of the region and keeps it at that size (default: false)

Midas assumes that saves will be “updates”, so it uses the RESTful standard POST with the _method parameter set to “put”. It seems unlikely that Midas will be used to create pages often, so the default save method is considered PUT, however, as outlined above in the Midas Options section you can override this to be a CREATE action by specifying “post” instead.

To save successfully an ID attribute is required on any editable element (by default this is any element with the “editable” classname. The POST comes through with fields the name of the ID attribute of the elements that were editable.

… coming soon …

… coming soon …

… coming soon …

Midas has a few additional options, which are not in configuration or options.

• Midas.debug = true will enable debug loggin, which is mostly events and loading of views.
• Midas.silent = true will disable alerts, and other chrome level popups — which helps with CI testing etc.

The project is basically broken into three parts.. Javascript, the HTML views (dialogs, modals, etc), and the rake tasks. To get started run gem install bundler, and then bundle install, which should give you all the gems you’ll need for development and testing.

• midas:build – builds the installable files into the public/distro path

• midas:minify_js – generates midas.js and midas.min.js (configuration doesn’t get minified)
• midas:bundle_css – generates midas.css and midas.bundled.css

The javascript is broken into several files in the /public/javascripts/midas path.. midas.js is the controller more or less, and the other files are different aspects of the system. These get combined into a single file by running rake midas:build. The same is true for the CSS.

The following files are generated after running the rake task:

• public/distro/javascripts/midas.js
• public/distro/javascripts/midas.min.js
• public/distro/javascripts/midas_bundle.js
• public/distro/stylesheets/midas.css
• public/distro/stylesheets/midas.bundle.css

• run rake jasmine
• navigate to http://localhost:8888/
  – or —
• run rake jasmine:ci for your CI environment

• run cucumber

• after runing rake jasmine:server you can navigate to the following urls and confirm things are still in working order:
• http://localhost:8888/example/index.html
• http://localhost:8888/example/distro.html