[1.4.11] TinyMce - How to add Tags like <section>, <article>, etc.

[ArnoNymeier]

Hello, I'm looking for information to insert tags like <section>, <article>, etc. using the editor. How can I activate a "wrapper" after an element (<div>, section>, etc.)? Subsequent text is always inserted in the previous container and not as a new container (<div>, <article>, etc.) Is there a suitable setting in the configuration of TinyMce?

Thanks a lot

[nick0]

Howdy, The way I do this is through: Configuration > Interface & Features tab > scroll down to TinyMCE4 Settings > Block Formats I usually use: Header 2=h2;Header 3=h3;Header 4=h4;Paragraph=p;Div=div So in your case I guess you would add something like this depending on your needs: Paragraph=p;Div=div;Section=section;Article=article A more technical user could confirm this but give it a try.

[ArnoNymeier]

Hi nick0, I've already tested it. div works. That is obviously registered somewhere. The other tags are unfortunately not inserted. I tried to create another custom parameter within the tinymce configuration tab -> extended_valid_elements:"section[id|class|style|title]" , but it is not registered. Wrong code? Hmmm...

[Deesen]

Just guessing, maybe the scheme is set to html4?

https://www.tiny.cloud/docs-4x/configure/content-filtering/#schema

[ArnoNymeier]

Ok, I found the solution. TinyMCE4 ->configuration -> custom tab Then paste the following code:

selector: 'textarea#format-hmtl5',
style_formats: [
      { title: 'Containers', items: [
      { title: 'section', block: 'section', wrapper: true, merge_siblings: false },
      { title: 'article', block: 'article', wrapper: true, merge_siblings: false }
       ] },
     { title: 'Inline', format: 'span' }
  ],
   end_container_on_empty_block: true,
selector: 'textarea#format-custom',
formats: {
    span: { inline: 'span', classes: 'none' }
    }

"Container" with the extra tags is now displayed under the "Formats" button. These can be added in the editor without any problems. In addition, I added the <span> tag via the custom formats. The inline and block formats in the configurations tab were no longer displayed. Further formats seem to have to be defined here now.

I am happy to have found a solution to my problem :-) thanks for your comments

Helpful source: [https://www.tiny.cloud/docs/demo/format-custom/]

[fourroses666]

I like to use PageBuilder for that kind of things, but every site is different and if this works than thats great.

[nick0]

Hi Arno, Well done - great solution! Thanks for sharing. Good tip on PageBuilder Marc - have never seen or tried that but was wondering if something like that existed. Will have a play some time, Thanks. Have a great day all.

[ArnoNymeier]

Maybe it is useful for one or the other. Here are other configurations that I use:

Classes for inserted images (add image button) and disable the automatic added image sizes(width="XXXpx"; height="XXXpx";). Very helpful for a responsive design.

image_class_list: [
    {title: 'None', value: ' '},
    {title: 'Image right', value: 'image right'},
    {title: 'Image left', value: 'image left'},
    {title: 'Image 100%', value: 'image fit'},
    ],

image_dimensions: false

and

forced_root_block:0

to prevent chunk {{...}} or snippet [[...]] in the textarea beeing wrapped with the <p> tag.

Remember, all entries in the config field must be separated by commas ;-)

@ Marc I'll also take a look at pagebuilder. thanks for the hint.

stay healthy! :-)

[nick0]

Thanks for sharing this Arno. That looks very handy... love the image_dimensions false = awesome idea! I will have a play with it next week. Cheers and all the best

[nick0]

Thanks for sharing your technique here Arno.

I don't need the html5 stuff for now, but thanks to you am now using this in the TinyMCE4 > Configuration > Custom Parameters textfield...

image_class_list: [
    {title: 'none', value: ' '},
    {title: 'wrap image right', value: 'wrapright'},
    {title: 'wrap image left', value: 'wrapleft'},
    {title: 'centre image', value: 'centre'},
],
image_dimensions: false,
forced_root_block:0

I really like being able to add the class for an image directly from a drop down list in theimage editing section. And excluding image dimensions. That's great!

Many thanks and all the best.