tinymce configuration

[Soma]

The configuration per tinymce inputfield is awesome, it would be even more, if I could specify a lot more that tinmyce has to offer, not just buttons and plugins. It would be cool to have possibility to enter custom init setup to easily add templates, custom formats, other theme etc. Are there any plans extending this? As for now I have to change core to archive this.

[ryan]

We could certainly add this and seems like a good idea. I'm not an expert with TinyMCE other than being familiar with some parts of it that I had to in order to make it work with PW. I do have plans to do more with it in the future, but it's admittedly not on the short term roadmap yet. If you want to take the lead on this I'll be glad to collaborate with you on it and we can get anything into the core that needs to be there to make it happen. 

[Soma]

Ok I went through this trying ways to implement something to extend core tinyMCE via module. At the end I think it would make the most sense, to make it extendable, customized from outside the core using a module, so that one can add custom editor css and plugins to his needs without touching the core.

I got some issues getting this to work completely, wether with extending InputfieldTinyMCE nor with simple hook.

There's problems (with js hook) to not have ways to configure per tinyMCE field in PW backend and also got problems to re-init the tinyMCE after extending the config.

And on the other hand (by extending InputfieldTinyMCE) having the possibility to add more config fields to backend, but can't get it to output the additional js config straight, as it seems to get mixed up with the parent Inputfield config and only bad hacks would solve it. I'm not even sure if this would be possible or make sense to extend Inputfields in this case. No it doesn't, there wouldn't be ways extend, since it creates a new "Inputfield" type.

So by extending the InputfieldTinyMCE, I would also problems when wanting to extend it further with custom plugins. So I'm not happy with it either way.

So my conclusion kinda is: Most "sense" would make to have a tinyMCE located in the site modules folder? Not sure.

Or should it really be all done in the core?

[ryan]

For experimenting/testing, you may want to just clone the InputfieldTinyMCE class and files (InputfieldSlightlyLargerMCE?) and put it in /site/modules/ so you've got a sandbox version to work from.

One way that you can manipulate the TinyMCE config is to edit a page, view the source, and note the JS 'config' var at the top. See any fields that are using TinyMCE and you'll see the configuration settings there. These are in place well before TinyMCE is initialized. And from here you can overwrite any of TinyMCE's defaults, for any field (using javascript or PHP). And it doesn't have to be one that's already there... it can be ANY TinyMCE configuration option. For example, if you wanted to change the URL to content.css for your 'body' field. From PHP, you'd do it like this (in an event that runs before Page::render):

$this->config->Inputfield_body['content_css'] = '/url/to/content.css';

Or from JS:

config.Inputfield_body.content_css = '/url/to/content.css';

That JS would have to run before TinyMCE is initialized, meaning before the document.ready() event is triggered (unless you have your script fire in document.ready before the TinyMCE one does). So you could do this by inserting a <script> tag into the output before the </head> or right before the </body> or inline if you preferred it.

I've not tried this myself, so your results may vary, but I think this should work.

[Soma]

Thanks a lot Ryan for the useful tips. Trying to extend the config after init, I missed the one it could easily be done before load (shouldn't try these things late at night ). I'll reconsider my approaches.

[vsulin]

Hi,

Soma, did you get anywhere with this or should I start from scratch?

If that content.css isn't site specific by default, might aswell try with the following.

Shouldn't break anything from previous installs just by leaving the default empty:

style_formats : [
   {title : 'Bold text', inline : 'b'},
   {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
   {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
   {title : 'Example 1', inline : 'span', classes : 'example1'},
   {title : 'Example 2', inline : 'span', classes : 'example2'},
   {title : 'Table styles'},
   {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
]