Jump to content
vekia

[TUTORIAL] tinyMCE rich text editor - extended version

Recommended Posts

thanks I also showed the text alignment buttons by adding 
"alignleft aligncenter alignright alignjustify" to one of the toolbars

Share this post


Link to post
Share on other sites

Hi vekia,

 

just made modifications you suggested in your tutorial on our PS1.6.0.8 shop, modified both files, though no change that I can see in the back office. Any idea what could be an issue?

 

Thanks a lot.

Share this post


Link to post
Share on other sites

Hi vekia,

 

just made modifications you suggested in your tutorial on our PS1.6.0.8 shop, modified both files, though no change that I can see in the back office. Any idea what could be an issue?

 

Thanks a lot.

 

try to clear browser cache, there is a chance that your browser remember old js files

  • Like 1

Share this post


Link to post
Share on other sites

Thanks a lot,

 

I have just tried it in the fresh browser and it worked - so it's gonna be cache.

 

Fantastic, thank you so much for your help! :-)

 

Regards,

shv

 

try to clear browser cache, there is a chance that your browser remember old js files

Share this post


Link to post
Share on other sites

Hello,

I have a misterious issue in my case When I click on any product I see the default informations, then once I click on any other link like for e.g "Price" I get a blanck page but the menu still remains. Once I have a blanck page under the clicked menu, any other link on that menu shows the same result. Nothing happen. I've also noticed that when I'm in the product page (in admin) and still see the default informations meaning I didn't clicked on any other link yet, there I don't see the simplified url field. So If I click directly on save I get a message saying rewritte url must be specified like following : It's in french I made the translation myself :).

 

"    3 errors

     The link_rewrite field is required at least in French (French)
     The product must be in at least one category.
      It must be in the default category.
    "

 

I've tried all your tutorials, and even bought a prestashop module for rich texts but I'm still not allowed to do anything with my products. I get the same result when I try to add a new product. Gerneral informations fields are there, once I click on any other link just to check, I'm scr...I can't do anything.

Please help.

Thank you in advance. :)

Share this post


Link to post
Share on other sites

Do you have a method to add tinyMCE in the latest release: 1.6.0.10 ? (ondemand)
I guess we have to use the overrides.

Share this post


Link to post
Share on other sites

Hello,

 

It was a conflict with a plugin.

I've removed all non Prestashop plugins and voila ! I can modify my products now. Now I have another issue.

When I try to edit a category or click save I get blank page. I've tried to get errors using setting.inc.php but nothing was showing up.

Then I've replaced the file controllers/admin/AdminCategoriesController.php by this one https://searchcode.com/codesearch/view/43503828/ and now I can see error message

saying 

 

line 246

/tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code
[8] Undefined index: categories_tree_current_id

 

and also

line 246 

/tools/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code

[8] Trying to get property of non-object

 

Thank you in advance.

Share this post


Link to post
Share on other sites

HI Vekia,

 

We just upgraded to the PS 1.6.0.9 (from 1.6.0.8), and we lost this beautiful feature. I went to the js/tinymce folder and there is another file ¨tinymce.min.js¨, so one cannot apply directly your instructions re: tinymce.inc.js.

 

Any way one can set up extended MCE in the PS 1.6.0.9? Thanks for any hint,

 

Best,

shv

 

try to clear browser cache, there is a chance that your browser remember old js files

Share this post


Link to post
Share on other sites

 

 

and there is another file ¨tinymce.min.js¨

you mean that you have there two tinymce.min.js files ?

Share this post


Link to post
Share on other sites

Hi Vekia,

 

Thanks for your reply. There is one  tinymce.min.js file of course in the dir, I just meant that there is a tinymce.min.js file and not the /js/tinymce.inc.js  as mentioned in the tutorial. I tried to substitute tinymce.min.js the same way as described for tinymce.inc.js, and it did not really work out (so if I substitute the whole file with the code as described in the tutorial for tinymce.min.js, the whole rich text editing is gone ie. does not appear anymore, so I have to revert to the original file). 

 

What modifications should I do for tinymce.min.js in this case?

 

Thank you very much for your help,

shv

 

 

you mean that you have there two tinymce.min.js files ?

Share this post


Link to post
Share on other sites

Are FORM tags accepted with this extended editor?

I use prestashop 1.6.0.8, I installed correctly the editor and adjusted validate.php, but I'm unable to insert my form. It says no error, but it removes all text field and "send" button.

Any idea?

 

-------

just got it: preference/general/turn off html purifier

Edited by limonaderose (see edit history)

Share this post


