[SOLVED]TinyMCE removes HTML tags

[moy2010]

Hi, prestashop community. I've been trying to edit the HTML code using prestashop's integrated TinyMCE Editor, but it keeps removing my html tags oce I click on the ok button.

 

I've already tried to solve this by modyfing validate.php isCleanHtml() function, but it keeps doing it again and again :/.

 

Any other trick (besides editing the entry directly in the database) that you could share with me to get this done?

 

Thanks in advance.

Edited March 6, 2015 by moy2010 (see edit history)

[NemoPS]

WHere are you trying to add the code? It might just be stripping it when saving to the db

[moy2010]

In the TinyMCE Editor I hit the HTML icon, and edit it from there. Once I click "ok" it goes away. So there's no need to save it to see the html tags gone .

[NemoPS]

Yes, but where exactly? What happens if you click the html editor once more? Just gone? An example of what you're trying to add?

[moy2010]

Yep, just gone :/.

 

My code looks like this:

<h4><a>Title Here</a></h4>

 

I'm trying to insert a <span> tag within that, like this:

<h4><a><span>Title Here</span></a></h4>

 

But everytime I do this, it removes the <span> tag no matter what I do or where do I place it :S. This happens only to the <span> tag.

Edited March 4, 2015 by moy2010 (see edit history)

[moy2010]

Anyone? :S. 

I guess it'll be better to edit it directly on the db...

[NemoPS]

WHat if you try this

 

<span class="emptyClass">

[moy2010]

lol, it works xD. 

Why specifying a class does the trick, Nemo1?

 

Thanks for the hint .

[NemoPS]

Well because .....and....... and.......

 

 

I don't know I just found it on StackOverflow and use it :D

[catalin.scaesteanu]

WHat if you try this

 

<span class="emptyClass">

 

Hello,

 

This doesn't work for me.

I have a similar issue. Just that instead of span I use an empty <em class="someClass"></em>. On one product this worked but on another when I hit ok on source code editor the <em> is removed. There doesn't seem to be a reason why on one products this worked and another it doesn't.

Does this trick work on all products for you guys?

[NemoPS]

Maybe it's contained in a different tag?

[catalin.scaesteanu]

Maybe it's contained in a different tag?

 

Hey, thanks for replying. Btw I have watched some of your youtube videos and read a couple of your tutorials and they are awesome. Keep up the good work.

 

Yes, it was contained in a <div> tag. However I noticed that it's doing this on Firefox. After messing around with Tinymce plugin to try to find and remove the JS code handling the "ok" button I tried it in Google Chrome and it didn't remove any markup.

I have no idea why it behaves this way on Firefox and on Chrome works.

 

I'm thinking of removing tinymce as I'm mostly writing html in the decription of my products.

 

So in conclusion if anyone else has this issues and what Nemo suggested doesn't work, the simplest thing to try is in another browser.

[JanHavlicek]

Same problem here with the <em> tag. Changing browsers doesn't help, it doesn't work even in Chrome or Opera. Do you have any solution please?

 

Thank you

[catalin.scaesteanu]

Same problem here with the <em> tag. Changing browsers doesn't help, it doesn't work even in Chrome or Opera. Do you have any solution please?

 

Thank you

 

Try adding a space in between the "<em> </em>" tag.

 

My code which works:

<div class="some-class"><em class="icon"> </em></div>

[Krzycho]

Prestashop 1.6.1, but I guess the solution applies to all versions.
You have to make changes in tinymce config file: prestashop/js/admin/tinymce.inc.js
 
In default_config of tinymce two options should be added and set to false:

is:

...
        entity_encoding: "raw",
        extended_valid_elements : "em[class|name|id]",
        valid_children : "+body[style], +style[type]",
        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'}
        }
...

should be:

...
        entity_encoding: "raw",
        extended_valid_elements : "em[class|name|id]",
        valid_children : "+body[style], +style[type]",
        apply_source_formatting : false,                //added option
        verify_html : false,                            //added option
        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'}
        }
...

You're welcome.

 

[catalin.scaesteanu]

Prestashop 1.6.1, but I guess the solution applies to all versions.

You have to make changes in tinymce config file: prestashop/js/admin/tinymce.inc.js

 

In default_config of tinymce two options should be added and set to false:

 

is:

...
        entity_encoding: "raw",
        extended_valid_elements : "em[class|name|id]",
        valid_children : "+body[style], +style[type]",
        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'}
        }
...

should be:

...
        entity_encoding: "raw",
        extended_valid_elements : "em[class|name|id]",
        valid_children : "+body[style], +style[type]",
        apply_source_formatting : false,                //added option
        verify_html : false,                            //added option
        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'}
        }
...

You're welcome.

 

Thank you for sharing

[myselfidem]

Hello,

 

About <em> tag, I use this tip :

 

Check Inside your custom Theme if there is this line - if not you can add it (from line 119 on my global.css file):

 

Path : .\themes\Your_Custom_Theme\css\global.css

em {
  font-style: italic; } 

Friendly

[TurkeyFish]

I'm running PS 1.6 but there is no such file, /js/admin/tinymce.inc.js

 

The closest I can find is /js/tiny_mce/tinymce.min.js 

 

But that file doesn't contain the right code to modify. Not to mention it's almost impossible to read because it's minified with all the line breaks removed.

[renegades]

My apology for hijacking this post but it doesn't make sense to me to wrap (part of) a paragraph or a header text in a <span>bla bla</span> if their isn't a class or style for it. What for the whole span thing?

That said, there are some interesting replies for the original issue, which raises the question why those actions may need to be taken.

Wouldn't is make more sense for the developers to look into their code because it all appears to me being a poor coding issue. 

Just a thought.