How to insert a <div> in tinyMCE? [SOLVED no!] [now really SOLVED]

[zota]

Hi, even in my sloppy and irresponsible tinyMCE field (without htmlpurifier, without  pastefilter, with <div> to <p> conversion disabled) I can't introduce a <div> in real time. If I modify Ryan's examples and try

 #Blocks p.ms-4 { } /* Outline paragraph */

works well. But neither

 #Blocks div.card { } /* Card */ 
nor 
#Blocks div { } /* Card */ 

work. This,

 { "extended_valid_elements": "article div" } 
and this
{ "extended_valid_elements": "div" } 

does nothing. How to insert a <div> is in the most basic examples of the tinyMCE docs, I thought it was easy... and it should be but not for me... Does anyone have a clue? Thanks

SOLUTION (EDIT: the BAD one, see post above from virtualgadjio)
Solution starts here:https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
with the lines

{ title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' }, /* <-- here */
    { title: 'Pre', format: 'pre' }
  ]},

so, I just drop the { title: 'Div', format: 'div' }, in the defaults.json and works. Now let's clean the mess and drop tha line on the wp right place ?

Spoiler

 

[virtualgadjo]

Hi,

i think that using this method you'll probably run into the same problem i did, you insert a div but can't wrap several p inside it and, if ever you hit enter, it will just cerate another div
same thing if you select two or three p and try the div option, it will simply transform each p into a div

fortunately Ryan's article helped me find the right solution, here
https://processwire.com/blog/posts/using-tinymce-6-in-processwire/#example-of-configuring-the-template-plugin

a few tries later i ended with this kind of thing
 

{
  "add_toolbar": "template",
  "add_plugins": "template",
  "templates": [
    {
      "title": "Wrapping div",
      "description": "add a div with content",
      "content": "<div class='foo_wrapper'><h3>zi fabulous title</h3><p>a paragraphe.</p><p>an other one just for fun</p></div>"
    }
  ]
}

now you have a div with rich content you can modify, add other p or whatever you need, just click where you need it in the field and hit the template button, job done
you may have noticed that the class is wrapped with single quotes for json reasons ? but when you insert it in your field tintmce changes them into double quotes by itself

in case it helps

have a nice day

[zota]

Quote

think that using this method you'll probably run into the same problem i did

Yes, the same nightmare!
 

Quote

in case it helps

Yes, a lot, I was about to give up on DIVs!

 

[virtualgadjo]

Hi,

glad to hear this, ? it took me some time to find out the righ way to do this,, this method allows you to insert many kind of templates, you can just choose the one you need on click on the template button

have a nice day

[virtualgadjo]

@zota

Hi, our little conversation hit a zone in my old brain and i ended creating a little plugin that may be useful for your need
https://github.com/virtualgadjo/pw-tinymce-div-plugin

just in case ?

have a nice day

[Mats]

Was looking for this solution in TinyMCE. Thanks @virtualgadjo!

[virtualgadjo]

Hi @Mats

i had been fighting for a while with this too and ended wrting my own solution to keep some hair on my head ?

and my pleasure of course

have a nice day