Jump to:

22975 Posts in 11620 Topics by 2826 members

General Questions

SilverStripe Forums » General Questions » [Solved] TinyMCE customizing problems

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

Page: 1 2 3
Go to End
Author Topic: 7775 Views
  • Digital-Punk.co.uk
    Avatar
    Community Member
    51 Posts

    [Solved] TinyMCE customizing problems Link to this post

    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

  • banal
    Avatar
    Community Member
    901 Posts

    Re: [Solved] TinyMCE customizing problems Link to this post

    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);

  • Digital-Punk.co.uk
    Avatar
    Community Member
    51 Posts

    Re: [Solved] TinyMCE customizing problems Link to this post

    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.

  • yurigoul
    Avatar
    Community Member
    202 Posts

    Re: [Solved] TinyMCE customizing problems Link to this post

    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)

  • Digital-Punk.co.uk
    Avatar
    Community Member
    51 Posts

    Re: [Solved] TinyMCE customizing problems Link to this post

    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.

  • yurigoul
    Avatar
    Community Member
    202 Posts

    Re: [Solved] TinyMCE customizing problems Link to this post

    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.

  • Digital-Punk.co.uk
    Avatar
    Community Member
    51 Posts

    Re: [Solved] TinyMCE customizing problems Link to this post

    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!

  • yurigoul
    Avatar
    Community Member
    202 Posts

    Re: [Solved] TinyMCE customizing problems Link to this post

    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...

    7775 Views
Page: 1 2 3
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.