Provides a front end for editing content in a contextual way with WYSIWYG editing
MIT License
h1. 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.
h2. The Story
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.
h2. Installation and Usage
Clone or fork the project and copy the files from public/distro into your own project.
Include the Javascript and CSS in the head tag of your HTML file(s). Using the minified Javascript and bundled CSS (recommended):
Using the non-minified and non-bundled versions:
Add some 'editable' classnames to some block elements (div, h1, etc.), making sure that these elements also have proper ID attributes (for saving).
Instantiate Midas (at the bottom of the page, in window.onload, or in dom:loaded etc):
h2. Midas Options
The Midas constructor takes three arguments, all objects, in the following manner:
So, instantiating Midas can be as simple as:
to as advanced as:
h3. Supported Options
h2. Midas and Saving
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.
h2. Midas Configuration
... coming soon ...
h2. Adding Dialogs and Modals
... coming soon ...
h2. Adding Additional Editor Features
... coming soon ...
h2. Additional Items
Midas has a few additional options, which are not in configuration or options.
h2. Development
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.
h3. Rake Tasks
@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
h3. Javascript
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:
h4. Testing with Jasmine:
h4. Testing with Cucumber:
h4. Regression testing / Examples: