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!

[Connie]

please try to understand that this is not the right place for that.

CKEditor is a thirdparty-software which is integrated in GetSimple, but it is another project.

I for instance know something about CKEditor, but not everything.

There is documentation at http://docs.cksource.com/ and a forum at http://cksource.com/forums/

I think that place is more adaequate to get help or support for your problem

Cheers, Connie

[allienato]

Hi Connie, I know that this isn't the right place for this issue. I tried to ask in ckeditor forum but I can't get a single word from anyone. And there's a lack of documentation for it, quite terrible sometimes.
I've just wondered if someone here have some experience in customizing CKeditor, which comes with default GetSimple installation.

[Connie]

I am sorry that the forum there is so bad, I did not know that

but why do you want to define a separate button, you can add your span to the styles box, instead of "red title" for example, that should not be so difficult


as described in http://get-simple.info/wiki/how_to:edito...tom_files, you can define the styles in the standard-stylesheet

for example:

Code:

{ name : 'My Span', element : 'span', styles : { 'text-align' : 'left','color' : 'Green' } },

beware of the apostrophes, and when you want to add more than one style, separate them with a comma not semicolon;
cheers, Connie

[allienato]

I know that method, but can you define a style with more than one tag? (e.g. <span><span></span></span>)

[Connie]

Code:

'text-align' : 'left','color' : 'Green'

my example showed how you can set more than one attribute, so why do you need more tags?

I would suggest to try that. Why not use the easy to use capabilities instead of loosing a lot of time with tweaking?

What do you want to define exactly? What is the CSS you want to add really?

If you want to realize what you showed in the first post:

Code:

<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>' )

keep all this together in a class and you are done

[allienato]

that code will show a particular marked text, like the yellow one in this page http://www.gruppoc14.com/gs/index.php?id=about
so it's not a normal marker

the other option is to use a single span, with css3 multiple backgrounds (even if it won't work with certain browsers)

[Connie]

the css in the site which you refer too is incomplete and has a lot of errors and warnings
some css files are missing

span in span is not a really good idea

I am sure it is possible to define all what you want to realize in a CSS class and add that class to the stylebox of the editor

more I cannot say and I have no time enough to investigate in so unclean code

you can accept my suggestion or not

[allienato]

y, sure.
I'll try to make it with a single tag/class, seems easier indeed..

thank you for your help, really appreciated

[allienato]

I'm now able to use one span for styling, but there's another problem..
I've added style code in config.stylesSet. On my localhost works fine, but in the live version now seems that ckeditor loses all my previous customizations (I had other styles defined there) and ignore gsconfig toolbar definition.. (what the heck!?)

[Connie]

you must tell us the part of the gsconfig.php where you define the editor options + the custom css + the custom stylesheet ...

otherwise we need a crystall ball or a soothsayer

Cheers, Connie

[allienato]

I define GSEDITORTOOL as advanced in gsconfig.php.

My admin/template/js/ckeditor/config.js is modified including:
config.stylesSet = [{name : 'Marker (yellow)', element : 'span', styles : { 'background-image' : 'bla bla', *other styles }}, *other similar definitions];

its seems nothing changes anymore, even if I clear new customizations and refresh page / clear cache..

it doesn't make sense..