Jump to content

[TUTORIAL] tinyMCE rich text editor - extended version


vekia
 Share

Recommended Posts

In my upgraded site I have a problem: the tinyMCE editor isn't even there! If I try to update a product description, I get a text area with html code visible in it. It seems that the tinyMCE environment isn't loaded. (I have no controls/buttons to change text etc...). Any clues?

 

 

-- edit: [sOLVED]

Seems like I already found the answer (on the French part of the forum)

http://www.prestashop.com/forums/topic/318482-r%C3%A9solu-probl%C3%A8me-editeur-texte-nenregistre-pas-v1605/

 

In short: remove the .htaccess file from img/cms directory. I'll leave the answer here for future use.

Edited by Administratоr (see edit history)

Share this post


Link to post
Share on other sites

In my upgraded site I have a problem: the tinyMCE editor isn't even there! If I try to update a product description, I get a text area with html code visible in it. It seems that the tinyMCE environment isn't loaded. (I have no controls/buttons to change text etc...). Any clues?

 

 

-- edit: [sOLVED]

Seems like I already found the answer (on the French part of the forum)

http://www.prestashop.com/forums/topic/318482-r%C3%A9solu-probl%C3%A8me-editeur-texte-nenregistre-pas-v1605/

 

In short: remove the .htaccess file from img/cms directory. I'll leave the answer here for future use.

 

you had this problem after modifications that i suggested to use in this tutorial?

Share this post


Link to post
Share on other sites

  • 2 weeks later...

ps team removed a lot of default plugins from this rich text editor, but it's a great way to extend it

Awesome works great...

 

I followed your other tutorial on how to edit Validate.php to ignore code modifications:

    public static function isCleanHtml($html, $allow_iframe = false)

{

    return true;

}

so it always return true.. OK

 

So I did that, but it still seems the source code editior still cleans the code! I tried clear cache and everything but not sure why its still cleaning.. Help.

 

i paste this:

<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>
 
.. And this always happens:
<script>// <![CDATA[

$(document).ready(function() {

$("a.fancybox").fancybox();

});

// ]]></script>

 

Where is that secret cache i need to delete?

Share this post


Link to post
Share on other sites

hello

tinymce always adds this code CDATA unfortunately, but it shouldn't affect simple js scripts like script you attached

Oh, so I have done it right then.. Im still having lots of trouble still with fancy box implementation on presta 1.6.

