[SOLVED] How do I make a textarea a WYSIWYG/TinyMCE element in backend/admin of Prestashop?

[SupaMonkey]

As the title suggests - How do I make a textarea a WYSIWYG/TinyMCE element in backend/admin of Prestashop?

Have a tpl loading in the public function hookDisplayAdminProductsExtra, tpl has a textarea with the class "rte" (as copied from what I see PS uses for its own stuff as well as what the tinymce config is appeared to be setup to use as 'specific_textareas', eg:

<textarea class="rte" name="content" rows="10" cols="45"></textarea>

 

However, it just loads as standard ol' textarea - how do I make this a tinymce textarea?

Edited May 1, 2013 by SupaMonkey (see edit history)

[SupaMonkey]

Hmm, I just added the following to the public function hookDisplayBackOfficeHeader

echo '<script language="javascript" type="text/javascript">tinySetup();</script>';

and it is now working. Is this the correct way to do it?

[vekia]

you want to add tinymce to each texteareas or only to part of them?

You want to add it in module configuration page or where?

[SupaMonkey]

I want to add tinymce to all textareas

My module works in its own productTab in the backend (hook displayAdminProductsExtra).

 

Just noticed my solution above doesnt work because:

1) Its attached to the actual admin header, so when you are anwhere else in the backend, tinySetup is not defined and throws an error

2) It, for some reason, doesnt save the contents of the textarea when you save the product

 

I solved both of the above by moving the line of code into the tpl file, except this causes a new problem:

3) When you load the tab, the textarea is tinyMCE enabled and loads/saves the content fine upon loading/saving. However, if you click "Save and Stay" in the product, it saves the content but when the page reloads the textarea is no longer a tinyMCE element.

 

After investigating why this happens, its because the following line:

<script language="javascript" type="text/javascript">tinySetup();</script>

becomes:

<script type="text/javascript" language="javascript">/* <![CDATA[ */tinySetup();/* ]]> */</script>

 

Adding {literal} around the <script> or the contents of <script> did nothing. Clearly im doing this wrong - but theres no documentation ANYWHERE on the web for prestashop 1.5 module development (save for like 1 page of basic module dev on the prestashop documentation site) so Im pretty stuck just trying things and making things up - which is realy not very productive!

[SupaMonkey]

*bump*

[SupaMonkey]

No wonder Prestashop modules are so expensive. There is no form of educational material out there and no one helps in the community?

Could really use some help here guys...

[oldlastman]

maybe this help you

http://forge.prestashop.com/browse/PSCFV-5348?focusedCommentId=63795&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-63795

regards

[SupaMonkey]

Thanks oldlastman - but I already sorted this out by:

 

.tpl:

<textarea class="rte" id="id" name="name" rows="10" cols="45"></textarea>

 

.php (hook where you return tpl)

   	 $header_html .= '
       <script type="text/javascript">    
           var iso = \''.(file_exists(_PS_ROOT_DIR_.'/js/tiny_mce/langs/'.$iso.'.js') ? $iso : 'en').'\' ;
           var pathCSS = \''._THEME_CSS_DIR_.'\' ;
           var ad = \''.dirname($_SERVER['PHP_SELF']).'\' ;
       </script>
       <script type="text/javascript" src="'.__PS_BASE_URI__.'js/tiny_mce/tiny_mce.js"></script>
       <script type="text/javascript" src="'.__PS_BASE_URI__.'js/tinymce.inc.js"></script>
       <script language="javascript" type="text/javascript">
           id_language = Number('.$id_lang_default.');
           tinySetup();
       </script>';

       return $header_html.$this->display(__FILE__, 'views/templates/admin/admin.tpl');

[Nishith Nesdiya]

yes you will try this..

 

<textarea class= "autoload_rte" id="id" name="name" rows="10" cols="45"></textarea>

[SupaMonkey]

That didnt work Nishith, reverted back to my solution in post #8

[Newls]

SupaMonkey, People, Hi,

 

I just had the same issue about all this TinyMCE stuff,

In my case, in the back-office, product section, all the TinyMCE stuff is already loaded by prestashop,

so I don't need to use all your JS.

The bug of TinyMCE which is not loading again when you save the product,

