Jump to content
vekia

[TUTORIAL] tinyMCE rich text editor - extended version

Recommended Posts

Hello Vekia,

 

I installed this tinyMCE rich text editor but now I can not use your HTML box mudule anymore. Can you please help me?

Share this post


Link to post
Share on other sites

Hi,

I edited the files like you show.  I am using prestashop 1.6.1.6. It works fine when I add javascript tags but what I am trying to do is add javascript:void(0)  to an href and it keeps getting stripped when I save.  Do you know a solution?

Share this post


Link to post
Share on other sites

Hi, I'm on prestashop 1.6.1.4.

I try the manual solution to use the tinyMCE rich text editor, but, it's seem not work.

I've refresh and try different bowser.

 

Is any solution?



Thank you :)

Share this post


Link to post
Share on other sites

 

 

I try the manual solution to use the tinyMCE rich text editor, but, it's seem not work.

you've got some error codes?

Share this post


Link to post
Share on other sites

Hello vekia,

I have follow your advice and replace the file.

But there are some strange things going on.

This is the information I receive with fire bug:

Uncaught ReferenceError: tinyMCE is not defined
    at tinySetup (tinymce.inc.js:136)
    at index.php?controller=AdminProducts&id_product=1&updateproduct&token=437bb20…:1713
    at ProductTabsManager.onLoad (products.js:87)
    at HTMLDocument.<anonymous> (index.php?controller=AdminProducts&id_product=1&updateproduct&token=437bb20…:1712)
    at j (jquery-1.11.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
    at Function.ready (jquery-1.11.0.min.js:2)
    at HTMLDocument.K (jquery-1.11.0.min.js:2)
Browser cache and smarty cache are clean.
When I go to the prodcut category, there are some things wrong, I receive a message that I have to connect the product to one of the categorys..but they are in the past correct pointed to the right catergory. When I put the product again to a category and go back to the product information page, the tekst editor pops up!
 
I'm runnig PS version 1.6.1.10
 
Best Regards,
Roger

Share this post


Link to post
Share on other sites

 

Hello vekia,

I have follow your advice and replace the file.

But there are some strange things going on.

This is the information I receive with fire bug:

Uncaught ReferenceError: tinyMCE is not defined
    at tinySetup (tinymce.inc.js:136)
    at index.php?controller=AdminProducts&id_product=1&updateproduct&token=437bb20…:1713
    at ProductTabsManager.onLoad (products.js:87)
    at HTMLDocument.<anonymous> (index.php?controller=AdminProducts&id_product=1&updateproduct&token=437bb20…:1712)
    at j (jquery-1.11.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
    at Function.ready (jquery-1.11.0.min.js:2)
    at HTMLDocument.K (jquery-1.11.0.min.js:2)
Browser cache and smarty cache are clean.
When I go to the prodcut category, there are some things wrong, I receive a message that I have to connect the product to one of the categorys..but they are in the past correct pointed to the right catergory. When I put the product again to a category and go back to the product information page, the tekst editor pops up!
 
I'm runnig PS version 1.6.1.10
 
Best Regards,
Roger

 

hello,

you ues updated version of the code?

i updated code in the tutorial recently

Share this post


Link to post
Share on other sites

No error codes for me.

 

firstly please try to clear browser cache (there is a chance that your browsers remember old .js files)

+ ive got question, you tried to check editor in various places? for example cms edit page, product description (product edit page) ?

Share this post


Link to post
Share on other sites

firstly please try to clear browser cache (there is a chance that your browsers remember old .js files)

+ ive got question, you tried to check editor in various places? for example cms edit page, product description (product edit page) ?

I clear the cache and try on different bowser. I check on CMS and Product edit page. There is nothing. :/

Share this post


Link to post
Share on other sites

Maybe it's already said/asked but I missed the Toolbar-commands to align text. If you need this too you have to change line 23 of the js\admin\tinymce.inc.js file to:

toolbar2 : "newdocument,print,|,bold,italic,underline,|,alignleft,aligncenter,alignright,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent",

Share this post


Link to post
Share on other sites

Hello, I use prestashop 1.7.0.3, TinyMCE editor appear in cms pages, but it won`t appear in product description. I get this error prestashop_klausimas.jpg

Share this post


Link to post
Share on other sites

Hello, I use prestashop 1.7.0.3, TinyMCE editor appear in cms pages, but it won`t appear in product description. I get this error prestashop_klausimas.jpg

 

what editor you see there instead?

Share this post


Link to post
Share on other sites

what editor you see there instead?

No editor shows at all. just simple window with no options as you can see in picture.

Share this post


Link to post
Share on other sites

Vekia, it is working now. it don`t show some icons but I can live with that. Thank you

 

what icons? can you show screenshot please? :-) i will update it :-)

Share this post


Link to post
Share on other sites

what icons? can you show screenshot please? :-) i will update it :-)

Yeah, sure. This is screen.trukstamos_ikonos.jpg

Share this post


Link to post
Share on other sites

hi 

 prestashop 1.6

 

source code editor 

add this below code  after saving change the code

 

<script type="application/ld+json">

"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "{$shop_name|escape:'html':'UTF-8'}",
"url" : "{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}",
"logo" : {
"@type":"ImageObject",
"url":"{$logo_url}"
}
}
</script>

 

after

 

<script>// <![CDATA[

//--><![CDATA[//><!--
// 
"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "{$shop_name|escape:'html':'UTF-8'}",
"url" : "{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}",
"logo" : {
"@type":"ImageObject",
"url":"{$logo_url}"
}
}
//--><!
// ]]></script>
 
i need script type <script type="application/ld+json">
any help

Share this post


Link to post
Share on other sites

 

hi 

 prestashop 1.6

 

source code editor 

add this below code  after saving change the code

 

<script type="application/ld+json">

"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "{$shop_name|escape:'html':'UTF-8'}",
"url" : "{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}",
"logo" : {
"@type":"ImageObject",
"url":"{$logo_url}"
}
}
</script>

 

after

 

<script>// <![CDATA[

//--><![CDATA[//><!--
// 
"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "{$shop_name|escape:'html':'UTF-8'}",
"url" : "{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}",
"logo" : {
"@type":"ImageObject",
"url":"{$logo_url}"
}
}
//--><!
// ]]></script>
 
i need script type <script type="application/ld+json">
any help

 

 

disable html purifier in your shop global settings and try to add code once again

Share this post


Link to post
Share on other sites

disable html purifier in your shop global settings and try to add code once again

 

Thank you vekia the king of the code :P

Share this post


Link to post
Share on other sites

Hi

 

I've extended he TinyMCE through your method and it works flawlessly but I'm still having trouble insering a simple JS Script inside a CMS page. 
For some reason it keeps wrapping my code inside CDATA Tags (that I think are commenting out my code) and my script won't run.

 

I've changed the Validate.php function

Switched off HTML Purifier

Allowed iFrames (And then switched them off again just to try)

 

Tried to recompile everything, it doesn't work.

 

What am I missing here? 

Share this post


Link to post
Share on other sites

 

 

 it keeps wrapping my code inside CDATA Tags (that I think are commenting out my code) and my script won't run.

it is definitely not because of the CDATA.

cdata is acceptable code and it cant affect scripts. Problem is probably somewhere else or the code you're trying to use has some errors (for example parse errors)

Share this post


Link to post
Share on other sites

table_advtab is enabled  by default  in tinymce4

 

table_advtab

 
This option makes it possible to disable the advanced tab in the table dialog box. The advanced tab allows a user to input style, border color and background color values.
 
Type: Boolean
 
Default Value: true
 
Possible Values: true, false

Share this post


Link to post
Share on other sites

Hi and thank you for another great, useful tutorial! I'm having similar problem as user kaleske, there are some icons missing but only when editing product pages. It is displayed correctly when editing categories and also on cms edit pages. I'm on v 1.7.2. Cache cleared, screenshot attached.

post-1421183-0-31208200-1504554062_thumb.jpg

Share this post


Link to post
Share on other sites

Hi, my PS version is 1.6.1.13

I would like add microdata attributes for all elements .. itemscope|itemtype|itemid|itemprop|content

I tryed with extended_valid_elements, valid_elements and cleanup:false but when I save the back office page the HTML into rich text field is cleaned from microdata :'(

I think that it depends from HTMLPurifier library because if I disabled it from BO work all perfectly... I would like HTMLPurifier enabled with exceptions...

 

Can help me?

Edited by ZiZuu (see edit history)

Share this post


Link to post
Share on other sites
12 hours ago, ZiZuu said:

Hi, my PS version is 1.6.1.13

I would like add microdata attributes for all elements .. itemscope|itemtype|itemid|itemprop|content

I tryed with extended_valid_elements, valid_elements and cleanup:false but when I save the back office page the HTML into rich text field is cleaned from microdata :'(

I think that it depends from HTMLPurifier library because if I disabled it from BO work all perfectly... I would like HTMLPurifier enabled with exceptions...

 

Can help me?

 

I've solved with a override of the purifyHTML static function in classes/Tools.php file

I've added:

// XXX start
// added capability to save any microdata attribute
$def->info_global_attr['itemscope'] = new HTMLPurifier_AttrDef_Text;
$def->info_global_attr['itemtype'] = new HTMLPurifier_AttrDef_Text;
$def->info_global_attr['itemprop'] = new HTMLPurifier_AttrDef_Text;
$def->info_global_attr['content'] = new HTMLPurifier_AttrDef_Text;
// XXX end

 

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

I've just made the two modifications needed for prestashop 1.6, but unfortunately, when I try to edit a cms page while adding a <style> something </style> it automatically gets cancelled after saving. Is there something elso to do for cms pages to be allowed in that kind of modifications?

Thanks

Francesco - Nicole design store

 

Share this post


Link to post
Share on other sites
On 4/8/2018 at 7:44 PM, nicoledesignstore said:

Hi,

I've just made the two modifications needed for prestashop 1.6, but unfortunately, when I try to edit a cms page while adding a <style> something </style> it automatically gets cancelled after saving. Is there something elso to do for cms pages to be allowed in that kind of modifications?

Thanks

Francesco - Nicole design store

 

 

hello

do you disabled "html purifier" ?

Share this post


Link to post
Share on other sites
23 hours ago, vekia said:

 

hello

do you disabled "html purifier" ?

Hello Vekia,

thanks for reply. No, I haven't. I noticed that this specific issue has been solved since I disabled the HTML Purifier, but, unfortunately, while I started to edit all the pages to update the new "link scheme" (needed due to an imminent need to switch to a full ssl website), I noticed that all the images in the "CMS" Pages, no matter in which hook them are located, started encountering a new "resource-link-related" issue.

Specifically, while an image is usually resourced in the editor as

<img src="../img/cms/CMS%20Nicole/Presentazione%20nicole%20design%20store.png" alt="" width="100%" />

and should be scouted in the server as

<img src="http://http://www.nicolestore.it/designstore/img/cms/CMS Nicole/Presentazione nicole design store.png" alt="" width="100%" />

and so it does in most of the pages, in each of the cms pages images with relative link structure are scouted as

<img src="http://www.nicolestore.it/designstore/it/img/cms/CMS Nicole/Presentazione nicole design store.png" alt="" width="100%" />

while in "Italian Language" and

<img src="http://www.nicolestore.it/designstore/en/img/cms/CMS Nicole/Presentazione nicole design store.png" alt="" width="100%" />

while in "English Language", and this situation directs to a non-displaying of the images, that are enlighted by browsers as "missing media"

Please take a look at:

http://www.nicolestore.it/designstore/it/content/4-nicole-design-store-negozio-di-oggettistica-complementi-d-arredo-hitech-profumi-e-saponi-a-forli

What is wrong with the module? Is it a common issue? Will the "PRO" Module solve the situation?

Thanks in advance

Francesco - Nicole design store

Share this post


Link to post
Share on other sites
On 13/4/2018 at 5:21 PM, vekia said:

 

hello

do you disabled "html purifier" ?

So, Vekia,

as of I really needed to solve the situation, i took a look at tiny mce guides and html5 <base> tag rules.
In first instance, I have managed to add to "header.tpl"file of my theme the following code:

With this modification, all images issues with relative path vanished, but I started Having issues with link, as of all relative ones redirected to the home page.

Than, i decided to make another try, while dismantling previoulsy made header modification and modifing directly the js/admin js file of the tiny mce, by setting:

relative_urls:false,

and adding the following line:

remove_script_host:true,
Everything is smooth and fine (for now)!

Share this post


Link to post
Share on other sites

Hi Vekia

 

Thank you for your post. I succeffully extended the tinyMCE module.

I was specifically focused on the "allow_script_urls" option that is failing on PS... Even activated, the javascript is still not allowed in URL.

I have tried in another textarea field (not tinyMCE) in back end and I see that the issue is not coming from tinyMCE because even a simple textarea is not accepting javascript urls...

Do you have any idea why I cannot use URLs such as :

<a href="javascript:function();">link</a>

??

It automatically changes it to :

<a>link</a>

(undepending if the field is tinyMCE or not)

Many thanks

Share this post


Link to post
Share on other sites

Hello Vekia.

Many thanks for your module.

I have a question that I don't know if you might help on this. I hope you do though..

I have this tinyMCE configured (long time ago) and my website is in 3 languages, Greek, English and German. Greek language appears at tinyMCE and at front office as it should be. However when you go to source code Greek are not displayed correct but as HTML Entities (for those that do not know the term, a word like ΩΡΑ would be written like &Omega;&Rho;&Alpha;

So Short_Description and Description of all products source code is in HTML entities. And this source code is not only at tinyMCE but at the source code of the page itself. Is there a way to avoid storing text as HTML entities? I have tried adding the following code at the beggining of both tiny_mce.js and at tinymce.inc.js 

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  entity_encoding : "raw"
});

Not successfully though.

Moreover I can't find out what kind of encoding is this! I have tried many decodings (UTF-8,7,16,  WINDOWS etc) and constantly there's a small problem. If I, at least, knew what kind of decoding I should use, then I can retrieve the mySQL product_lang table, decode it and re-load it! But..No...

Anyway.. if somebody can give an idea of how to deal with this matter I will appreciate it.

Thanks

 

Screenshot at 2018-09-18 11-52-02.png

Screenshot at 2018-09-18 11-51-09.png

Edited by mono1 (see edit history)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More