stfalcon/TinymceBundle

Can't customize Tinymce

CPASimUSante opened this issue · 0 comments

I'm on SF 2.8 and I've installed without problem stfalcon/tinymce-bundle

composer require stfalcon/tinymce-bundle='1.0'
then in Kernel :
new Stfalcon\Bundle\TinymceBundle\StfalconTinymceBundle(),
Install the assets
php app/console assets:install web/

i've set a minimal configuration in app/config/config.yml

stfalcon_tinymce:
    include_jquery: false
    tinymce_jquery: true
    selector: '.tinymce'
    language: %locale%

Then in a template i set :
<textarea class="tinymce"></textarea>

and

{% block javascripts %}
{{ parent() }}
{{ tinymce_init({ }) }}
{% endblock %}

I end with the "default" stfalcon/tinymce config ("simple" theme i guess):

  • The menubar
  • A toolbar : "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify\n | bullist numlist outdent indent | link image"

This creates the code :

    //<![CDATA[
    stfalcon_tinymce_config = {"include_jquery":false,"tinymce_jquery":true,"selector":".tinymce","language":"fr_FR","use_callback_tinymce_init":true,"theme":{"advanced":{"theme":"modern","plugins":["advlist autolink lists link image charmap print preview hr anchor pagebreak","searchreplace wordcount visualblocks visualchars code fullscreen","insertdatetime media nonbreaking save table contextmenu directionality","emoticons template paste textcolor"],"toolbar1":"undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify\n | bullist numlist outdent indent | link image","toolbar2":"print preview media | forecolor backcolor emoticons","image_advtab":true,"language":"fr_FR"},"simple":{"language":"fr_FR"}},"tinymce_buttons":[],"external_plugins":[],"jquery_script_url":"\/bundles\/stfalcontinymce\/vendor\/tinymce\/tinymce.jquery.min.js"};
    initTinyMCE();
    //]]>

But if i try to override anything in the configuration

  • in the app/config/config.yml
  • in a script in the template
  • through the init_callback

i end up with the same buttons appearance :

For instance i want to remove the menubar, and add the template plugin with some templates set : a bare tinymce with just one template button.

in the app/config/config.yml i tried :

 stfalcon_tinymce:
    include_jquery: false
    tinymce_jquery: true
    selector: '.tinymce'
    language: %locale%
    use_callback_tinymce_init: true
    theme:
        # Simple theme: same as default theme
        simple: ~
        # Advanced theme with almost all enabled plugins
        advanced:
             plugins:
                 - "advlist autolink lists link image charmap print preview hr anchor pagebreak"
                 - "searchreplace wordcount visualblocks visualchars code fullscreen"
                 - "insertdatetime media nonbreaking save table contextmenu directionality"
                 - "emoticons template paste textcolor"
             toolbar1: "undo redo template "
             templates:
                 - {title: 'Test template 1', content: 'Test 1'}
                 - {title: 'Test template 2', content: 'Test 2'}

in a script in the template

{{ tinymce_init({
  'theme': {
      'advanced': {
        'menubar': false,
        'toolbar1': "undo redo template",
        'templates':[
          {title: 'Test template 1', content: 'Test 1'},
          {title: 'Test template 2', content: 'Test 2'}
        ]
      }
    }
  })
}}

and even in the init callback :

function callback_tinymce_init(editor) {
  var tinymce_settings = {
    'plugins':[
       "advlist autolink lists link image charmap print preview hr anchor pagebreak",
       "code fullscreen media nonbreaking save table contextmenu template paste"
    ],
    'menubar': false,
    'toolbar1': " template ",
    'templates':[
      {title: 'Test template 1', content: 'Test 1'},
      {title: 'Test template 2', content: 'Test 2'}
    ]
  };
  editor.settings = tinymce_settings;
}

It seems like only the theme simple is used :
the only thing that seems to work is the simple theme

{{ tinymce_init({'use_callback_tinymce_init': true, 'theme': {'simple': {'menubar': false,"toolbar1":"undo redo template ",
"plugins":["template"],
"templates":[
  {"title":"Test template 1","content":"Test 1"},
  {"title":"Test template 2","content":"Test 2"}
]}}}) }}

which displays the editor with only the template button, without the menubar

What am doing wrong ?

How to use the advanced config, or any custom config ?

  • in the app/config/config.yml ?
  • in a script in the template ?
  • through the init_callback ?

How can i display the template button, and later, display a different configuration for different textareas ?