Vote to Improve PrestaShop

PrestaShop Forum: Build a free online shop. Count on the Community!

The best place in the world to ask questions about PrestaShop and get advice from our passionate community!

PrestaShop Forum: Build a free online shop. Count on the Community!

Jump to content

 
Photo

How to use TinyMCE editor in prestashop module?

module editor form

  • Please log in to reply
5 replies to this topic
prestashop_newuser

    PrestaShop Apprentice

  • Members
  • PipPip
  • 165 posts

Posted 18 November 2013 - 09:08 AM

Hi,
Currently I am developing a small module. In that module I have a form for some input fields. In that form in a place I want to use TinyMCE editor. So can someone kindly tell me how to use a TinyMCE editor in prestashop module within a form ? Any help and suggestions will be really appreciable. Thanks


vekia

    PrestaShop Legend

  • US Moderators
  • 44814 posts

Posted 18 November 2013 - 01:41 PM

everything depends on ps version that you use, each of the PS version has got different way to include tinymce library

if you use prestashop 1.5 - check editorial module :) there is complete code to display tinymce for textarea


free tutorials, free templates, free addons, prestashop modules MndfRK4.png


prestashop_newuser

    PrestaShop Apprentice

  • Members
  • PipPip
  • 165 posts

Posted 20 November 2013 - 07:15 AM

everything depends on ps version that you use, each of the PS version has got different way to include tinymce library

if you use prestashop 1.5 - check editorial module :) there is complete code to display tinymce for textarea

Hi,

I tried to use tiny mce editor from this link demo

http://www.prestasho...dule-admin-tab/

 

