CKEditor Inline selection wrapping

Question

I'm looking for a way to add a inline span element with attributes to a selection. The hard part of this is getting it working with selections that pass over multiple block level elements.

I was looking in the sourcecode of the StyleCombobox and found this line.

var style = styles[ value ],
elementPath = editor.elementPath();
editor[ style.checkActive( elementPath ) ? 'removeStyle' : 'applyStyle' ]( style );

This way it already works on multiple block level elements.

The only thing is that i would like to apply attributes to the span that is made around the multiple selections for different block level elements instead of applying a style element.

Does anyone know how this can be done?

Answer 1

I used this as solution. It is indeed possible to set attributes and element type. this wasn't defined in the api. I found this in the CKEditor 3.0 api (older version)

var style = new CKEDITOR.style({attributes: {name:"changed"}});
editor.applyStyle(style);

Answer 2

The latest Solution for your Problem.

Get Selected Text:

editor.getSelection().getSelectedText();

Put tags and attributes

editor.applyStyle(new CKEDITOR.style({
        element : 'span', 
        attributes : {'class':'YourClass','data-Otherattr':'otherattrvalue'}, 
        style : {'background-color':'gray'} 
    });
);