seems to happen because the browser have to wait for the DOM to be ready before you call tinySetup();

 

So what I just did is the following in my tpl (so nothing in the php) :

<label for="my_new_control">My new control</label>
<textarea name="my_new_control" id="my_new_control" cols="100" rows="20" class="rte">{$current_value}</textarea>
<script language="javascript" type="text/javascript">
$(function() {
	tinySetup();
});
</script>

 

The $(function(){}); is a jquery function (jQuery is loaded by presta too) that is called just when the dom is ready.

Edited August 14, 2013 by Newls (see edit history)

[spletni marketing]

It depends where you want to place it. I successfuly solved this by changing:

 

array(

'type' => 'textarea',

'label' => $this->l('Short description:'),

'name' => 'short_description',

'lang' => true,

'cols' => 60,

'rows' => 10,

'class' => 'rte',

'hint' => $this->l('Invalid characters:').' <>;=#{}'

),

 

to

 

array(

'type' => 'textarea',

'label' => $this->l('Short description:'),

'name' => 'short_description',

'lang' => true,

'cols' => 60,

'rows' => 10,

'class' => 'rte',

'autoload_rte' => true,

'hint' => $this->l('Invalid characters:').' <>;=#{}'

),

[luchiniii]

I need to do something like this.
 
I created a module to add a new tab in product admin view, I do this by using this hook "displayAdminProductsExtra".Then in that tab I would like to add a multilingual textarea.
 
By using the helper class you can create a multilingual textarea with this code:

$default_lang = (int)Configuration::get('PS_LANG_DEFAULT');
 
// Init Fields form array
$fields_form[0]['form'] = array(
    'input' => array(
        array(
        	'type' => 'textarea',
        	'label' => $this->l('Product details column 1'),
        	'name' => 'productdetails1',
        	'lang' => true,
        	'autoload_rte' => true,
        	'hint' => $this->l('For example... explain your mission, highlight a new product, or describe a recent event.'),
        	'cols' => 60,
        	'rows' => 30
        )
    )
);
 
$helper = new HelperForm();
 
// Module, token and currentIndex
$helper->module = $this;
$helper->name_controller = $this->name;
$helper->token = Tools::getAdminTokenLite('AdminModules');
$helper->currentIndex = AdminController::$currentIndex.'&configure='.$this->name;
 
// Language
$languages = Language::getLanguages(false);
foreach ($languages as $k => $language)
    $languages[$k]['is_default'] = (int)($language['id_lang'] == Configuration::get('PS_LANG_DEFAULT'));

$helper->default_form_language = $default_lang;
$helper->allow_employee_form_lang = $default_lang;
$helper->languages = $languages;
 
// Title and toolbar
$helper->title = $this->displayName;
$helper->show_toolbar = false;        // false -> remove toolbar
$helper->toolbar_scroll = false;      // yes - > Toolbar is always visible on the top of the screen.
$helper->submit_action = 'submit'.$this->name;
$helper->toolbar_btn = array(
    'save' =>
    array(
        'desc' => $this->l('Save'),
        'href' => AdminController::$currentIndex.'&configure='.$this->name.'&save'.$this->name.
        '&token='.Tools::getAdminTokenLite('AdminModules'),
    ),
    'back' => array(
        'href' => AdminController::$currentIndex.'&token='.Tools::getAdminTokenLite('AdminModules'),
        'desc' => $this->l('Back to list')
    )
);
 
// Load current value
$print = new PrintTabObject($this->context->shop->id);

$helper->fields_value['productdetails1'] = $print->productdetails1;

 
return $helper->generateForm($fields_form);

Unfortunately this also create a form tag around the textareas, and this create an error because you can't save the data by clicking save button from the product tool bar . And if you create the tool bar from the created form, when you try to save the data, it takes you out from product edit view.

 

Sorry for my english.

Edited September 26, 2013 by luchiniii (see edit history)

[humanoidvani]

post #11 is the solution

Edited January 17, 2014 by humanoidvani (see edit history)

[vekia]

in fact, everything depends on PS version. Almost each MAJOR version of ps use different tinymce script with different methods to include it.

[Mojtaba Rezaeian]

in fact, everything depends on PS version. Almost each MAJOR version of ps use different tinymce script with different methods to include it.

 

