📜 ⬆️ ⬇️

Unobvious Genemu TinyMCE configuration options for symfony2

GenemuFormBundle is a bundle that provides a convenient implementation of some widgets for Symfony2, in particular, the popular WYSIWYG editor TinyMCE . Consider two typical tasks: using TinyMCE in the backend and setting up bb codes in the frontend.


Foreword


When I tried to use the GenemuFormBundle in my application, I was faced with the problem of lack of documentation. Most likely, for the guru the solution of the tasks will be obvious. This article is addressed primarily to newcomers like me.
The procedure for installing the GenemuFormBundle is standard, described in detail in the documentation and does not cause problems. In addition, the conversation is not about that. Let's talk more about the TinyMCE widget. Of course, it is easier for someone to register all the necessary scripts and settings in the old-fashioned way in the templates, but using the bundle will save us from many troubles. The documentation for him is not very detailed, and here is her somewhat loose translation with explanations.

Official documentation on the TinyMCE widget from GenemuFormBundle.


After following the instructions for installing the GenemuFormBundle bundle, you need to download and add to the / web / bundles / genemuform / folder with the TinyMCE scripts. You can fold the JS in any place, the link to the script is configured.
To get access to the functionality of TinyMCE, you need to write at least this in the configuration file:
# app/config/config.yml genemu_form: tinymce: ~ 

')
This is how the simplest use of this widget in the form will look like:
 <?php // ... public function buildForm(FormBuilder $builder, array $options) { $builder // ... ->add('content', 'genemu_tinymce'); } 

To make the widget work, you need to connect the necessary js-libraries. To do this, add to your template:
 {% block javascripts %} <script src="{{ asset('js/jquery-1.7.min.js') }}"></script> <script src="{{ asset('tinymce/jquery.tinymce.js') }}"></script> {{ form_javascript(form) }} {% endblock %} {% block body %} <form action="{{ path('my_route_form') }}" type="post" {{ form_enctype(form) }}> {{ form_widget(form) }} <input type="submit" /> </form> {% endblock %} 

Pay attention to the fragment {{ form_javascript(form) }} . It is required to apply specific configuration settings for widgets from the GenemuFormBundle.

In the configuration, you can specify the path to the TinyMCE script:
 # app/config/config.yml genemu_form: tinymce: script_url: '/tinymce/tiny_mce.js' 

By default, the TinyMCE field has the following settings:
 # app/config/config.yml genemu_form: tinymce: enabled: true theme: advanced 

Based on this example, it is not difficult to guess that you can write any configuration settings that TinyMCE supports to app / config / config.yml.
This official documentation ends. And now let's look at how to make TinyMCE earned in SonataAdminBundle and how to make various Tiny settings in different forms on the site.

TinyMCE and SonataAdminBundle


So, we have installed SonataAdminBundle and want to use TinyMCE in our backend for submitting articles or news to our site. To do this, we will use the default settings of the plug-in, you just need to fasten the widget itself to the form. A detailed description of working with SonataAdminBundle can be found in this beautiful post . And we will consider the specific settings for our widget.
In the admin configuration we write the following:
 /* my_app\PagesBundle\Admin\PagesAdmin.php */ protected function configureFormFields(FormMapper $formMapper) { //... $formMapper->add( 'body','genemu_tinymce',array('label' => '')); //... } 

Now you need to override the SonataAdminBundle template to attach our javascript:
 {# /app/Resources/SonataAdminBundle/views/standard_layout.html.twig #} {% block javascripts %} {# ... #} <script type="text/javascript" src="/bundles/genemuform/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> {% if form is defined %} {{ form_javascript(form) }} {% endif %} {% endblock %} 


I connect directly to standard_layout to use later on other widgets from GenemuFormBundle.
Go to the admin area, and see that it all worked:

Let me remind you that HTML output without escaping in twigs is done like this:
{{ entity.body | raw }}
PS In order not to be surprised at the results, “magic quotes” should be turned off.

Various TinyMCE settings for different forms.


Now imagine that, in addition to the articles, comments will be posted on the site in which we also want to use TinyMCE, but with bb codes already. Having a little rummaged in the source codes of the GenemuFormBundle, we find out that the settings can be registered not only globally for the whole application, but also for a specific widget, as parameters:
  public function buildForm(FormBuilderInterface $builder, array $options) { //... $builder->add('body','genemu_tinymce',array( 'label' => '', 'configs' =>array( 'entity_encoding'=>'raw', 'plugins' => 'bbcode', 'add_unload_trigger' => 'false', 'remove_linebreaks' => 'false', 'inline_styles' => 'false', 'convert_fonts_to_spans' => 'false', 'theme_advanced_buttons1' => 'bold,italic,underline,undo,redo,link,unlink,forecolor,styleselect,removeformat,cleanup,code', 'theme_advanced_buttons2' => '', 'theme_advanced_buttons3' => '') )) ; //... } 

Then we do everything in accordance with the documentation for the bundle, and we get the following:

Yes, really earned bb-codes.

List of used sources


  1. GenemuFormBundle
  2. Tinmyce
  3. SonataAdminBundle
  4. Administrative Interface with SonataAdminBundle

Source: https://habr.com/ru/post/177457/


All Articles