Link to post
Share on other sites

Hi everybody,

 

Just found a plugin which saved me time for chasing the modifications for PS 1.6.0.9. There is a free plugin from a Spanish PS agency, available for free download directly from their page:

 

http://www.alabazweb.com/en/modulos-para-la-administracion-de-prestashop/295-modulo-para-completar-el-editor-de-prestashop-.html

 

Just download and install the module - and voila, enjoy extended editor in your back office!

 

Best,

shv

Edited by shv (see edit history)

Share this post


Link to post
Share on other sites

in earlier versions of tinymce (from prestashop 1.5.x) i had the option for vertical alignment (top, middle, bottom) - mostly when working with tables. Now i can't seem to find that option. is it still available? 

 

I'm mostly using tables in CMS pages so i kinda need the option to align some text differently in the cells

 

Any help?

 

Cheers!

Share this post


Link to post
Share on other sites

Hi everybody,

 

Just found a plugin which saved me time for chasing the modifications for PS 1.6.0.9. There is a free plugin from a Spanish PS agency, available for free download directly from their page:

 

http://www.alabazweb.com/en/modulos-para-la-administracion-de-prestashop/295-modulo-para-completar-el-editor-de-prestashop-.html

 

Just download and install the module - and voila, enjoy extended editor in your back office!

 

Best,

shv

 

 

Hello,

 

Many thanks for the link about this module.

 

However I tested on PS 1.6.0.6 and doesn't work.

 

It seems the file Validate.php (module tinymcefull.zip) set inside the folder : .\override\classes has no effect and gives errors.

 

Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites
Hi,

 

I am using Prestashop 1.5.6.2.

 

I would have two questions about tiny mce.

 

1- It seems that tiny mce automatically adds <p> tag at the beginning of the category Description html source code (and </p> tag at the end).

Yet, in category.tpl, is already the same tag.

So, each category page the Description source code displays as follows :

<p><p>text of the category Description...</p></p>

And the above line is w3c non compliant, due to the insertion of a <p> tag in another <p> tag.

 

So, how would it be possible to solve the matter :

- avoiding tiny mce to add the <p> tag  ?

- deleting the <p> tag from the category.tpl file code ?

 

 

2- Is there the way to have syntax highlighting in tiny mce editor ?

 

Thank you in advance for any reply.

 

Patrick

Share this post


Link to post
Share on other sites

How is it possible to get back the options to change tables colors? This option has been removed and will never be re activated ?

 

The ADVANCED tags are not there any longer ? How can we get them back ?

Also how is it possible to resize the product description page and scroll it instead of having to move up and down when you have to edit the bottom of the description page ?

 

On the tinymce web site both the advanced options and the possibility to resize the page seems to be existing.

 

Thank you

Edited by Mackens (see edit history)

Share this post


Link to post
Share on other sites

Hi Vekia,

thanks, the MCE is now complete. But my problem is still not solved.

Pics are not showing in BE and FE. URLs are still overwritten. 
 

 

this is what I wrote into the code

 

<p>src="http://vianaturale.de/img/cms/thomas_wendt_neu.jpg" alt="" /></p>

 

 

and this is what the MCE makes out of it: 

 

<p>src="../img/cms/thomas_wendt_neu.jpg" alt="" /></p>
 

 

And even my workaround with a subdomain which used to work doesn't show my pic :-(

<p><img src="static.vianaturale.de/img/cms/markus_bertolero.jpg" alt="" /></p>

 

I inserted

convert_urls: false,

into the modified 
tinymce.inc.js but code still is overridden.. any suggestions?

Thx

 

edit:

It works! I inserted these two lines tinymce.inc.js from another thread between us, that I overlooked

relative_urls:false,

remove_script_host:false,

Thanks!
Edited by cagoo (see edit history)

Share this post


Link to post
Share on other sites

that's right

on article page, in facebook comments sections you can find my answers related to this problem

Share this post


Link to post
Share on other sites

Hey Vekia,

 

I'm using the latest version (1.9.2) of the eBay module with Prestashop 1.6.0.9.

 

The editor on the eBay template doesn't even have a HTML toggle as described in it's instructions... any ideas? Does this module use the same tinyMCE also?

 

Thanks,

 

Chris

Share this post


Link to post
Share on other sites

Hello! make changes and I disappeared text editor, as might bring back help! I prestashop 1.6.0.9

150202025823425400.jpg

Share this post


Link to post
Share on other sites

Hello! make changes and I disappeared text editor, as might bring back help! I prestashop 1.6.0.9

