CKeditor: Wrap a selection with tags

[allienato]

Hi, I'm trying to add a custom button in my editor that put html tags around a user selection, for styling purposes (just like bold, italic.. buttons do).
I have to wrap the text with two span tags, which have a style attribute with some css..
I'm able to do the reverse process (remove those span tags on a "styled" text), but I'm stuck with adding them.
I made a plugin like this:

Code:

(function(){
var a= {
  exec:function(editor){
var selection = editor.getSelection();
var el = selection.getStartElement();
var parent = el.getParent();
var text = parent.getText();
if (el && parent.hasClass("ymarker")) {
   el.remove(true);
   parent.remove(true);
} else {
    var save = selection.getNative();
    var element = CKEDITOR.dom.element.createFromHtml( '<span class="ymarker" style="background: url(&quot;.../images/ymarker_right_corner.gif&quot;) no-repeat scroll right center transparent; height: 12px; padding-right: 6px; position: relative; left: -8px; margin-right: -12px;"><span style="background: url(&quot;.../images/ymarker_left_corner.gif&quot;) no-repeat scroll 0px 6px transparent; padding: 0pt 0pt 0pt 8px;">' + save + '</span></span>' );
    editor.insertElement(element);
}
  }
},

b="marker";
CKEDITOR.plugins.add(b,{
  init:function(editor){
   editor.addCommand(b,a);
   editor.ui.addButton("marker",{
    label:"Marker",
    icon: this.path + "marker.png",
    command:b
   });
  }
});
})();

that it works on normal text, but if the selected text is inside <em>, other <span>, etc.. it loses all of them.

I believe I should use Ranges, but I don't know how. I don't know javascript very well, but I can't find a solution (searched on google, stackoverflow, in this forum..) and it's driving me mad.

thank you in advance!