span in tinyMCE

[atired]

I have some styles in my stylesheet that I have configured to show up in TinyMCE. The problem is, I want TinyMCE to add the styles to the tag, but it keeps inserting in my code.
Also, whenever I click the button, tinyMCE adds a . Are these the same problem, or two different things? And, more importantly, how do I fix them?

Thankx in advance
Atired

[xnau]

OK, I figured this one out because it really annoyed me. Here's what you do:

You can configure what those buttons do with an extra configure (this is in the advanced tab of TinyMCE configuration in the admin)

This is the configuration I use:

Code: Select all

formats : {
		alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
		aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'centertext'},
		alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
		alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'justify'},
		bold : {inline : 'strong'},
		italic : {inline : 'em'},
		strikethrough : {inline : 'del'}
	}

You can read the TinyMCE docs, theyre really good, but basically what this does is this: when you hit the "alignleft" button, it looks to see if the element selected is on in the list ('p,h1,' etc.), then it assigns a class to that element.

Important: those classes "left', 'centertext' etc. are my classes that I defined in my CSS. So those alignment buttons won't work until you have the classes properly defined like: .centertext{ text-align:center; }

In the case of bold and em, it uses 'inline' which means it applies an inline tag to the selected text.

You can do a lot more, but this will get you started.

[Yvan B]

Hey ! I've been looking for this for AGES ! I couldn't find this info in TinyMCE wiki... Where exactly is it

I posted this in 'Product Support' (guess it was wrong, then)

I want to customize a style for lists in the TinyMCE editor. I thought it'd be easy and I could simply create a style in my CSS file and add the style name to the list in 'CSS Styles', but it doesn't work. I mean, it works well if you want to print in bold and red, but not for editing lists.

Indeed, and as it says there, if you set something like 'style1' and use it to style some text, the result will look like this:
text

And if you do the same with a list, you will get:


text1
text2


This can't be used, unfortunately. What I want would look like the following:


text1
text2


Does anyone know how this can be achieved ? I know it's possible. I checked the plugin called 'style', but I didn't understand its definition and purpose.

So, if I understand what you say, I should add this in extra configure:

formats : {
    black arrow list : {selector: 'ul', classes : 'black-arrow'}
}

Do I have to add 'black arrow list'=black-arrow;' in CSS styles too ? I guess not though...

[Yvan B]

Ok, using your info, I've found this on the wiki:
http://wiki.moxiecode.com/index.php/Tin ... le_formats
I think that's what I need.
So, I added this line in the extra configuration:

{title : 'Liste flèche noire', selector : 'ul', classes : 'fleche-noire'}

But now, TinyMCE won't load anymore. What did I do wrong ?

[Yvan B]

Found it:

style_formats : [
  {title : 'Liste flèche noire', selector : 'ul', classes : 'fleche-noire'},
  {title : 'Liste triangle noir', selector : 'ul', classes : 'triangle-noir'},
  {title : 'Liste triangle bleu', selector : 'ul', classes : 'triangle-bleu'}
]

Works well, but for a little bug that makes the names of the classes merge instead of replacing each other when you change from one to the other...

Hope it helps

[xnau]

Yvan B--

You have to reselect the same style to remove it. It took me a while to figure that out.