150202025823425400.jpg

 

show me your modified file.

Hey Vekia,

 

I'm using the latest version (1.9.2) of the eBay module with Prestashop 1.6.0.9.

 

The editor on the eBay template doesn't even have a HTML toggle as described in it's instructions... any ideas? Does this module use the same tinyMCE also?

 

Thanks,

 

Chris

 

i don't know what ebay module you use.

some of the modules uses own different editor totally not related to build-in tinymce.

everything depends on module.

Share this post


Link to post
Share on other sites

 

prestashop-1-6-extended-tiny-mce-editor.

 

Default rich text editor in PrestaShop 1.6 is limited to most important features. There is no font-family checker there is no font-size cecker, no table tool, no media etc.

In addition - tinyMCE removes all lot of html markups, removes scripts (js), css styles etc.

 

With this guide you can prevent removing code, and the most important thing:

you can extend your tinyMCE editor for a lot of new features!

 

tutorial:

PrestaShop 1.6 extended rich text editor

 

 

Thanks Vekia for the solution. It worked as expected. But, I was wondering how to achieve the below level of indenting in tinyMCE to display the Legal Terms Sections, Clauses and sub-clauses. What I want to show is like this

 

1. Section A

1.1 Clause A

1.1.1 Sub Clause A

i. ABC

ii. DEF

1.2 Clause B

1.3 Clause C

1.4 Clause D

1.4.1 Sub Clause D

 

Appreciate your expert help.

Edited by yashman (see edit history)

Share this post


Link to post
Share on other sites

for everyone that have troubles, short video:

  • Like 1

Share this post


Link to post
Share on other sites

Hi Vekia,

 

Nice tutorial but after doing this (probably) some fields description from Realex module dissapeared.

 

Can you tell me what's wrong?

 

 

post-1040255-0-02085200-1436955112_thumb.jpg

post-1040255-0-12995700-1436955113_thumb.jpg

Share this post


Link to post
Share on other sites

hello

i dont think so

modification cant affect other modules.

if you lost translations - this can be a case of prestashop 1.6. bug

 

 

fix on PrestaShop GitHub respository here: https://github.com/PrestaShop/PrestaShop/commit/9e27137fc1f1d57d4da9fc3fc1a63bba23c9a422

 

You need to download these two files:
– /controllers/admin/AdminTranslationsController.php
– /classes/Translate.php

 

Copy these files to proper folders in your PrestaShop installation, AdminTranslationsController to /controllers/admin/ and Translate.php to /classes/. Replace old files.

Share this post


Link to post
Share on other sites

Thanks for clearifying. I wasn't aware about this fix.

I've updated and checked translations module and everything works fine now.

Thanks.

Share this post


Link to post
Share on other sites

no worries dude,

im glad that i could help in this case :-)

happy copywriting with extended tinymce editor ;-)

Share this post


Link to post
Share on other sites

Hi Vekia,

 

Very good tutorial !

As Dsc54000,  I find no solution to add class (fancybox for exemple) in "Insert Link" in TinyMCE .

Perhaps with this function link_class_list, I can not configure ...

 

tinymce.init({
    plugins: "link",
    link_class_list: [
        {title: 'None', value: ''},
        {title: 'Dog', value: 'dog'},
        {title: 'Cat', value: 'cat'}
    ]
});

http://www.tinymce.com/wiki.php/Configuration:link_class_list

Can you help me ?

Share this post


Link to post
Share on other sites

hi vekia nice work

i need to change the default direction of text to rtl ,i mean dir="rtl" property to be default ,how can i add a button ?

i don't know where i should past this code 

tinymce.init({

...
directionality : 'ltr',
...
});

Edited by vahidasadi1 (see edit history)

Share this post


Link to post
Share on other sites

Thanks for this hack Vekia

 

Only one issue that appears with a module (one that edits email templates) that uses some tags  such as {shop_link_url} in href attributes ( which the module fills dynamically afterwards)

 

I've found that

convert_urls:true,

Makes the editor to transform the url to

 href="http://yourshop.com/your_admin_folder/{shop_link_url}

 

I've put convert_urls: to false and that resolves this issue apparently.

Share this post


Link to post
Share on other sites

HOW i can TINY MCE for MY prestashop ??

 

i Not see TINY MCE ..

 

I JUst Paste Code HTML in CMS but Failed... HOW ??? Please HELP ME

Share this post


Link to post
Share on other sites

@Czarekplpl

 

Inside PS 1.6.0.14 the file tinymce.inc.js is located Inside : .\js\damin\tinymce.inc.js

 

