How can I add attributes to the codesample pre block that is created by tinymce

0
votes

I have a TLDR switch on my blog. This switch is a javascript that hides any element with the class="tldr" attribute attached to it, or unhides it.

I've created custom block_formats in TinyMCE for Paragraphs that will let me create a Paragraph with the TLDR class attached.

However, when I insert a codesample using that plugin it will generate a pre block that I can not format afterward. I've already tried to create a custom PRE block with the TLDR class but TinyMCE won't let me apply this format to the code sample block that has been created.

Does anyone have another solution for my problem or can you see if I'm doing anything wrong? Is there another way in TinyMCE to add attributes to elements that have been added to the code already? I've tried the code viewer but that doesn't allow me to modify the generated HTML code.

1
attributestinymce

1 Answers

0
votes

You can use formats and style_formats to customize the styling options available to users and how they operate.

To add a custom pre block with class="tldr", you can add this config to TinyMCE:

style_formats: [
    // Adds a pre format to style_formats that applies a 'tldr' class
    { title: 'TLDR', block: 'pre', classes: 'tldr' }
]

See this TinyMCE fiddle: http://fiddle.tinymce.com/Ikhaab

On its own, this will override the default style formats, but you can add them back in and position the new TLDR option within the Blocks submenu as shown here: http://fiddle.tinymce.com/Jkhaab

Resources: