====== SimpleEditor ======
[[http://www.clientcide.com/docs/Forms/SimpleEditor|docs]]
As much as I'd like to implement a wysiwyg editor or use one of the 3rd party ones out there like [[http://tinymce.moxiecode.com/|TinyMCE]] or [[http://www.fckeditor.net/|FCKeditor]], or even the [[http://forum.mootools.net/viewtopic.php?id=746|MooTools wysiwyg by Inviz]], it doesn't suit my needs right now. This annoys me, but the fact is that wysiwyg editors built in browsers are fraught with peril. Creating one with flash is an option, but I'm not a flash expert.
So what I've created is an html editor that just helps you wrap your content with custom tags. I need to add tag support and that sort of thing like [[http://icebeat.bitacoras.com/mootools/posteditor/|posteditor]] (or I might just integrate posteditor).
Anyway, basically this works kinda the way my form validator works. You create commands (like "bold" or "underline") and add them to the editor's list of commands. You can add commands to an instance or to the global set. Then you add buttons to your editor that reference the command and you're set.
Execute the code below, then add some text to the area above, select it, and click some of the editor links...
new SimpleEditor($('simpleEditor'), $$('#editToolbar img'));
Here's an example of what it takes to add a command to the editor:
/* Default commands: */
SimpleEditor.addCommands({
/* bold - */
bold: {
shortcut: 'b',
command: function(input){
input.insertAroundCursor({before:'',after:''});
}
},
/* underline - */
underline: {
shortcut: 'u',
command: function(input){
input.insertAroundCursor({before:'',after:''});
}
}
});
And then to make these work, you add a link or image or whatever to your editor like so:
In this case I use images and pass those along when I create a new instance of the editor. It uses the //rel// attribute to map to the command.