Inside some previous PS version we need to copy the tinymce.inc.js Inside : .\js\tinymce.inc.js

 

Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Hello,

 

Thanks Enrique, I use your module and this one working fine with PS 1.6.0.6...but I added some lines inside the supertinymce.php :

if (_PS_VERSION_ <= "1.6.0.9"){	
	// Realiza compia de seguridad de los archivos originales e instala los archivos del módulo.
	if(!parent::install() OR
	!rename(_PS_ROOT_DIR_.'/js/tinymce.inc.js',_PS_ROOT_DIR_.'/js/tinymce.inc.js.old') OR
	!copy(_PS_MODULE_DIR_."/supertinymce/js/tinymce.inc.js",_PS_ROOT_DIR_.'/js/tinymce.inc.js') OR
	!copy(_PS_MODULE_DIR_."/supertinymce/override/classes/Validate.php",_PS_ROOT_DIR_.'/override/classes/Validate.php'))
	return false;
	chmod(_PS_ROOT_DIR_.'/js', 0777);  // cambia los permisos de la carpeta a 777
	if(file_exists(_PS_ROOT_DIR_.'/cache/class_index.php'))
		unlink(_PS_ROOT_DIR_.'/cache/class_index.php');
	return true;
   }

And works fine with my PS 1.6.0.6 and higher version ;-)

 

Friendly

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

 

prestashop-1-6-extended-tiny-mce-editor.

 

Default rich text editor in PrestaShop 1.6 is limited to most important features. There is no font-family checker there is no font-size cecker, no table tool, no media etc.

In addition - tinyMCE removes all lot of html markups, removes scripts (js), css styles etc.

 

With this guide you can prevent removing code, and the most important thing:

you can extend your tinyMCE editor for a lot of new features!

 

tutorial:

PrestaShop 1.6 extended rich text editor

 

 

 

for everyone that have troubles, short video:

 

 

Hi Miłosz, thanks for the guide. A question: is there a way to use the override directory instead replace the original tinymce.inc.js file?

 

P.S.: I'm Italian and the code change the Tinymce language to English; I add this on line 25:

language: iso,

and the language come back to Italian. Hope it helps non-english users.

Share this post


Link to post
Share on other sites

Hi vekia,

 

thanks for the guide. I am using Prestashop 1.6.0.9. I have enabled the extended tinymce by editing the /js/tinymce.inc.js and /classes/Validate.php as suggested in your guide. The new editor is there, but I can't seem to insert Javascript on a product page (long) description.

 

Basically what I want to do is call in a separate document inside the product description (called by js document.write) as suggested by Tafkadasoh here.

 

The reason for this is that we sell clothes and we have many different tables to show the customers the sizes of the clothes. I want to keep each table in a separate file and inject them into certain product descriptions. If it would work, we would only have to update one file instead of each product if we change any size tables. We will make many different tables for different types of clothes.

 

However, if I insert a simple " <script src="mytablewithdocumentwrite.js"></script> " in my product description, it still gets ignored by Prestashop.

All javascript seems to get ignored.

 

Should be simple enough? Any ideas why it doesn't work?

 

Edit: I forgot to mention: HTML Purifier is disabled in the back office.

Edited by Nixnix (see edit history)

Share this post


Link to post
Share on other sites

Hello, i have the extended tinymce installed and working, but on the product description, when i hit enter the editor insert a <br> instant of an <p></p> bracked, how i can fix this? because its hard when the product description is long to manually modify the code with the correct tags

Share this post


Link to post
Share on other sites

Is it safe to remove rules from Validate class?

I mean if somebody tries for example to post a comment on a product with some javascript or php?

Share this post


Link to post
Share on other sites

I've found some very useful function to load CSS files of your theme, so you will see how your text looks right in editor.

This includes fonts, classes, buttons etc.

 

Find file YOUR_ROOT_DIR/js/admin/tinymce.inc.js

Find this code:

