You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#116989 JCE not saving style entries

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by VonRad on Monday, 16 December 2024 13:44 GMT

VonRad

Hi,

I'm trying to remove the header and footer from selected Joomla articles so they can be used in modal windows.  Joomla Global Configuration is properly set to no filtering for the superuser account.  JCE configuration has been set or confirmed based on the results of searches of users with the same problem. Using or not using a code block in the JCE editor has no impact.  I've removed the style tags from the code below and paused my VPN because I keep getting blocked while trying to submit the ticket.  

header, footer { display: none; }

Please advise, thanks.

RA

Ryan

Assuming you are attempting to display an article in a modal window using the article link, eg: index.php?option=com_content&view=article&id=1 then you won't be able to remove the "header" and "footer" in this way. The link will render the full template page, and the only way to get rid of this full page display is to append &tmpl=component to the end of the link, eg:

index.php?option=com_content&view=article&id=1&tmpl=component

This will display the article using a special layout in your template which does not include modules.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Thanks for the reply.

Your suggestion worked but it also removed all page formatting in addition to the header and footer.  Is there a way to isolate just the header and footer, for removal?  Also, why won't the style entry save?

Thanks and please advise.

VR

Ryan

Your suggestion worked but it also removed all page formatting in addition to the header and footer.

Your template probably only styles this layout with a basic set of styles, necessary for displaying the article content only.

Is there a way to isolate just the header and footer, for removal?

It's more than just a "header" and "footer", it's the entire structure of the site, including menus, modules, etc. Using &tmpl=component is the only way to isolate the article content only.

Also, why won't the style entry save?

Those styles need to be encased in a <style> tag. Assuiming you did this, the tag was most likely removed by the Joomla Text Filter on saving the article.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan

What are you using to create the Modal?

Mediabox can display the article content only in a modal, and style it using the sites default styles. It also detects whether the article link is local processes it accordingly - https://www.joomlacontenteditor.net/products/jce-mediabox

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Thanks for the reply.

I'm not sure Joomla is striping off the style tags.  I thought this action was unique to the TinyMCE editor, and don't understand how JCE could function if this were the case.  First, I'm in a superuser account and Joomla text filtering is confirmed to be off.  Second, I'm using Yootheme Pro.  I use style tags extensively in Yootheme elements for functionality that doesn't use the JCE editor, such as adding colour to a title, and they work fine in those instances.   

In this case, I'm in the JCE editor, in a Yootheme text element.  I open JCE editor and put the style entry into 'line 1' of the markup.  When I move to the editor tab it shows the style block.  When 'ok' is pressed on either code or editor tabs, it appears to save but the style tag is gone when I reopen the text element, *immediately* after.

One quirky symptom is that if I enter the style entry into JCE , then *immediately* save the Yootheme element (a content addition is required to trigger the save function) it works.  The header and footer sections are hidden, per the instructions from Yootheme support. Obviously this isn't a solution, but it's worthy of note.   

Please advise.  Thanks.

VR  

VonRad

I was trying to use Regular Labs Modals but I've removed the modal tags they use.  At this point I'm trying to simplify the process and get an article to display without a header and footer.  

VR

Ryan

In this case, I'm in the JCE editor, in a Yootheme text element. I open JCE editor and put the style entry into 'line 1' of the markup. When I move to the editor tab it shows the style block. When 'ok' is pressed on either code or editor tabs, it appears to save but the style tag is gone when I reopen the text element, *immediately* after.

This suggest the <style> tag is being removed by Yootheme, which uses a version of the Tinymce editor, which does not allow the <style> tag by default, so it is being removed when you click OK. This is confirmed in my tests.

You will need to speak to Yootheme support about this.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Hi,

The following is the response from Yootheme.  I've tried it and it works - it removes the header and footer, when JCE is disabled.  It appears that either JCE has a bug, or my JCE environment isn't set up correctly.   

Please advise.  Thanks.

VR 

Yootheme (VR quote from original ticket): I'm using JCE and currently it's not saving the <style> entry.

Yootheme: If the WYISWYG editor removes the style element, and you cannot configure it accordingly to prevent that, please just disable the WYSIWYG editor temporarily.

Yootheme: Select Joomla Admin > System > Setup > Global Configuration > Site > Default Editor: Editor - None, and save the changes.

Yootheme: Then edit the article, and try again what is described in https://yootheme.com/support/question/168020#answer-543642.

VR: Are there known issues with Yootheme and JCE together?

Yootheme: No, there are not. 😊

