How to adjust TinyMCE *-init.js

Questions about how to use the online - editors and suggestions how to improve them
Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

How to adjust TinyMCE *-init.js

Post by Tata » Sun Nov 01, 2020 10:09 pm

Recently I have succeeded adjusting the *-init.js by:

Code: Select all

{ //start of ini file
...
style_formats: [{ // start of Bootsrtap selectors
	title: 'Bootstrap',items: [{
		title: 'col-md-1', selector: '*', 'classes': 'col-md-1'},{
		...
		title: 'col-xs-12', selector: '*', 'classes': 'col-xs-12'	
		}] // end of Bootstrap selectors
	}] // end of formats
} // end of init
I want to continue by another group of formats, e.g.

Code: Select all

	title: 'Animation Classes',items: [{
		title: 'Attention Seekers',items: [{
	        	title: 'bounce', selector: '*', 'classes': 'ani_bounce'},{
		     	title: 'flash', selector: '*', 'classes': 'ani_flash'},{
		     	title: 'pulse', selector: '*', 'classes': 'ani_pulse'
			}] // end of Attention Seekers 
		}] // end of Animation Classes selectors
Whatever way I insert this code block, either the editor toolbar disappears or only the last inserted block is visible.
How shall it be done?
I expected to see both lists in the Formats dropdown like:
Bootstrap >
- col-md-1
- ...
- col-xs-12
Animation Classes >
- bounce
- flash
- pulse
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: How to adjust TinyMCE *-init.js

Post by Tata » Sun Nov 01, 2020 11:40 pm

Tidying the code and starting from the beginning made it work. It would be nice if the styles from the core.css could be sorted/grouped some similar way automatically. It would however require some "naming system" with a meaningful prefixes.

Code: Select all

{ start of *-init.js
...
style_formats: 
   [
      {title: 'Formats Group 1',items: 
   	   [
      		{title: 'Item 1', selector: '*', 'classes': 'class-1'},
      		...
      		{title: 'Item x', selector: '*', 'classes': 'class-x'}
   	   ]
      }, // end of Formats Group 1
      {title: 'Formats Group 2',items: 
	   [
		{title: 'Subgroup 1',items: 
		   [
			{title: 'Item 1 1', selector: '*', 'classes': 'class-1-1'},
			{title: 'Item 1 2', selector: '*', 'classes': 'class-1-2'},
			{title: 'Item 1-3', selector: '*', 'classes': 'class-1-3'},
		   ]
        	},
		{title: 'Subgroup 1',items: 
         	   [
			{title: 'Item 2 1', selector: '*', 'classes': 'class-2-1'},
			{title: 'Item 2 2', selector: '*', 'classes': 'class-2-2'},
			{title: 'Item 2-3', selector: '*', 'classes': 'class-2-3'},
		   ]
        	}
            ] // end of Subgroup 2
        } // end of Formats Group 1
     ]  //end of  style_formats    
} //  of *-init.js
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply