Is there a way to modify how the html fields are outputted by Redactor? I'm creating an email template and I'm trying to add inline styles to Redactor's list items, links, etc.

up vote 2 down vote accepted

To add inline styles to HTML tags generated by Redactor such as <li>, install the Retcon plugin and add the following to your template. For example:

{{ entry.body | retconAttr('li', { style: 'color: red;' }) }}

For more info, consult the retconAttr filter documentation.

  • Does it matter where in the template I insert the code? I tried inserting it in multiple places and nothing changed. Do I need to add anything to the Redactor file or it should just work with the above code without adding anything else? – Morgan Dec 8 '17 at 17:26
  • Put the code where you would normally put the {{ entry.body }} field without the retconAttr filter. You don't need any special Redactor configuration. When you inspect the source code in browser, you don't see something like <li style="color: red;">My list item text.</li>? – Andrea DeMers Dec 9 '17 at 0:35
  • Never mind, I got it to work. I don't have an entry called body so I had to use the name of one of the blocks I created. How do I add inline styles to multiple tags? I tried doing the following but it didn't work: {{ block.ebParagraph | retconAttr( 'li', { style: 'color: #63666a;'}, 'a', { style : 'color: red;' } )}} – Morgan Dec 11 '17 at 15:48
  • Try: {{ block.ebParagraph | retconAttr( 'li', { style: 'color: #63666a;'}) | retconAttr( 'a', { style: 'color: #red;' }) }} – Andrea DeMers Dec 11 '17 at 16:08
  • Got it. Thank you for all your help, Andrea! – Morgan Dec 11 '17 at 18:34

Craft uses the redactor js plugin. You can change it's settings, plugins and all formats like you want in the config craft/config/redactor or add custom presets. Here is the link how to configure the redactor https://imperavi.com/redactor/docs/settings/formatting/

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.