Custom Format in TinyMCE Rich Text Editor 1.1.0-pl

416 Posts

Terry Reply #1, 8 years, 8 months ago

How do you add custom styles to the format pull down in this version of TinyMce?

When using the other versions of TinyMCE you could add a list of styles to the System Settings-->Core-->CSS Selectors for Editor field and they would appear on the style drop down in the tool bar.

In the new version, there is no style drop down. There is a Format button that includes headers, block, inline and alignment groupings with the default styles. These are specified in System Setttings-->tinymcerte-->Inline Format like this:

[{"title": "Bold", "icon": "bold", "format": "bold"},
{"title": "Italic", "icon": "italic", "format": "italic"},
{"title": "Underline", "icon": "underline", "format": "underline"},
{"title": "Strikethrough", "icon": "strikethrough", "format": "strikethrough"},
{"title": "Superscript", "icon": "superscript", "format": "superscript"},
{"title": "Subscript", "icon": "subscript", "format": "subscript"},
{"title": "Code", "icon": "code", "format": "code"}]

I tried adding an additional style to this using following the examples here http://www.tinymce.com/tryit/custom_formats.php

{"title": "test", selector: "img", "classes": "imageleft"}
{"title": "test",  inline: "span", "classes": "imageleft"}

Either of these cause the inline category to disappear from the drop down.

Note: The examples of custom formats use single quotes, where as the system settings are using double quotes.

What am I missing?

144 Posts

Ananda Reply #2, 8 years, 8 months ago

Hi,
Under "system setting", go to the tinyMCE section.
Read under "css selectors" click onnit and read how to list the css classes.
Possibly you have to add a "custom style button".

416 Posts

Terry Reply #3, 8 years, 8 months ago

First thing I tried. That works for TinyMCE 4.3.3-pl.

It has no effect with TinyMce Rich Text Editor 1.1.0-pl. There is no style button and I could find no documentation for adding a style button to the tool bar.

Have you done this with this version?

8 Posts

treniota Reply #4, 8 years, 1 month ago

I don't know if it is still an issue, but I had the same problem ("disappear from the drop down") as you and solved it this way:

First create a new setting in system setting > tinymcerte:

Key: tinymcerte.my_formats
Name: setting_tinymcerte.my_formats
Description: setting_tinymcerte.my_formats_desc
Field Type: Textfield
Namespace: tinymcerte
Area Lexicon Entry: tinymcerte.style_formats
Value (example):
[{"title": "Title", "selector": "ul", "classes": "class"},{"title": "Title2", "selector": "li", "classes": "class2"},{ and so on}]

Then add this new setting to existing Style formats:

[{"title": "My personal styles", "items": "my_formats"},{"title": "Headers", "items": "headers_format"},{ and so on }]

1,145 Posts

donshakespeare Reply #5, 8 years, 1 month ago

Try http://modx.com/extras/package/tinymcewrapper
You won't need to do all these

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

8 Posts

treniota Reply #6, 8 years, 1 month ago

Quote from: donshakespeare at Mar 14, 2016, 12:51 AM

Try http://modx.com/extras/package/tinymcewrapper
You won't need to do all these

While I understand that tinymcewrapper is a powerful plugin, every time I installed it, I uninstalled it later. Why? Because with it I get more snippets, templates and chunks that I have of my own in modx install. Because I get resources with literally some new bootstrap website. Because I must then go through settings and search what to uncheck to keep it simple. And so on. And in midway of this I have always uninstalled it, because I really don't need so much of everything.

My idea is - tinymcewrapper needs a light version, or possibility to choose what to install from package, or some kind of framework/core, that doesn't install galleries, four file managers, front end manager etc., but lets simply create custom styles, templates, buttons, etc.

1,145 Posts

donshakespeare Reply #7, 8 years, 1 month ago

See the road map on that link:
You'll soon get a chance to butcher install....very soon

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

372 Posts

Steeve Reply #8, 7 years, 6 months ago

Hi, I can't make it work... Did someone can help please?
I would like to add custom CSS classes to the toolbar for end user.

☆ A M B ☆
350 Posts

boomerang Reply #9, 7 years, 6 months ago

Hi there, I had a bit of trouble to start with but I've got this working now. Here are my settings.

Firstly go to System Settings, then select tinymcerte from dropdown and create a new setting with the following details

Key: tinymcerte.custom_format
Name: Custom Format
Description: (optional - I didn't use this)
Field Type: Textfield
Namespace: tinymcerte
Area Lexicon Entry: tinymcerte.style_formats

Then in the value field add the following:

[ {"title": "Dark Grey Text", "selector": "p", "classes": "grey-text"},{"title": "Small Dark Grey Text", "selector": "p", "classes": "grey-small"},{"title": "Bold Red Text", "selector": "p", "classes": "strong-red"}]

The above code provides the title for the formatting, then the tag you want to apply the formatting to ("selector" : "p") and then I've applied a class.

Next update the Style Formats to include the new Custom Format settings above.

[{"title": "Custom Format", "items": "custom_format"},{"title": "Headers", "items": "headers_format"},{"title": "Inline", "items": "inline_format"},{"title": "Blocks", "items": "blocks_format"},{"title": "Alignment", "items": "alignment_format"}]

Then clear your cache and go play with your Custom Formats....

See screenshots for more info

Helen Warner
Number one pixel!
Proud to be linked with MODX at Crimson Pixel

372 Posts

Steeve Reply #10, 7 years, 5 months ago

Quote from: boomerang at Oct 27, 2016, 05:01 PM

Hi there, I had a bit of trouble to start with but I've got this working now. Here are my settings.

Firstly go to System Settings, then select tinymcerte from dropdown and create a new setting with the following details

Key: tinymcerte.custom_format
Name: Custom Format
Description: (optional - I didn't use this)
Field Type: Textfield
Namespace: tinymcerte
Area Lexicon Entry: tinymcerte.style_formats

Then in the value field add the following:
[ {"title": "Dark Grey Text", "selector": "p", "classes": "grey-text"},{"title": "Small Dark Grey Text", "selector": "p", "classes": "grey-small"},{"title": "Bold Red Text", "selector": "p", "classes": "strong-red"}]
The above code provides the title for the formatting, then the tag you want to apply the formatting to ("selector" : "p") and then I've applied a class.

Next update the Style Formats to include the new Custom Format settings above.
[{"title": "Custom Format", "items": "custom_format"},{"title": "Headers", "items": "headers_format"},{"title": "Inline", "items": "inline_format"},{"title": "Blocks", "items": "blocks_format"},{"title": "Alignment", "items": "alignment_format"}]
Then clear your cache and go play with your Custom Formats....

See screenshots for more info

This work for me! Thank you very much boomerang!