default_config = {
		selector: ".rte" ,
		plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor",
...

Add this line

content_css : "/themes/your_theme_dir/css/global.css", 

before selector: ".rte" ,

In example for Default theme this will be:

default_config = {
		content_css : "/themes/default_bootstrap/css/global.css",
		selector: ".rte" ,
		plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor",

That's it, now your text will look like it will be on pages of your site.

It would be marvelous if someone could change hard coded theme name on variable depending on theme that site uses (for multishop instances).

Share this post


Link to post
Share on other sites

Anyone calm me down, please

Is it safe to remove rules from Validate class?

I mean if somebody tries for example to post a comment on a product with some javascript or php?

:)

Share this post


Link to post
Share on other sites

I get this error after following extend instructions, its working in PS ver 1.6.1.1.  how do I fix?  - uncaught referenceerror: ad is not defined tinymce.inc.js: 21

Share this post


Link to post
Share on other sites

Perfect tutorial, thank you so much! Quick question: WIll replacing the validation in isCleanHtml() open up any security risk for the HTMLPurifier Library in ver 1.6? (Does the HTMLPurifier Library rely on any calls from Validate.php class?) Thanks in advance for your input!

Share this post


Link to post
Share on other sites

hi vekia, thnx for your excellent work

 

I followed carefully your 2 tuts (extended mce for 1.6 and fancybox gallery)

 

I have presta 1.6.1.2 and:

 

- tinymce is extended, but not completely as in the images of your tutorial: i do see new items, like add emoticons, add date... but when adding imgs or links I cannot see the tabs (advanced, popup, event) so I can't add the fancybox class to the link unless I do it manually on the code editor.

 

- so I can set a fancybox gallery in cms, but not as easily as you did. Is presta 1.6.1 different in any way? Can I fix this?

 

ps. also i got cdata instead of script type tag, but it works anyway.

 

Thnx a lot

Edited by josecarre (see edit history)

Share this post


Link to post
Share on other sites
Hello josecarre, 

I require exactly of the same thing : I need to use the tabs advanced, popup, event to make fancybox galleries and put class on images ...

do you find a solution ?

thanks for your help 

julien

Share this post


Link to post
Share on other sites

Thnx vekia for you contribution,

After the 1 click upgrade from 1.6.1.3 to 1.6.1.4, the settings are gone, I have change them again, all works fine, but I have a Q about to center a video, that don't work, after saving, they stands back to the left side..

Any tips to solve this?

 

Best Regards,

Generaal

Edited by Generaal (see edit history)

Share this post


Link to post
Share on other sites

hello,

 

i have also modified our editor. we would like to add a button with text-templates for our products. but the behaviour of editor is different at the product edit and other edit sites.
When we edit a product, then is the editor without our button, otherwise is the editor with the button.

 

see here: https://www.prestashop.com/forums/topic/503257-tinymce-editor-is-different-in-product-page-and-cms-page/

Share this post


Link to post
Share on other sites

HI and thanks for that nice tip !

 

It works well with me except when I want to add onmouseover="this.src='...' it still delete it on HTML code when I reload the page...

 

I have 1.6.1.1 version
I modified Validation.php, /js/tinymce.inc.js and deleted /cache/class_index.php file.

I have HTMLPurifier Library desactivated.

 

Somebody knows about this problem ?

Share this post


Link to post
Share on other sites

Hi

Thanks, but for me, in them cms the text is still getting cleaned.

I am trying to add an onclick to a link in a cms page and I cant get it to work :/

 

Using PS 1.6.0.14

 

 

I found the solution.. Disabled HTML purifier under Preferences - general :)

Edited by SaLiC (see edit history)

Share this post


Link to post
Share on other sites
Hello,

I hope that someone could help me on this...

I tried for about 4 hours to add the "Advanced tab" to the table plugin in Tinymce... I would like to insert table with a specific class in the editor...

 

I tried to pace :


table_advtab: true,

table_styles : "Mon style=style1;",

 

But it doesn't works...


 

How can I do this, I'm on presta 1.6.1.3.

 

@vekia I hope you will see my request :)

Share this post


Link to post
Share on other sites

I have made the necessary changes, disabled magic quotes, disable html purifier however the following:

 

<script type="text/javascript">
    $("#faqs dd").hide();
    $("#faqs dt").click(function () {
        $(this).next("#faqs dd").slideToggle(500);
        $(this).toggleClass("expanded");
    });
</script>
 
Is being changed to:
 
<script>// <![CDATA[
    $("#faqs dd").hide();
    $("#faqs dt").click(function () {
        $(this).next("#faqs dd").slideToggle(500);
        $(this).toggleClass("expanded");
    });
// ]]></script>

Share this post


Link to post
Share on other sites

Hi Miłosz, thanks for the guide. A question: is there a way to use the override directory instead replace the original tinymce.inc.js file?

 

P.S.: I'm Italian and the code change the Tinymce language to English; I add this on line 25:

language: iso,

and the language come back to Italian. Hope it helps non-english users.

Thanks Milosz, everything worked fine for me, except for the language issue. I did as ToXxX so kindly indicates, but Spanish is not back...Any idea on how to bring it back?

