TINYMCE list output modifying?

932 Posts

Hello,

I have a site which contains some basic recipes and my client has been inserting them using tinymce via a template variable which generates a nice <ul> and <li> for the items. However I'm wanting to add additional attributes to each <li> so that it outputs as <li itemprop="recipeIngredient">ingredient</li>

Does anyone know of a way I can do this?

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.

5,888 Posts

Bruno17 Reply #2, 10 years, 1 month ago

I wouldn't use tinyMCE for the incredients at all, but would use a MIGX-TV to add the incredients.
Then you can output them well formated with getImageList in the recipe-template.

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

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

1,145 Posts

donshakespeare Reply #3, 10 years, 1 month ago

There are a billion ways to achieve what you want. I am not even sure where to begin because there are ...
Questions for you...

Can you paste your template, so that we know what's going on?
Is the UL list generated on fly by a return script?
Do you have access to the UL markup?
What have you tried so far and what issues did you get?
Are you using TinyMCE 4+

Here is a working example that will preserve the itempProp for all subsequent items; on save and, on load.
Learn more from the neatly organised and precise docs: https://www.tinymce.com/docs/plugins/template/:

templates: [
  {
    title: 'My auto UL Template 1',
    content: "<ul><li {$recipeAttribute}>Item 1</li></ul>"
  }
  ],
template_replace_values : {
  recipeAttribute: "itemprop='recipeIngredient'" //careful apostrophe !!
},
extended_valid_elements:"li[itemprop|class|etc|etc]",  //add itemprop to list of your allowed attributes or else TinyMCE will strip it as non standard

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

932 Posts

LK Reply #4, 10 years, 1 month ago

Thanks for the replies.

Usually I would use MIGX to do this kind of job but retrofitting all of the recipe pages would be a monumental task which I'm hoping to avoid. I'm using the tinymcewrapper you created, Don.

The recipe ingredients is currently just a template variable set to rich text where the user can click the list icon and begin listing the ingredients. I have access to the markup by viewing the source but as you say it just strips out the itemprop when you view it on the front end.

Thanks for linking the above I'll check that out and report back

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.

932 Posts

LK Reply #5, 10 years, 1 month ago

Just to update I ended up just applying a replace modifier on the TV call. Not ideal but retrofitting templates, or migx would have taken longer than what it was worth. Thank you for your help guys!

[[*recipeIngredients:replace=`<li==<li itemprop="recipeIngredient"`]]

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.