A simple html editor for wrapping text with links and whatnot.
Aaron Newton <aaron [dot] newton [at] cnet [dot] com>
| Mootools | Moo.js, String.js, Array.js, Function.js, Element.js, Dom.js |
| CNET | <Element.forms.js>, <Element.shortcuts.js> |
| Optional | <Trinket.Base.js>, <Trinket.contexts.js>, <Trinket.LinkBuilder.js>, StickyWinModal, stickyWinHTML |
| simple. editor.js | A simple html editor for wrapping text with links and whatnot. |
| SimpleEditor | A simple html editor for wrapping text with links and whatnot. |
| Properties | |
| addCommand | Inserts a single command to the SimpleEditor. |
| addCommand | Inserts a collection of commands to the SimpleEditor. |
| Change Log | $Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/js.widgets/simple.editor.js,v $ $Log: simple.editor.js,v $ Revision 1.1 2007/06/02 01:35:46 newtona * empty log message * |
A simple html editor for wrapping text with links and whatnot.
| input | (DOM element or id) the input this editor modifies |
| buttons | (css selector or Elements collection) all the links and/or buttons/images that make changes to the text when clicked. |
| commands | (optional, object) a commands object (see below) for this editor. |
SimpleEditor comes with a handful of common commands to wrap text with bold tags or italics, etc. You can define your own and add them to all SimpleEditors or to a specific instance.
A command id made up of a shortcut key and a function that is passed the input.
bold: {
shortcut: 'b',
command: function(input){
input.insertAroundCursor({before:'<b>',after:'</b>'});
}
}When the user clicks the button or hits ctrl+b, the tag will be inserted around the selected text.
See SimpleEditor.addCommand and SimpleEditor.addCommands on how to add your own.
The buttons passed in must have a property “rel” equal to the key of the command they execute.
<img src="bold.gif" alt="Bold (ctrl+b)" title="Bold (ctrl+b)" rel="bold">
In the example above, the rel=”bold” will map this image to the bold command.
| Properties | |
| addCommand | Inserts a single command to the SimpleEditor. |
| addCommand | Inserts a collection of commands to the SimpleEditor. |
Inserts a single command to the SimpleEditor.
Note: You can use this method on your instance of this class to add the command to that instance, or you can execute it on the class namespace and all SimpleEditor instances created after this will get these commands.
| key | (string) the unique identifier for this command (“bold”, “italics”, etc.) |
| command | (function) funciton to execute on the input; the function is passed the input as an argument |
| shortcut | (character, optional) a shortcut key that, when pressed in conjunction with ctrl, will execute the function |
//all instances will get bold tags as <strong></strong>
SimpleEditor.addCommand('bold', function(input) {
input.insertAroundCursor({before:'<strong>',after:'</strong>'});
}, 'b')
//but this instance will get bold tags as <b></b>
var myEditor = new SimpleEditor(input, $$('img.editbuttons'));
myEditor.addCommand('bold', function(input){
input.insertAroundCursor({before:'<b>',after:'</b>'});
}, 'b');
Inserts a collection of commands to the SimpleEditor.
Note: You can use this method on your instance of this class to add the command to that instance, or you can execute it on the class namespace and all SimpleEditor instances created after this will get these commands.
| commands | (object) a key/value set of commands (see below) |
This is an object whose key is the command key. Its members are key/values for the shortcut value and the command function. The example below should illustrate this more clearly.
//all instances will get bold tags as <strong></strong> and italics as <em></em>
SimpleEditor.addCommands(SimpleEditor.addCommands({
bold: {
shortcut: 'b',
command: function(input){
input.insertAroundCursor({before:'<strong>',after:'</strong>'});
}
},
italics: {
shortcut: 'i',
command: function(input){
input.insertAroundCursor({before:'<em>',after:'</em>'});
}
}
));
//but this instance will get bold tags as <b></b> and italics as <i></i>
var myEditor = new SimpleEditor(input, $$('img.editbuttons'));
myEditor.addCommands(SimpleEditor.addCommands({
bold: {
shortcut: 'b',
command: function(input){
input.insertAroundCursor({before:'<b>',after:'</b>'});
}
},
italics: {
shortcut: 'i',
command: function(input){
input.insertAroundCursor({before:'<i>',after:'</i>'});
}
}
});
function $A( array, start, length )
Use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, arguments of a function, or an object.
function $each( iterable, fn, bind )
returns the element passed in with all the Element prototypes applied.
function $( el )
Returns a DOM element for in-page popups (<stickyWin>) with a default style.
function stickyWinHTML ( caption, body, options )