and I made changes the file name and path as the demo link has prestashop some older version. So I changed my code like this

 

            
<label for="">'.$this->l('Address').'</label>
            <textarea name="address" id="" class="rte" cols="30" rows="5"></textarea>';
            $this->_html .= '
            <script type="text/javascript" src="'.__PS_BASE_URI__.'js/tiny_mce/tiny_mce.js"></script>  
  <script type="text/javascript">  
  function tinyMCEInit(element)  
  {  
   $(document).ready(function() {  
    $(element).tinymce({  
     // Location of TinyMCE script  
     script_url : \''.__PS_BASE_URI__.'js/tiny_mce/tiny_mce.js\',  
     // General options  
     theme : "advanced",  
     plugins : "safari,pagebreak,style,layer,table,advimage,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",  
     // Theme options  
     theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",  
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",  
     theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",  
     theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,pagebreak",  
     theme_advanced_toolbar_location : "top",  
     theme_advanced_toolbar_align : "left",  
     theme_advanced_statusbar_location : "bottom",  
     theme_advanced_resizing : false,  
     content_css : "'.__PS_BASE_URI__.'themes/'._THEME_NAME_.'/css/global.css",  
     width: "582",
     height: "auto",  
     font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",  
     // Drop lists for link/image/media/template dialogs  
     template_external_list_url : "lists/template_list.js",  
     external_link_list_url : "lists/link_list.js",  
     external_image_list_url : "lists/image_list.js",  
     media_external_list_url : "lists/media_list.js",  
     elements : "nourlconvert",  
     convert_urls : false,  
     language : "'.(file_exists(_PS_ROOT_DIR_.'/js/tiny_mce/langs/'.$iso.'.js') ? $iso : 'en').'"  
    });  
   });  
  }  
  tinyMCEInit(\'textarea.rte\');  
  </script>';

But it did not worked and showed error like 

TypeError: $(...).tinymce is not a function

So any help and suggestions will be really appreciable.

I am using prestashop 1.5.6.0 version.



vekia

    PrestaShop Legend

  • US Moderators
  • 44814 posts

Posted 20 November 2013 - 11:28 AM

hello

 

in editorial.php you've got example of this...

 

$this->_html .= $helper->generateForm($this->fields_form);

 

 

private function initForm()
{
$languages = Language::getLanguages(false);
foreach ($languages as $k => $language)
$languages[$k]['is_default'] = (int)($language['id_lang'] == Configuration::get('PS_LANG_DEFAULT'));
 
$helper = new HelperForm();
$helper->module = $this;
$helper->name_controller = 'editorial';
$helper->identifier = $this->identifier;
$helper->token = Tools::getAdminTokenLite('AdminModules');
$helper->languages = $languages;
$helper->currentIndex = AdminController::$currentIndex.'&configure='.$this->name;
$helper->default_form_language = (int)Configuration::get('PS_LANG_DEFAULT');
$helper->allow_employee_form_lang = true;
$helper->toolbar_scroll = true;
$helper->toolbar_btn = $this->initToolbar();
$helper->title = $this->displayName;
$helper->submit_action = 'submitUpdateEditorial';
 
$this->fields_form[0]['form'] = array(
'tinymce' => true,
'legend' => array(
'title' => $this->displayName,
'image' => $this->_path.'logo.gif'
),
'submit' => array(
'name' => 'submitUpdateEditorial',
'title' => $this->l('Save '),
'class' => 'button'
),
'input' => array(
array(
'type' => 'text',
'label' => $this->l('Main title'),
'name' => 'body_title',
'lang' => true,
'size' => 64,
'hint' => $this->l('Appears along top of your homepage'),
),
array(
'type' => 'text',
'label' => $this->l('Subheading'),
'name' => 'body_subheading',
'lang' => true,
'size' => 64,
),
array(
'type' => 'textarea',
'label' => $this->l('Introductory text'),
'name' => 'body_paragraph',
'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
),
array(
'type' => 'file',
'label' => $this->l('Homepage logo'),
'name' => 'body_homepage_logo',
'display_image' => true
),
array(
'type' => 'text',
'label' => $this->l('Homepage logo link'),
'name' => 'body_home_logo_link',
'size' => 33,
),
array(
'type' => 'text',
'label' => $this->l('Homepage logo subheading'),
'name' => 'body_logo_subheading',
'lang' => true,
'size' => 33,
),
)
);
return $helper;
}

free tutorials, free templates, free addons, prestashop modules MndfRK4.png


prestashop_newuser

    PrestaShop Apprentice

  • Members
  • PipPip
  • 165 posts

Posted 20 November 2013 - 11:34 AM

 

hello

 

in editorial.php you've got example of this...

 

$this->_html .= $helper->generateForm($this->fields_form);

 

 

private function initForm()
{
$languages = Language::getLanguages(false);
foreach ($languages as $k => $language)
$languages[$k]['is_default'] = (int)($language['id_lang'] == Configuration::get('PS_LANG_DEFAULT'));
 
$helper = new HelperForm();
$helper->module = $this;
$helper->name_controller = 'editorial';
$helper->identifier = $this->identifier;
$helper->token = Tools::getAdminTokenLite('AdminModules');
$helper->languages = $languages;
$helper->currentIndex = AdminController::$currentIndex.'&configure='.$this->name;
$helper->default_form_language = (int)Configuration::get('PS_LANG_DEFAULT');
$helper->allow_employee_form_lang = true;
$helper->toolbar_scroll = true;
$helper->toolbar_btn = $this->initToolbar();
$helper->title = $this->displayName;
$helper->submit_action = 'submitUpdateEditorial';
 
$this->fields_form[0]['form'] = array(
'tinymce' => true,
'legend' => array(
'title' => $this->displayName,
'image' => $this->_path.'logo.gif'
),
'submit' => array(
'name' => 'submitUpdateEditorial',
'title' => $this->l('Save '),
'class' => 'button'
),
'input' => array(
array(
'type' => 'text',
'label' => $this->l('Main title'),
'name' => 'body_title',
'lang' => true,
'size' => 64,
'hint' => $this->l('Appears along top of your homepage'),
),
array(
'type' => 'text',
'label' => $this->l('Subheading'),
'name' => 'body_subheading',
'lang' => true,
'size' => 64,
),
array(
'type' => 'textarea',
'label' => $this->l('Introductory text'),
'name' => 'body_paragraph',
'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
),
array(
'type' => 'file',
'label' => $this->l('Homepage logo'),
'name' => 'body_homepage_logo',
'display_image' => true
),
array(
'type' => 'text',
'label' => $this->l('Homepage logo link'),
'name' => 'body_home_logo_link',
'size' => 33,
),
array(
'type' => 'text',
'label' => $this->l('Homepage logo subheading'),
'name' => 'body_logo_subheading',
'lang' => true,
'size' => 33,
),
)
);
return $helper;
}

 

Where is the editorial.php file location? Where can I get this file? and what about the demo link http://www.prestasho...dule-admin-tab/



developer_php

    PrestaShop Newbie

  • Members
  • Pip
  • 1 posts

Posted 11 July 2014 - 11:11 AM

<script src="http://s3.amazonaws....es.org/embed.js" type="mce-text/javascript">// <![CDATA[
[
({
"video_url": "http://www.youtube.com/watch?v=7R6OAAGi6uk",
"base_state": {"language": "he"}
})
// ]]></script>

 

this script not working in editor







0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users