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.

General Questions

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

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

[Solved] TinyMCE customizing problems


Go to End
Reply

21 Posts   8498 Views

Avatar
Digital-Punk.co.uk

5 November 2009 at 11:42pm (Last edited: 6 November 2009 12:02am), Community Member, 51 Posts

Hi there

I try to customize TinyMCE "Formatselect" dropdown. Before starting I guessed it will really easy task. Actually on the end - no way!

First what I tried to do - change names. Ok, lets go to sapphire/lang and change names there - not working. Ok, lets go to htmlfieldeditor.php and change names there - not working. Ok, lets go to javascript/tiny_mce/themes/advanced/lang - working!

Second thing - remove not used headers and leave only 2 my changed headers.
I tried to delete them in these files:
- htmleditorfield.php
- editor_template.js (advanced theme folder, tiny_mce2)
- lang files (sapphire and advanced theme)
Nothing worked for me.

Maybe I missed the real tinymce2 config file?

Why we can't use simply configuration like (I tried this also in htmleditorfield.js)?:

tinyMCE.init({
   ...
   theme_advanced_blockformats : "p,div,h2,h3,h4,blockquote,dt,dd,code,samp"
});

And every time we need to look for the proper file (I mean tinymce configuration is in several places - why not add this kind of configurations in one place?

p.s. after every change did flush, cache cleaning etc.

SS 2.3.2

Avatar
banal

5 November 2009 at 11:55pm Community Member, 901 Posts

You can customize the TinyMCE buttons using the HTMLEditorConfig class: http://doc.silverstripe.org/doku.php?id=htmleditorconfig

Take the following code as example (minimal tinymce config), placing it in mysite/_config.php will remove all buttons, except for some buttons on the first line:

HtmlEditorConfig::get('cms')->disablePlugins('table');
HtmlEditorConfig::get('cms')->setButtonsForLine(1, 'bold', 'italic', 'underline', 'sslink', 'unlink', 'undo', 'redo', 'pastetext');
HtmlEditorConfig::get('cms')->setButtonsForLine(2);
HtmlEditorConfig::get('cms')->setButtonsForLine(3);

Avatar
Digital-Punk.co.uk

6 November 2009 at 12:00am Community Member, 51 Posts

Actually i don't want to customize buttons itself, I want to customize their values. For example, format select dropdown values - i would like to have only h1,h2,h3. Anyway thanks Banal for the useful snippets.

On the end I found that changes in tinymce2/themes/advanced/editor_template_src.js worked for me. But as I said its really anoying, when you need to go trough many tinymce files and check which is proper one.

Avatar
yurigoul

6 November 2009 at 3:33am (Last edited: 6 November 2009 3:34am), Community Member, 202 Posts

Two things:

Adding to _config.php: as I have come to understand you should not put HtmlEditorConfig::get('cms') in your _config.php because LeftAndMain.php gets loaded after you load the _config.php. Instead you should load them in your getCMSFields() funtion of your Page.php

setButtonsForLine(n): This does work only temporarily, just like RemoveButtons and theme_advanced_disable. If you edit and save a page and then go to another page the original buttons reappear. The strange thing is that the official TinyMCE theme_advanced_buttons<1-n> to change the button rows does not work at all.

Where is this documented? I would like to know because I would like to try and find a solution for several other tinymce config problems as well (invalid_elements does not seem to do anything and valid_elements removes ALL your formatting once in a while)

Avatar
Digital-Punk.co.uk

6 November 2009 at 4:04am Community Member, 51 Posts

For me HtmlEditorConfig settings worked only in mysite/_config.php file. Otherwise as you said - to change the button rows does not work at all.

Regarding valid elements - I added this also in config file and it is working perfectly.

Avatar
yurigoul

6 November 2009 at 6:00am Community Member, 202 Posts

The button thing now works, THANX!

As for valid_elements or invalid elements: I can not get it to work, it just ignores all the settings. I am very curious to know what your code is.

Among other things I try to get rid of Safari styling (it copies all the styles a text has on paste, also when a text is white) and I want see if the wordpaste feature can be controled somehow.

Avatar
Digital-Punk.co.uk

6 November 2009 at 6:39am (Last edited: 6 November 2009 6:41am), Community Member, 51 Posts

Hi

np, thats my code:

HtmlEditorConfig::get('cms')->insertButtonsAfter('formatselect', 'forecolor');
HtmlEditorConfig::get('cms')->insertButtonsAfter('forecolor', 'backcolor');
HtmlEditorConfig::get('cms')->insertButtonsAfter('backcolor', 'removeformat');
HtmlEditorConfig::get('cms')->setOption('apply_source_formatting', 'false');
HtmlEditorConfig::get('cms')->setOption('verify_html', 'false');
HtmlEditorConfig::get('cms')->setOption('valid_elements', 'a[href|target|rel|class],b,br,font,img[src|id|width|height|align|hspace|vspace,KeepThis,true,TB_iframe],i,li,p

,h1,h2,h3,h4,h5,h6,span[class],textformat[blockindent|indent|leading|leftmargin|rightmargin|tabstops],u,table,tr,td');

Last line hopefully will is cutted by formatting. It should be like this:
HtmlEditorConfig::get('cms')->setOption('valid_elements', 'a[href|target|rel|class],b,br,font,img[src|id|width|height|align|hspace|vspace,KeepThis,true,TB_iframe],i,li,p

,h1,h2,h3,h4,h5,h6,span[class],textformat[blockindent|indent|leading|leftmargin|rightmargin|tabstops]
,u,table,tr,td');

Of course valid elements depends what you need to add. In my example I added lightbox on the images links.

Cheers!

Avatar
yurigoul

6 November 2009 at 7:35am (Last edited: 6 November 2009 7:45am), Community Member, 202 Posts

Thanks for your code!

I copied and pasted the code exactly like you gave it to me in the mysite/_config.php (and removed the linebreaks, thanks for the warning). But if I remove h1,h2,h3,h4,h5,h6 from your code I expect TinyMCE to get rid of those codes for me on save. This is also mentioned in the TinyMCE website in the chapter about the use of valid_elements.

But it does not - the h2 codes I tested it with are still there in the front-end and in the back-end. But for the rest it works, your buttons are there and if I set 'entity_encoding', 'raw' at the end of the tinymce setting it also works. I have also set 'verify_html' to 'true' just to test if it matters... :-s

I tested this in 2 local installs and an install on a server all running 2.3.3

I am curious to know if this works for anybody else here...

Go to Top