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.

#108361 JCE strips out code for Articles Anywhere

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 Ryan on Tuesday, 27 July 2021 16:55 BST

ericwebsitebron
I use Articles Anywhere from Reular Labs which is a great extension. To use it, one must put code in articles or modules like:

{articles catid="27" ordering="created ASC" limit="13"}
<div class="article-tile"
  {if tags=ritten} style="background-color: #ffedc6;" 
  {elseif tags=reizen} style="background-color: #e3ffdf;" 
  {else} style="background-color: #e2dede;"{/if}">
  <h4>[link][title][/link]</h4>
  [image-intro][introtext]
  <div class="tags">[tags]</div>
</div>
{/articles}
What that code does is: show as tiles (the css is in the template) the title as H4 link, intro-image and intro-text from max 13 articles having category 27, and colour them by tag. Now what JCE does (in editor on mode) is stripping out most of the code, despite all settings like no html validation, etc. The only thing which more or less works is: Profiles / Editor parameters / Advanced > Protect Shortcode = Yes. Then most of it remains intact when a user (accidentially) opens and saves the module in editor mode. Could we have a mode please that does not try to correct the content at all? Best, Eric

Ryan
Now what JCE does (in editor on mode) is stripping out most of the code, despite all settings like no html validation, etc.
The only thing which more or less works is: Profiles / Editor parameters / Advanced > Protect Shortcode = Yes.
Then most of it remains intact when a user (accidentially) opens and saves the module in editor mode.

Could we have a mode please that does not try to correct the content at all?


JCE is primarily an HTML editor, and in order to operate as an HTML editor, it has to stick to certain HTML rules, and process code entered into it to allow the content to be editable in a WYSIWYG way.

Shortcode, eg: {article} is not HTML code, and in the context of an HTML editor like JCE, is actually just text, and is treated accordingly.

I have tried to the best of my ability to attempt to provide a way to preserve some shortcode within HTML - via the Protect Shortcode option - but when the shortcode is mixed with HTML - especially in complex ways that you are using it - this become almost impossible. This process is ongoing, and I might have a breakthrough one day where I figure out how to do it successfully, but at this stage it is not a priority.

Ryan Demmer

Lead Developer / CEO / CTO

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

Ryan
I may have been able to fix this, at least for distinct shortcode blocks as in your example above.

Please try JCE Pro 2.9.11 Beta 4 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

You will need to enable the Protect Shortcode option.

Ryan Demmer

Lead Developer / CEO / CTO

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

ericwebsitebron
Sometimes it seems to work and the editor inserts a data-mce-code="shortcode" in my first div.
And sometimes the editor shows a more or less unformatted mode of the text with "shortcode" menioned (see scereenshot).
But always after saving that is gone.
And often by switching the editor mode the code is messed up.

Attachments

Ryan
And sometimes the editor shows a more or less unformatted mode of the text with "shortcode" menioned (see scereenshot).


The code will not show as HTML, because it is not valid HTML, and in order to protect it, it must be displayed as plain text.

But always after saving that is gone.
And often by switching the editor mode the code is messed up.


This is working in my tests with the code example you posted above. Please make sure that the Validate HTML option is set to Yes in the Editor Global Configuration.

Ryan Demmer

Lead Developer / CEO / CTO

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

Ryan
Sometimes it seems to work and the editor inserts a data-mce-code="shortcode" in my first div.


The code cannot be inside another tag, like a div. This is not currently supported.

Ryan Demmer

Lead Developer / CEO / CTO

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

Ryan
Please try JCE Pro 2.9.11 Beta 5 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

Ryan Demmer

Lead Developer / CEO / CTO

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

ericwebsitebron
JCE Pro 2.9.11 Beta 5 works a lot better, thanks! It did not insert a data-mce-code="shortcode but seems to recognise the code anyway.

Although it stripped out my encapsulating div (not shown in the code snippet at the top).
I would prefer to keep that div as it is a flex container for the tile elements. Is it possible?

Ryan
Although it stripped out my encapsulating div (not shown in the code snippet at the top).
I would prefer to keep that div as it is a flex container for the tile elements. Is it possible?


Please post an example of the code I can test with.

Ryan Demmer

Lead Developer / CEO / CTO

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

ericwebsitebron
The complete code is:

<div class="blokkenrij" style="clear: both;">

{articles catid="36" ordering="created ASC" limit="10"}
<div class="art-tegel" style="background-color: #e8f6fd;">
<h4>[link][title][/link]</h4>
[image-intro][introtext]
</div>
{/articles}

{articles catid="27" ordering="created ASC" limit="13"}
<div class="art-tegel"
  {if tags=ritten} style="background-color: #ffedc6;" 
  {elseif tags=reizen} style="background-color: #e3ffdf;" 
  {else} style="background-color: #e2dede;" {/if} >
  <h4>[link][title][/link]</h4>
  [image-intro][introtext]
  <div class="tags">[tags]</div>
</div>
{/articles}

</div>
So there are 2 series of article intro tiles in a div that has next css:

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
and the tiles themselves have the following css:

  display: flex;
  flex-direction: column;
  padding: 10px;
  margin: 5px;
  float: left;

Ryan
I"m not seeing any change to the code in my tests using your example in Beta 6 - https://www.joomlacontenteditor.net/downloads/editor/pro/development

Ryan Demmer

Lead Developer / CEO / CTO

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

ericwebsitebron
Yes!
For me it works too, another step forwards

Ryan
Excellent! 😃

Ryan Demmer

Lead Developer / CEO / CTO

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