If you know the answer please describe more, I have same problem and my problem is not solved yet. I'm talking about prestashop 1.5 and for sure this article is not about older versions or newer ones because of it's date.

[vekia]

i need exact number of ps version

[fr33z3]

I've got the same problem on 1.4.7.3.

Could someone talk me through the process to add tinymce to the product description, please.

[Aioras]

For me is working like is said in post #11, everything but not the source code, I explain:

 

If I write text on tinymce it get stored on Db, but if i use Tools>Source Code and I write for example an iframe, it doesn't store in Db..

But only in my module, if I try the same in Products description it works fine...

 

Anybody knows why ?

Ps version 1.6.0.9

 

Product.php
class Product extends ProductCore
{
    public $product_video;
 
    public function __construct($id_product = null, $full = false, $id_lang = null, $id_shop = null, Context $context = null)
    {
        self::$definition['fields']['product_video'] = array('type' => self::TYPE_HTML, 'validate' => 'isCleanHtml');
        parent::__construct($id_product, $full, $id_lang, $id_shop, $context);
    }
}

 

template in BO as in post #11

 

    <tr>
        <td class="col-left">
            <label>{l s='Insert Video:'}</label>
        </td>
        <td>
                        
                    <label for="product_video">Product Video</label>
                    <textarea name="product_video" id="product_video" cols="200" rows="20" class="rte"></textarea>
                    <script language="javascript" type="text/javascript">
                        $(function() {
                            tinySetup();
                        });
                    </script>
        </td>
    </tr>

 

Thanks in advance!

[findsome]

Hello

 

Please help. I am using Prestashop version 1.6.0.9

I need to change "Transit time" in the Carrier configuration interface in back-office to "textarea" with "tinyMCE".Actually i have manage to make "TinyMCE" appear in that "Transit time" field but when i change kontent and push button "save" it is not saving new content.What i have don so far:

 

1. Changed the value of that column in database from 128 to 1024

2. Changed "AdminCarrierWizardController.php" and "AdminCarriersController.php" for "delay" field as was specified in post #12 of that topic

3. Changed Carrier.php from:

 

/* Lang fields */
            'delay' =>                     array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true, 'size' => 128),
        ),
    );

 

To:

 

/* Lang fields */
            'delay' =>                     array('type' => self::TYPE_STRING, 'lang' => true, 'validate' => 'isGenericName', 'required' => true),
        ),
    );
  

I think this is something to do with calling function tinySetup(); .But were should i call it in order to make new content of "Transit time" be "saved" with tinyMCE.

Edited February 15, 2015 by findsome (see edit history)

[piribipipi]

hi! did u solve it??????

 

thanks!

[Paolo23]

Genial, la solución está en la respuesta  #11

[Rmcs]

Hello,
I want to appear back office -product description- the text field

I use prestashop 1.6

 

Such appears to me

http://postimg.org/image/zfkpdz6sj/

 

and I want to look like

http://postimg.org/image/4oo5rbh4f/

 

Thank you!

[zadanet]

SupaMonkey, People, Hi,

 

I just had the same issue about all this TinyMCE stuff,

In my case, in the back-office, product section, all the TinyMCE stuff is already loaded by prestashop,

so I don't need to use all your JS.

The bug of TinyMCE which is not loading again when you save the product,

seems to happen because the browser have to wait for the DOM to be ready before you call tinySetup();

 

So what I just did is the following in my tpl (so nothing in the php) :

<label for="my_new_control">My new control</label>
<textarea name="my_new_control" id="my_new_control" cols="100" rows="20" class="rte">{$current_value}</textarea>
<script language="javascript" type="text/javascript">
	$(function() {
		tinySetup();
	});
</script>

The $(function(){}); is a jquery function (jQuery is loaded by presta too) that is called just when the dom is ready.

 

 

Worked for me.

Thanks

[office_axel_company]

Hy,

 

I have some problems with showing textarea short description in backoffice. When i want to create new product, in information tab don't apper textarea at short description and description also.

 

I can't share a photo here to see what is my problem.

 

Please tel me where i found the file why i need to change and what i need to change.

 

Best regard,

Daniela

Edited April 6, 2017 by office_axel_company (see edit history)