PrestaShop, use tinymce directly from Smarty template

Question

I'm doing a PrestaShop module. This module will be anchored to the hook called "hookDisplayAdminProductsExtra".

I need to use the TEXTAREA field tinymce using the library, you can do so by creating the textarea directly from Smarty and not as a controller? Maybe using jQuery function or adding a class to the field?

My code in tpl file is:

{foreach $row_list as $row}
    <textarea id="description_1" name="description_1" class="autoload_rte" aria-hidden="true">
        {$row['desc']}
    </textarea>
{/foreach}

My module function is:

$this->context->smarty->assign(
    array(
        'row_list'  => $this->getField($id)
    )
);
return $this->display(__FILE__, 'admin-view.tpl');

Answer 1

The autoload_rte is "used" when tab Informations is loaded by Prestashop using:

$(document).ready(function(){

    // Execute when tab Informations has finished loading
    tabs_manager.onLoad('Informations', function(){
        tinySetup({
            editor_selector :"autoload_rte",
            setup : function(ed) {
                ed.on('init', function(ed)
                {
                    if (typeof ProductMultishop.load_tinymce[ed.target.id] != 'undefined')
                    {
                        if (typeof ProductMultishop.load_tinymce[ed.target.id])
                            tinyMCE.get(ed.target.id).hide();
                        else
                            tinyMCE.get(ed.target.id).show();
                    }
                });

                ed.on('keydown', function(ed, e) {
                    tinyMCE.triggerSave();
                    textarea = $('#'+tinymce.activeEditor.id);
                    var max = textarea.parent('div').find('span.counter').data('max');
                    if (max != 'none')
                    {
                        count = tinyMCE.activeEditor.getBody().textContent.length;
                        rest = max - count;
                        if (rest < 0)
                            textarea.parent('div').find('span.counter').html('<span style="color:red;">Maximum '+ max +' characters : '+rest+'</span>');
                        else
                            textarea.parent('div').find('span.counter').html(' ');
                    }
                });
            }
        });
    });

});

In addition to this, the other tabs are also loaded later than the Informations tab. To solve this, you need to initialized the tinymce for the field you want. Choose another selector (not sure it's needed but at least there is 100% no chance to mess with the current ones), for example the class mytextarea, then use:

<script>$(document).ready(function(){tinymce.init({mode : "textareas", editor_selector : "mytextarea", plugins: "textcolor paste code"});})</script>

This can be in your tpl. In my tests, if there is no plugins setup there would be an error in console log. But you can adjust the tinymce settings as you wish.