I followed you "Prestashop gallery on CMS page" and did the CMScontroller edit but stuck at the Classes = fancybox because new presta dosnt have that field anymore on insert/edit link.. :(

 

Doesnt presta already have fancybox built in somewhere? why do we need to add it..

 

Thanks for your help and tutorials. dont know how you do it.

Share this post


Link to post
Share on other sites

Prestashop legend,

I went through all your tutorials again and found the magic script that allows me to have a fancybox thickbox video:

--------------------

<script type="text/javascript">/* <![CDATA[ */$("a.iframe").fancybox({'hideOnContentClick':true,'width':500,'type':'iframe','onComplete':function()
{$('#fancybox-frame').load(function(){$('#fancybox-content').height($(this).contents().find('body').height()+10);});[spam-filter]);/* ]]> */</script>

--------------------

 

Some guy added this link and now things work on Presta 1.6 :)

 

P.S. This script always crashes flash player after closing video. :( Still works though..

Edited by dsc54000 (see edit history)

Share this post


Link to post
Share on other sites

Vekia Hello, I notice that the link to view the tutorial is fallen, could you tell us where we can get it again, we thank you on behalf of the forum

the only one page where it is available is this one: http://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html

you still arent able to view it? strange!:/

my Editor dont show up on my product description

 

HELPPPP  !!!

 

what prestashop version you use?

and you've got this problem from tthe begining or it just started to appear when you used this guide ?

Share this post


Link to post
Share on other sites

the only one page where it is available is this one: http://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html

you still arent able to view it? strange!:/

 

 

what prestashop version you use?

and you've got this problem from tthe begining or it just started to appear when you used this guide ?

 

 

 

Hello I use lasted version 1.6

 

Problem is from begain I mean before try to upgrade the editor to full version

Hello I use lasted version 1.6

 

Problem is from begain I mean before try to upgrade the editor to full version

Share this post


Link to post
Share on other sites

Hello I use lasted version 1.6

 

Problem is from begain I mean before try to upgrade the editor to full version

Hello I use lasted version 1.6

 

Problem is from begain I mean before try to upgrade the editor to full version

thank you for information

 

please turn on console (in chrome ctrl+shift+j) then go to the product edit page

you see there some "red" errors?

Share this post


Link to post
Share on other sites

After upgrade to 1.6.0.6 I can not edit images in CMS editor, for example, the alignment of images with text to the left.

 

Advantage button to adjust the alignment is missing :(

 

I use your extended version - great but... How fix this problem, please ?

Share this post


Link to post
Share on other sites

  • 3 weeks later...

I would really like to use these tips, but my Prestashop 1.6.0.6 doesn´t have any /js/tinymce.inc.js.

 

It has only tinymce.min.js.

 

Is there any possibility to make this work?

 

Thank you!

 

Share this post


Link to post
Share on other sites

Thanks for tutorial. Also editor not showing on my laptop from begining prestashop 1.6 upgrade. But on pc it is showing. Also problem in Chrome, in Firefox - all working. 

 

The console error of chrome:

 

Uncaught ReferenceError: pathCSS is not defined tinymce.inc.js:17
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Share this post


Link to post
Share on other sites

I would really like to use these tips, but my Prestashop 1.6.0.6 doesn´t have any /js/tinymce.inc.js.

 

It has only tinymce.min.js.

 

Is there any possibility to make this work?

 

Thank you!

Hi, this is at the public_html/js/tinymce.inc.js.

Share this post


Link to post
Share on other sites

Hi, this is at the public_html/js/tinymce.inc.js.

 

i think that

 

 

 /js/tinymce.inc.js.

just means public_html

 

btw. not each server use structure of directories with 'public_html' directory.

Share this post


Link to post
Share on other sites

Hallo...

 

Don't know if this can help... after getting mad because the extended text editor din't appear despite all my efforts, I tried to do one very simple thing: change browser...

 

Result:

on Firefox 29.0.1 the extended editor does NOT appear

On Safari 7.0.3 and Chrome 34.0.1847.137 works perfectly :-)

Share this post


Link to post
Share on other sites

hi,

 

Here is the files.

 

 

 

function tinySetup(config)

{

    if(!config)

        config = {};

 

    //var editor_selector = 'rte';

    //if (typeof config['editor_selector'] !== 'undefined')

        //var editor_selector = config['editor_selector'];

    if (typeof config['editor_selector'] != 'undefined')

        config['selector'] = '.'+config['editor_selector'];

 

//    safari,pagebreak,style,table,advimage,advlink,inlinepopups,media,contextmenu,paste,fullscreen,xhtmlxtras,preview

    default_config = {

        selector: ".rte" ,

        plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons",

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

        toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,", 

        toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ",

        toolbar4 : "visualblocks,|,charmap,|,hr,",

            

        external_filemanager_path: ad+"/filemanager/",

        filemanager_title: "File manager" ,

        external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},

        extended_valid_elements: 'pre[*],script[*],style[*]', 

        valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",

        valid_elements : '*[*]', 

        force_p_newlines : false, 

        cleanup: false, 

        forced_root_block : false, 

        force_br_newlines : true,   

        menu: {

            edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},

            insert: {title: 'Insert', items: 'media image link | pagebreak'},

            view: {title: 'View', items: 'visualaid'},

            format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},

            table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},

            tools: {title: 'Tools', items: 'code'}

        }

 

    }

 

    $.each(default_config, function(index, el)

    {

        if (config[index] === undefined )

            config[index] = el;

    });

 

    tinyMCE.init(config);

 

};

Share this post


Link to post
Share on other sites

validate.php

 

 

 
/**
* Check for HTML field validity (no XSS please !)
*
* @param string $html HTML field to validate
* @return boolean Validity is ok or not
*/
public static function isCleanHtml($html, $allow_iframe = false)
{
    return true;
}
 
/**
* Check for product reference validity
*
* @param string $reference Product reference to validate
* @return boolean Validity is ok or not
*/
public static function isReference($reference)
{
return preg_match('/^[^<>;={}]*$/u', $reference);
}

Share this post


Link to post
Share on other sites

it's definitely not default behaviour of this guide.

can oyu grant me temporary access to bo and filesystem?

 

i will check everything and apply fix if it will be necessary

 

 

btw. you can create temporary employee account with limited permissions to:

catalog > products section

Share this post


Link to post
Share on other sites

  • 2 weeks later...

Hallo...

I have problem after installing extended tinyMCE.
I have a website in 2 languages (SK, CZ).
When I insert an image, the image is loaded correctly - I can see it in the editor, but on the website the image does not appear - questionmark.
I've seen that the image URL is rewritten in:

