Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

WYSIWYG custom styles for specific elements


Go to End


3 Posts   556 Views

Avatar
Faloude

Community Member, 55 Posts

8 May 2015 at 11:47pm

Is it possible to have certain custom styles (in your editor.css) be available only for certain HTML content? Please see examples below.

Button for text, not for images
For example, I have a css style called "button" which will turn normal text into inline-block, add padding, add background and a text colour, making it look like a button. Obviously I don't want this css style to appear when highlighting an image in the WYSIWYG editor.

Frame for images, not for text
In addition, I have a custom css style that gives images a "framed" look by adding padding, background color, a coloured border and shadow. I don't want this style to be avialable when highlighting text.

Avatar
Pyromanik

Community Member, 419 Posts

11 May 2015 at 11:19pm

TinyMCE isn't that smart I'm afraid.
You can add styles to the dropdown - however you can apply them to any element. Just that elements excepting the defining one will ignore the style, as per how CSS works normally.

eg. Defining span.button {...}
You'll be able to choose to give an img the .button class in TinyMCE - but it obviously won't do anything in terms of modifying the style.

Avatar
Faloude

Community Member, 55 Posts

11 May 2015 at 11:26pm

Alright well at least I can be rest assured it's a lack of functionality then and stop browsing the web for a simple fix! Thanks :-)