Share this post


Link to post
Share on other sites

Hello Vekia,

 

Excellent tutorial, I have followed with success for the moment in a prestashop 1.6.0.9

 

My question is whether it is possible to recover tinyMCE in french, please.

 

Because with this manipulation, the editor is in English.

 

Cordially.

Share this post


Link to post
Share on other sites

Hello Vekia,

 

Excellent tutorial, I have followed with success for the moment in a prestashop 1.6.0.9

 

My question is whether it is possible to recover tinyMCE in french, please.

 

Because with this manipulation, the editor is in English.

 

Cordially.

 

hello,

tinymce editor language should be the same as language that you use in shop back office

from what i understand you use french language in BO, but tinymce is in english language ?

Share this post


Link to post
Share on other sites

Hello Vekia,

 

First of all thank you for your reply. You are perfectly identified my problem, actually I use PrestaShop in french, and prior to practice your tutorial, tinymce worked also in French, and now it appears in English in my BO.

 

Cordially.

Edited by shooping (see edit history)

Share this post


Link to post
Share on other sites

Hi,

 

I've just started working with Prestashop and I’ve been having some difficulty formatting the info on the product description. I would like to know if tinyMCE could be my answer.

 

I'm new with all of this so I’ll try to explain the problems the best i can!

 

 

1. if I separate 2 paragraphs with 1 clear line, on preview this space disappears. how can i format the text so that it accepts this space?

 

2. I need to put a table on my product description and I've not been able to find a way to  make it with a border in a simple way (i found a tutorial where it was suggested I would change the code by hand with something like <table class="table table-bordered">, but the site info will be uploaded by many different people and it would be better not to mess with the code). Is this possible?

 

 

3. Is it possible to specify the width of the table? When I tried to add the border on the table by changing the code (with <table class="table table-bordered">), the table automatically appeared with the general width of the website and i need it to be narrower.

 

 

4.I've seen on some tutorials that the tools interface from my version is simpler then others. Could this be why i'm having this difficulties? If so, how can I upgrade it?

 

 

 

...i've uploaded some pictures that help explane what is happening and what i'm looking for.

 

Hope you can help me!

 

thanks 

Joana

post-1243480-0-88486200-1462439889_thumb.jpgpost-1243480-0-00474900-1462439891_thumb.jpgpost-1243480-0-76083400-1462439891_thumb.jpgpost-1243480-0-28360200-1462439892_thumb.jpg

 

 

Share this post


Link to post
Share on other sites

Hi,

 

I've just started working with Prestashop and I’ve been having some difficulty formatting the info on the product description. I would like to know if tinyMCE could be my answer.

 

I'm new with all of this so I’ll try to explain the problems the best i can!

 

 

1. if I separate 2 paragraphs with 1 clear line, on preview this space disappears. how can i format the text so that it accepts this space?

 

2. I need to put a table on my product description and I've not been able to find a way to  make it with a border in a simple way (i found a tutorial where it was suggested I would change the code by hand with something like <table class="table table-bordered">, but the site info will be uploaded by many different people and it would be better not to mess with the code). Is this possible?

 

 

3. Is it possible to specify the width of the table? When I tried to add the border on the table by changing the code (with <table class="table table-bordered">), the table automatically appeared with the general width of the website and i need it to be narrower.

 

 

4.I've seen on some tutorials that the tools interface from my version is simpler then others. Could this be why i'm having this difficulties? If so, how can I upgrade it?

 

 

 

...i've uploaded some pictures that help explane what is happening and what i'm looking for.

 

Hope you can help me!

 

thanks 

Joana

attachicon.gif1.JPGattachicon.gif2.JPGattachicon.gif3.JPGattachicon.gif4.JPG

 

everything you attached is a case of css styles.

you have to use classess that will meet bootstrap requirements

Share this post


Link to post
Share on other sites

Hi

I Have Problem With Insert Bootstrap Code in TinyMCE

when i put in Source Code TinyMCE

 

<a data-toggle="tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook fa-lg"></i></a>
 

The text saved is : 

 

<p><a title="Facebook" href="#"><em class="fa fa-facebook fa-lg"></em></a></p>

 

i Change 

extended_valid_elements
valid_children
valid_elements
 
The problem is not solved !
Thanks

Share this post


Link to post
Share on other sites

so from what i see it removes: data-toggle="tooltip" data-placement="bottom" 

and changes <i> to <em> 

 

that's right?

 

 

 

what is the version of ps you use?

  • Like 1

Share this post


Link to post
Share on other sites