http://mydomain.com/cs/img/cms/dikt.jpg

but it should be:

http://mydomain.com/img/cms/dikt.jpg

Even if I try to change the image URL in tinyMCE - source code , it rewrites it...
Any help?

Thank you in advance,
Andrej

Share this post


Link to post
Share on other sites

Hallo...

 

I have problem after installing extended tinyMCE.

I have a website in 2 languages (SK, CZ).

When I insert an image, the image is loaded correctly - I can see it in the editor, but on the website the image does not appear - questionmark.

I've seen that the image URL is rewritten in:

 

http://mydomain.com/cs/img/cms/dikt.jpg

 

but it should be:

 

http://mydomain.com/img/cms/dikt.jpg

 

Even if I try to change the image URL in tinyMCE - source code , it rewrites it...

Any help?

 

Thank you in advance,

Andrej

 

This made me crazy too...

 

add these two lines:

 

 

relative_urls : false,

convert_urls: false,

  • Like 1

Share this post


Link to post
Share on other sites

  • 3 weeks later...

Hi, I just update my Prestashop to v.16.0.7, I found that the tinyMCE editor was back to the default. Do we have to customize the text editor everytime we update the Prestashop version? 

 

Thanks.

Share this post


Link to post
Share on other sites

Hi, I just update my Prestashop to v.16.0.7, I found that the tinyMCE editor was back to the default. Do we have to customize the text editor everytime we update the Prestashop version? 

 

Thanks.

 

from what ps version you migrated?

Share this post


Link to post
Share on other sites

hi...i made an upgrade from presta 1.6.0.6 to presta 1.6.0.8 and tinymce drives me crazy
i put in source code ..a html code like this
<p><b>Varf Note</b><br/>
    <span id="note76" title="76" class="rtgNote"><img
            rel="0"
            src="http://fimgs.net/images/sastojci/m.76.jpg" class="btHover"
            alt="grapefruit" title="grapefruit" width="40" height="40"/></span>

 and the result in tinymce is like this

 <p><strong>Varf Note</strong><br /><span class=""rtgNote"" title=""76""><img class=""btHover"" title=""grapefruit"" src="%5C" alt=""grapefruit""

 

am i doing something wrong?

Share this post


Link to post
Share on other sites

no, it's purifier

thy to disable it under preferences tab in your back office.

 It was magic quote . Purifier enabled.

I asked my host provider, to disable magic quote under php.ini, and after that, it works perfectly

Thanks for your answer. 

One more question..the tiny mce theme/skin can be changed? ...because i tried everything in inc file (path, etc) but prestashop remain default theme. If you have time to point me in right direction, because i saw some skins much more fitted for "BO"

 

Best regards

Edited by hhhans1 (see edit history)

Share this post


Link to post
Share on other sites

okay thank you for clarification

yes, in this case it's necessary to modify files once again

it's a problematic thing because at the moment prestashop doesn't allow to override native js files (from /js/ directory)

Share this post


Link to post
Share on other sites

Hello vekia,

I am under Prestashop 1.6.0.8 and I put has in the daytime the publisher(editor) and he is great.
On the other hand I have a small concern(marigold) when I makes a link and when I want to open him(it) in a new window it does not walk(work), it always opens in the same window.

Have you a solution thank you.

Share this post


Link to post
Share on other sites

Vekia, if I can abuse one can, how to make with it piece of news(short story) publisher(editor) to create as money version 1.5.6 a pop-up to post(show) an image without margins.

 

Thank you for your help(assistant)

Share this post


Link to post
Share on other sites

  • 3 weeks later...

Vekia thank you for the tutorial! I installed it in two minutes!
However, this is not the most complete version.

For example, in the configuration of the images, I have this:

485750basictiny.jpg

 

On the full version, visible on the official website of the plugin, I have this:

698695fulltiny.jpg


Is that you can modify the code to have the full options?

 

 

 

I have compared with TinyMCE v3. Surprisingly, the old version has a lot more options compared to version 4!

950124tinyv3.jpg

Edited by steph2i (see edit history)

Share this post


Link to post
Share on other sites

hello

prestashop version 1.6

has got limited version of tinymce editor

we can't extend it in the same way as it is possible in prestashop 1.5

 

