Cannot add formatting to wrap text in an <aside> tag

[BenRacicot]

Trying to create two top-level buttons which wrap highlighted text in an <aside>.

Please see StackOverflow question: stackoverflow.com/q/67953361/1440240

What is the expected behavior?

As shown in the StackOverflow question, after trying:

block_formats: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Preformatted=pre;Aside=aside;' I have enabled the custom menu in a desperate attempt to add these buttons.

I've also read through all the documentation and cannot get anything to work as expected.

Please help me get this working and perhaps create an Angular specific example for others.

[exalate-issue-sync[bot]]

Ref: INT-2578

[jscasca]

Hi @BenRacicot I believe you can achieve that by adding a custom format. For example:

block_formats: 'Paragraph=p;Aside=aside',
formats: {
  aside: {block: 'aside'}
},

I made an Angular example with a button to apply the aside format: https://codesandbox.io/s/tinymceangular-forked-5zv1p?file=/src/app/app.component.ts but not sure what exactly are you expecting. Maybe the guys in the TinyMCE repo can help you better understand formats?

[BenRacicot]

Wow @jscasca that was incredibly helpful! Thank you so much for your time and help on this. I was so very close but this clarified everything.

[jscasca]

Glad we could help!