Ryan

or my JCE environment isn't set up correctly

This could be the case. In Editor Profiles -> Editor Parameters -> Advanced, please check that Allow CSS it set to Yes.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Hi,

I have confirmed Global Configuration -> Text Filters -> Super Users  set to 'No Filtering' and the 'Allow CSS' and other JCE settings are as displayed in the attached image. 

Please advise.  Thanks. 

 VR

Attachments

Ryan

Please send me a login - https://www.joomlacontenteditor.net/contact/site-login

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Hi,

I wish I could but I'm developing locally with XAMPP.

Please advise.  Thanks.

VR 

Ryan

Please post a screenshot of the exact code that you are attemptiny to add to the editor.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Attached as requested.

Thanks.

VR

Attachments

Ryan

If before saving, you flip between the Code and Editor tabs, is the style code removed?

Have you opened the JCE Editor from the toolbar in the Yootheme wysiwyg editor?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

No. The style code remains between Code and Editor tabs, before save. 

For the screen grabs I added the style entry into the code tab and the style block was added by JCE for the editor tab display. 

The style entry was removed on save.

Thanks.

VR   

Ryan

The style entry was removed on save.

By Save you mean pressing the OK button? This transfers the contents of the JCE Editor into the Yootheme WYSIWYG editor, which is where the <style> tags are being removed.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan

Here is my test:

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan

JCE is not removing the code. When you click OK, the code is passed, intact, to the Yootheme WYSIWYG editor (Tinymce) which is then processed by Tinymce, and the style tags are removed.

I would suggest adding this code to the Code tab in the Yootheme wysiwyg editor, which seems to be independant of the Tinymce editor.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Hi

I'm caught in the middle here and don't know what to do next.

The support from Yootheme, posted here Wednesday, 11 December 2024 16:06 GMT, says its a JCE problem and JCE says its a Yootheme problem.   As I mentioned earlier, I'm using style tags in Yootheme elements outside of JCE without issues.  That doesn't mean it's a JCE problem, but it's a troubleshooting consideration.  With the large distribution of Yootheme and JCE, and my vanilla environment, I find it difficult to believe that this is an outlier.  I'm not interested in assigning blame, I just need it to work.  

Please advise on how I should proceed.

 Thanks,

VR

Ryan

I think that Yootheme don't completely understand the process you are using that is producing the issue.

If you add the code to the Yootheme editor Code tab, then it is retained on saving.

If you add the code in JCE Pro, this code will be inserted back into the Yootheme WYSIWYG Editor, which is Tinymce, which does not support the <style> tag by default, and removes it.

There is nothing I can do about this. You can test JCE Pro support for the <style> tag in a normal Joomla article, and confirm that it is not removed when you save.

The issue here is the interaction between JCE Pro and the Yootheme WYSIWYG Editor - Tinymce. As I said before, JCE Pro passes the code intact to Yootheme, which inserts it into Tinymce which removes the <style> tag.

See my previous post for a solution, ie: using the Code tab in the Yootheme editor.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan

Testing this some more in Yootheme Pro, it looks like to acheive the combination of content for the modal along with the <style> tag, you would need to create this content only in the Yootheme WYSIWYG editor, adding the <style> tag in the Code tab.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

I apologize, but now I'm confused.  If the Yootheme WYSIWYG editor is TinyMCE and that's the root cause of this problem, how can it be used as a solution?   

Thanks.

VR

Ryan

If the Yootheme WYSIWYG editor is TinyMCE and that's the root cause of this problem, how can it be used as a solution?

I was wrong it can't. The only solution here seems to be as Yootheme support suggests, and switch to No Editor.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan

Is there an option in this area of Yootheme to add custom css?

When creating a Text item, there is an Advanced tab which allows you to set Custom CSS for the layout. Perhaps this could solve you issue?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Hi.  Sorry about the delayed response.  I had other deliverables. 

As <style> is an html tag I believe it's being stripped out because it belongs in the <head> section, which is inaccessible as far as my YTP knowledge goes. Good suggestion, though.  I gave it a try but unfortunately it didn't work.

Thanks,

VR       

Ryan

Instead of including the <style> tag in the CSS field as in the screenshot above, just add the css without the <style> tag eg:

header, footer { display: none; }

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

VonRad

Hi.  Thanks for the help.  I tried several different things and workarounds but apparently missed backing out of something and had to restore from backup.  So I took a day off and watched a ballgame.  I'll give it a shot.  Much appreciated.

VR