I solved this problem (changes <i> to <em>) by installing FontAwesome Plugin

But I Want Insert Bootstrap Code in TinyMCE .

I Use PrestaShop v1.6.1.5 

Thanks

Share this post


Link to post
Share on other sites

This was working fine on my shop, but it suddenly stopped working and the old editor is back. my Prestashop 1.6.1.5

 

Share this post


Link to post
Share on other sites

so from what i see it removes: data-toggle="tooltip" data-placement="bottom" 

and changes <i> to <em> 

 

that's right?

 

 

 

what is the version of ps you use?

I am using PS 1.6.1.6 and URL button option not displaying on front end when I select the option Button to display the URL on front end its not displaying.

post-411458-0-24063200-1466448636_thumb.jpg

post-411458-0-09872600-1466449855_thumb.jpg

Edited by lovemyseo (see edit history)

Share this post


Link to post
Share on other sites

your theme does not support default .btn-default css styles

use this:
 

.btn-default {
  padding: 5px 15px;
  background:#ececec;
  border: 1px solid #c0c0c0;
  text-decoration:none;
  color:#6d6d6d;
}

.btn-default:hover {
  padding: 5px 15px;
  background:#FFF;
  border: 1px solid #ececec;
  text-decoration:none;
  color:#6d6d6d;
}

in global.css

Share this post


Link to post
Share on other sites

your theme does not support default .btn-default css styles

use this:

 

.btn-default {
  padding: 5px 15px;
  background:#ececec;
  border: 1px solid #c0c0c0;
  text-decoration:none;
  color:#6d6d6d;
}

.btn-default:hover {
  padding: 5px 15px;
  background:#FFF;
  border: 1px solid #ececec;
  text-decoration:none;
  color:#6d6d6d;
}

in global.css

Excellent [spam-filter] :) and why in new PS when we enter a url its not  highlighted as blue color instead it displays as black font color any snippeted to change it for global.css

Share this post


Link to post
Share on other sites
Hi Vekia,
I followed your tutorial, but since then I get this error:
 
Property PrestaShopLogger->object_type is not valid
 
I tried to switch back to the original files, clear browser cache and delete Class_index.php, but I still get the error...
 
I'm on Presta 1.6.0.14
 
Thanks for any help!

 

 

 

Property PrestaShopLogger->object_type is not valid

Share this post


Link to post
Share on other sites

Hi Vekia,

 

 

I get this message each time I save the product.

All changes seem to be saved despite the error message, except for the product variations. I can only delete them, but not create new ones nor change existing ones.

If I change the price/description everything is ok, even if Presta throws the error.

Share this post


Link to post
Share on other sites

I uploaded an "untouched" validate.php from a fresh 1.6.0.14 install and it all worked out, everything back to normal.

 

Can it have something to do with the file encoding?? 

I tried saving my file in ANSI and UTF8 with and without BOM, but I didn't see any difference. Only the fresh untouched file did it...

 

I'd really like to have that extended TinyMCE... 

Share this post


Link to post
Share on other sites

Also the paste button either pasting using mouse option or using direct paste button on product page , when we right click to paste on product short and logn description it brings the editor options

Share this post


Link to post
Share on other sites

Hi 

please help me

prestashop 1.6.1.6

i instal module prestashop shortcode 

and this module install tinymce extended also...

but now in new cms page i cannot insert image...

in front office the image have question mark in back office all is ok

 

es

backoffice: www.mywebsite.it/img....

front : www.mywebsite.it/it/img....  <------ when i save change the url image and became a question mark

 

if  i disable pretty url all all work perfect

if  i disable second language all work perfect

 

 

how can i resolve this matter?

thanks

 

http://www.gentemoda.it/en/content/60-test

Edited by erbombarolo (see edit history)

Share this post


Link to post
Share on other sites

Hi 

please help me

prestashop 1.6.1.6

i instal module prestashop shortcode 

and this module install tinymce extended also...

but now in new cms page i cannot insert image...

in front office the image have question mark in back office all is ok

 

es

backoffice: www.mywebsite.it/img....

front : www.mywebsite.it/it/img....  <------ when i save change the url image and became a question mark

 

if  i disable pretty url all all work perfect

if  i disable second language all work perfect

 

 

how can i resolve this matter?

thanks

 

http://www.gentemoda.it/en/content/60-test

 

hello

you installed tinymcepro or applied modifications manually as it is described in the guide?

Share this post


Link to post
Share on other sites

hello

you installed tinymcepro or applied modifications manually as it is described in the guide?

