getSelectionHTML function weird behaviour - not working (SOLVED)

Hi there

I have an issue when trying to insert a custom span within the editor but ALSO include the selected html to not lose it as it holds inner spans to maintain style formatting.

Problem is:

I have (say) three spans within the editor:

<span style="color:red;">What a Wonderful life!</span>

<br />

<span style="color:yellow;font-size:20px;">Seriou<span style="font-size:10px;">sly</span>?</span>

<br />

<span style="color:green;">Very much so!</span>

Now, when I select within the editor which should include:

iou<span style="font-size:10px;">sly</span>?</span><br /><span style="color:green;">Very mu

I have a custom plugin that sets that as a new colour (the exsiting colordialog plugin is not dynamic enough), that does the following:

1. Get the selected colour from the dropdown clicked
2. Gets the parent's span of the selected editor text
   1. it returns: color:yellow
3. Using the parent's span attributes I replace any attributes that is a colour and insert the new colour (so to keep any font-sizes and other non colour attributes)
4. I then want to get all the HTML that is currently selected so that I maintain children unique style formatting i.e. font-sizes and font-familes that are different to the parent span.  I've looked and looked for a good function and found that people often use this:

   function getSelectionHtml(editor) {
                            var sel = editor.getSelection();
                            var ranges = sel.getRanges();
                            var el = new CKEDITOR.dom.element("span");
                            for (var i = 0, len = ranges.length; i < len; ++i) {
                                el.append(ranges[i].cloneContents());
                            }
                            return el.getHtml();
                        }

• This seems fine i.e. if I output it into an alert I get the correct selection of html... as expected the results return as a new span i.e.

<span style="font-size:20px">iou<span style="font-size:10px;">sly</span>?</span><br /><span style="color:green;">Very mu</span>

• BUT, when I insert it BACK into the editor within the selected area to begin with the new span replaces the full parent parent of the selected text.....  So for our example it completely removes the "Seriou" and the "ch so!" and replaces it with the newly created span.
• I'm using the insertHTML(); function to insert it back into the editor's output.

I've tried to at least understand what is going on and believe its due to the getSelectedHTML function - it doesn't replace any letters if I put in a controlled set of characters i.e "ABC" and not include html finding - perhaps it reseting where the cursor is within the editor to perhaps the parent but to be honest I am stumped and would be very thankful for any guidence on this.