css-plugin enhanced for div/span selection

[chr@…]

Hi xinha Team, great work! here is my first part. I had enhanced the css-plugin to support span and div tags in one selector. Its tested on Firefox 1.04 and IE 6. I havn't checked this verision with the context parameter.

to see whats going on, simply check the code.

If it's usefull, just add it to the distribution.

CSS:

span.small {
	font-size:10px; 
	font-family:Verdana,Arial,Helvetica,Helv,sans-serif;
	font-weight:bold;
	background-color: #ccaa66;
	color:#7D7B7B;
}

div.test {
	border:1px solid grey; 
	background-color:#E0E0E0; 
	padding:4px; 
	margin:0px; 
}

registerPlugin:

editor.registerPlugin(CSS, {
 combos : [
   { label: "Info",
     options: { "None"    : "",
                "Schmal"  : "span-small",	// select span with class small
                "Warnung" : "div-test",		// select div wiht class warn
              }
   }
 ]
});

CSS-Plugin:

// Simple CSS (className) plugin for the editor
// Sponsored by http://www.miro.com.au
// Implementation by Mihai Bazon, http://dynarch.com/mishoo.
//
// (c) dynarch.com 2003
// Distributed under the same terms as HTMLArea itself.
// This notice MUST stay intact for use (see license.txt).
//
// Enhanced by Christian Ruetgers (www.1komma6.com). Additionally
// you may use div-Tags.

function CSS(editor, params) {
	this.editor = editor;
	var cfg = editor.config;
	var toolbar = cfg.toolbar;
	var self = this;
	var i18n = CSS.I18N;
	var plugin_config = params[0];
	var combos = plugin_config.combos;

	var first = true;
	for (var i = combos.length; --i >= 0;) {
		var combo = combos[i];
		var id = "CSS-class" + i;
		var css_class = {
			id         : id,
			options    : combo.options,
			action     : function(editor) { self.onSelect(editor, this, combo.context, combo.updatecontextclass); },
			refresh    : function(editor) { self.updateValue(editor, this); },
			context    : combo.context
		};
		cfg.registerDropdown(css_class);

		// prepend to the toolbar
		toolbar[1].splice(0, 0, first ? "separator" : "space");
		toolbar[1].splice(0, 0, id);
		if (combo.label)
			toolbar[1].splice(0, 0, "T[" + combo.label + "]");
		first = false;
	}
};

CSS._pluginInfo = {
	name          : "CSS",
	version       : "1.1",
	developer     : "Mihai Bazon, enhanced by Christian Ruetgers",
	developer_url : "http://dynarch.com/mishoo/, http://www.1komma6.com/",
	c_owner       : "Mihai Bazon",
	sponsor       : "Miro International",
	sponsor_url   : "http://www.miro.com.au",
	license       : "htmlArea"
};

CSS.prototype.onSelect = function(editor, obj, context, updatecontextclass) {
	var tbobj = editor._toolbarObjects[obj.id];
	var index = tbobj.element.selectedIndex;
	var className = tbobj.element.value;

	var match_res = className.match(/^(div|span)-(.+?)$/);

	// >>> 1k6 Erweiterung!
	// default ist span
	tag_to_use = "span";
	if(match_res && RegExp.$1 && RegExp.$2) {
		// split succesful, maybe div-tag? otherwise use span as default behaviour
		if(RegExp.$1 == "div")
			tag_to_use = "div";
		className = RegExp.$2;
	}

	// retrieve parent element of the selection
	var parent = editor.getParentElement();
	var surround = true;

//	var is_span = (parent && parent.tagName.toLowerCase() == tag_to_use);
	// determine tagName wether div or span
	var is_span = (parent && parent.tagName.match(/^(div|span)$/i));
	var update_parent = (context && updatecontextclass && parent && parent.tagName.toLowerCase() == context);

	if (update_parent) {
		parent.className = className;
		editor.updateToolbar();
		return;
	}

	if (is_span && index == 0 && !/\S/.test(parent.style.cssText)) {
		// remove Tag
		while (parent.firstChild) {
			parent.parentNode.insertBefore(parent.firstChild, parent);
		}
		parent.parentNode.removeChild(parent);
		editor.updateToolbar();
		return;
	}

	if (is_span) {
//>>>		if (parent.childNodes.length == 1) { // old
		if (parent.childNodes.length >= 1) {
			if(parent.tagName.toLowerCase() != tag_to_use) {
				// the tag has to be changed
				new_tag_node = editor._doc.createElement(tag_to_use); // create new element in the editors document level
				new_tag_node.className = className; // set new class to the new tag
				for(i=0; i < parent.childNodes.length; i++) // clone the whole parent node structure to the new node
					new_tag_node.appendChild(parent.childNodes[i].cloneNode(true));

				parent.parentNode.replaceChild(new_tag_node, parent); // replace the old with the new node, READY!
			} else {
				// no tag-change: maybe we could simply change the class of the parent node?
				parent.className = className;
			}

			surround = false;
			// in this case we should handle the toolbar updation
			// ourselves.
			editor.updateToolbar();
		}
	}

	// Other possibilities could be checked but require a lot of code.  We
	// can't afford to do that now.
	if (surround) {
		// shit happens ;-) most of the time.  this method works, but
		// it's dangerous when selection spans multiple block-level
		// elements.
		editor.surroundHTML("<"+tag_to_use+" class='" + className + "'>", "</"+tag_to_use+">");
	}
};

CSS.prototype.updateValue = function(editor, obj) {
	var select = editor._toolbarObjects[obj.id].element;
	var parent = editor.getParentElement();
	if (typeof parent.className != "undefined" && /\S/.test(parent.className)) {
		var options = select.options;
		var value = parent.className;
		// check for regular and "expanded" css-names
		var value_tagged = parent.tagName.toLowerCase()+"-"+parent.className;
		for (var i = options.length; --i >= 0;) {
			var option = options[i];
			if (value == option.value || value_tagged == option.value ) {
				select.selectedIndex = i;
				return;
			}
		}
	}
	select.selectedIndex = 0;
};