sadly, witohut touching tinymce engine it will not be possible to extend it in that way :(

  • Like 1

Share this post


Link to post
Share on other sites

Hello..

I have similar problem with image not showing up on productpage. just a question mark picture.

i have PS 1.6.08

I have tried to add the
 

relative_urls : false,

convert_urls: false,

But where should i add this in the tinymce.inc.js.?
and wich line?

Also i have another problem with the new editor.

Where can i set the style for images?
In the old editor i could select if the image should float to the right or left alignement, now there is no such option?

thank you.
 

post-408953-0-76236200-1406104799_thumb.png

Edited by rfourt (see edit history)

Share this post


Link to post
Share on other sites

Hey Vekia

Thanks for allways having nice tutes regarding extended editors...   they allways works

Hope you can point me in the right direction on my recurring issue !

Do you have any suggestions regarding one TinyMCE extended version for "superadmin"

- and a limited Editor for everyone else ???

Only hope for a great idea how i might solve this  B)

Share this post


Link to post
Share on other sites

Hey Vekia

Thanks for allways having nice tutes regarding extended editors...   they allways works

Hope you can point me in the right direction on my recurring issue !

Do you have any suggestions regarding one TinyMCE extended version for "superadmin"

- and a limited Editor for everyone else ???

Only hope for a great idea how i might solve this  B)

 

sadly at the mont i haven't got any tutorial related to this - but it is possible of course.

 

what to change? it will be necessary to change one thing, controller where the tinymce library is included.

 

so, you will have two tinymce js files. one: extended, second: original one

 

 

if admin will log in - first file will be included

if employee will log in - second (original) file will be included

 

voila ;)

Share this post


Link to post
Share on other sites

same issue with IE and Firefox :(

 

1 warning, and one error in Chrome Console 

 

'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach).
Discontiguous selection is not supported.
 
 
 

In Firefox console:

 

TypeError: mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create 

 

d3.v3.min.js:3

Edited by Chrisi1321 (see edit history)

Share this post


Link to post
Share on other sites

Hi Vekia

Thanks !

But I realized what i want for now might be impossible - not a good idea to have 2 different validation states

Superadmin´s codes will be altered when Admin save changes with another code validation

Guess it´s only a good idea to have 2 different TinyMCE layouts...

 

Unless... it is still a cool solution for custom made "do not touch" CMS pages  B)

Share this post


Link to post
Share on other sites

A temporary solution:

 

if(is_array($_POST)){
  foreach($_POST as $key=>$value){
    if(strpos($key, 'content_')===0){
      $_POST[$key] = Tools::stripslashes($value);
    }
  }
}

I put this code at the beginning of the method postProcess in the file /controllers/admin/AdminCmsController.php

 

It solved the quotes (%5C) problem for now.

Edited by unloco (see edit history)

Share this post


Link to post
Share on other sites

Hi, I just update my Prestashop to v.16.0.7, I found that the tinyMCE editor was back to the default. Do we have to customize the text editor everytime we update the Prestashop version? 

 

Thanks.

 

Hi, just updated to v1.6.0.9 from v1.6.0.8, and proven that we have to redo the modification again for each Prestashop version update.

Share this post


Link to post
Share on other sites

  • 1 month later...

Thanks Vekia, its work with PS 1.6.0.9

 

first time i just uncomment until return true;

but it's not work

public static function isCleanHtml($html, $allow_iframe = false)
{
/*
    $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange';
    $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend';
    $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove';
    $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel';
    $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart';
    $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange';
    $events .= '|onselectstart|onstart|onstop';


    if (preg_match('/<[\s]*script/ims', $html) || preg_match('/('.$events.')[\s]*=/ims', $html) || preg_match('/.*script\:/ims', $html))
        return false;


    if (!$allow_iframe && preg_match('/<[\s]*(i?frame|form|input|embed|object)/ims', $html))
        return false;

*/
    return true;
}

 

After i try remove all except return true; 

 

public static function isCleanHtml($html, $allow_iframe = false)
{
    return true;
}

 

Then i delete /public_html/cache/class_index.php and clear browser cache, it's work like a charm.  B)

Edited by IronBackbone (see edit history)

Share this post


Link to post
Share on other sites

hi

 

as there is no way to upload image directly from my computer i check justboil.me, a free plugin, but i am not sure what is the path to the folder image in Prestashop:

 

"Edit config.php file found in plugins/jbimages you should only specify a target directory for your uploads."

 

what is the path to this target directory?

 

Thanks

 

Pat

 

version 1.6.9

 

UPDATE **********ok, I won't need justboil.me, I finally found out how to upload images inside my text, video explanation here:

 

Edited by ventesites (see edit history)

Share this post


Link to post
Share on other sites