Suggestion for a single but powerfull function (for the developers) to be able to set any and multiple properties on any element or multiple elements (in the selection) in the editingArea.
Arguments:
- Three Arguments (tagName, attribute, value)
-
- tagName - (string) The tagName of the target element(s) in the selection.
- element - (element) DOM node in the editingArea
- attribute - (string) Name of the attribute to set.
- value - (string or int) Value to set.
-
- Two Arguments (tagName, value)
-
- tagName - (string) The tagName of the target element(s) in the selection.
- element - (element) DOM node in the editingArea
- properties - (object) Object with its keys/value pairs representing the properties and values to set for the Element.
-
- One Argument (elements and properties)
- element(s) and properties - (object) Object with its keys/value pairs representing the element(s) to affect (by tagname or DOM node) and values as a properties object to set for the Element.
- element(s) and properties - (object) Object with its keys/value pairs representing the element(s) to affect (by tagname or DOM node) and values as a properties object to set for the Element.
Examples:
editingArea.set('image', { 'src': 'http://www.google.com/intl/en_ALL/images/logo.gif', 'styles': { 'border': '1px solid white' } }); editingArea.set({ 'img': { 'src': 'http://www.google.com/intl/en_ALL/images/logo.gif', 'styles': { 'border': '1px solid white' } }, myImg: { 'alt': 'an image I got from the DOM of the editingArea myself' } });
Comments
- The toolbar should adapt to the properties that were set. E.g. bold, font-size, ...
- When properties are set on the selected text, a span should be wrapped around the text if needed.
- The set function could also be used for events;
- and be used to trigger toolbar commands (to apply their effect in the selection in the editingArea or open their dialog). For this the attributes would be 'string commandName' [, string or object value], with the value being the label of a select list or the values to initialize a dialog with.
- Inspired by mootools' set function, http://mootools.net/docs/Element/Element#Element:set