Hello this problem now resolved with closing and restart cache of browser and asking support to developer of module prestashop shortcode... very nice man that help me in this situation...

now all is ok thank you very much

Share this post


Link to post
Share on other sites

=-(

 

PrestaShop version 1.6.1.6

 

this does not work for me. I have tried with 3 different browsers as well.

It always strips my css from the editor.

 

Let me rephrase this, It gives me the extended editor as I can see all the newer options, but when I try to paste what I have working on 1.6.0.6 it strips the script.

 

I have change the validation as well.

 

 

 

<!-- Begin MailChimp Signup Form -->
<style type="text/css"><!--
#mce-EMAIL, #mce-FNAME {
float: left;

margin-right: 15px!important;
}
#mc-embedded-subscribe { margin: 0; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
--></style>
<table>
<tbody>
<tr>
<td>
<div id="mc_embed_signup"><form action="//plussizeappeal.us13.list-manage.com/subscribe/post?u=5a573a2927eec283cc469ee2e&id=3f738ab457" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll"><label for="mce-EMAIL">Subscribe to our mailing list</label> <input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required="" type="email" /> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><span style="color: #ffffff;"><input name="b_5a573a2927eec283cc469ee2e_3f738ab457" tabindex="-1" value="" type="text" /></span></div>
<input value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" type="submit" /></div>
</form></div>
</td>
<td></td>
<td>
<p><a href="http://facebook.com/plussizeappeal" target="blank"><img src="../img/social_media/facebook.jpg" height="30px" width="30px" /></a> <a href="http://instagram.com/plussizeappeal" target="blank"><img src="../img/social_media/instagram.jpg" height="30px" width="30px" /></a> <a href="http://pinterest.com/plussizeappeal" target="blank"><img src="../img/social_media/pinterest.jpg" height="30px" width="30px" /></a> <a href="http://twitter.com/plussizeappeal" target="blank"><img src="../img/social_media/twitter.jpg" height="30px" width="30px" /></a> <a href="http://youtube.com/plussizeappeal" target="blank"><img src="../img/social_media/youtube.jpg" height="30px" width="30px" /></a></p>
</td>
</tr>
</tbody>
</table>

post-794829-0-00379700-1471231563_thumb.png

post-794829-0-74038900-1471231567_thumb.png

post-794829-0-24959700-1471231578_thumb.png

post-794829-0-47180900-1471231583_thumb.png

Edited by mpouliot34 (see edit history)

Share this post


Link to post
Share on other sites

it was a case of html purifier that cleans up the html code

Share this post


Link to post
Share on other sites

@vekia Thank you for the tutorial. 

 

But the website is not accessible. Can you please share the code with me? 

 

Regards,

 

EDIT: I've found the link from Vekia's post in different topic.

 

Here is the code for people who can not access the website.

 

(....)

Share this post


Link to post
Share on other sites

I changed the file with the code above. Now it works. I can see rich editor buttons but I have a problem. I still can not use the embed codes in my CMS pages such as tweet embed.

 

For example: 

 

<blockquote class="twitter-tweet" data-lang="tr"><p lang="en" dir="ltr">Now on Android! Turn on night mode to Tweet in the dark. <a href="https://t.co/XVpmQeHdAk">https://t.co/XVpmQeHdAk</a> <a href="https://t.co/vrIDEM22vO">pic.twitter.com/vrIDEM22vO</a></p>— Twitter (@twitter) <a href="
">26 Temmuz 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Share this post


Link to post
Share on other sites

 

@vekia Thank you for the tutorial. 

 

But the website is not accessible. Can you please share the code with me? 

 

Regards,

 

EDIT: I've found the link from Vekia's post in different topic.

 

Here is the code for people who can not access the website.

 

(....)

 

 

our website was offline from 27 AUG 2016 to 29 AUG 2016 because of hosting issue :)

Share this post


Link to post
Share on other sites

 

I changed the file with the code above. Now it works. I can see rich editor buttons but I have a problem. I still can not use the embed codes in my CMS pages such as tweet embed.

 

For example: 

 

<blockquote class="twitter-tweet" data-lang="tr"><p lang="en" dir="ltr">Now on Android! Turn on night mode to Tweet in the dark. <a href="https://t.co/XVpmQeHdAk">https://t.co/XVpmQeHdAk</a> <a href="https://t.co/vrIDEM22vO">pic.twitter.com/vrIDEM22vO</a></p>— Twitter (@twitter) <a href="
">26 Temmuz 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

 

 

what is going on exactly? you see some errors or what?

Share this post


Link to post
Share on other sites