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   8636 Views

Avatar
Digital-Punk.co.uk

Community Member, 51 Posts

5 November 2009 at 11:42pm

Edited: 06/11/2009 12:02am

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

Community Member, 901 Posts

5 November 2009 at 11:55pm

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

Community Member, 51 Posts

6 November 2009 at 12:00am

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

Community Member, 202 Posts

6 November 2009 at 3:33am

Edited: 06/11/2009 3:34am

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

Community Member, 51 Posts

6 November 2009 at 4:04am

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

Community Member, 202 Posts

6 November 2009 at 6:00am

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

Community Member, 51 Posts

6 November 2009 at 6:39am

Edited: 06/11/2009 6:41am

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

Community Member, 202 Posts

6 November 2009 at 7:35am

Edited: 06/11/2009 7:45am

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