Jump to content

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


zota
 Share

Recommended Posts

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

 

  • Like 1
Link to comment
Share on other sites

  • zota changed the title to How to insert a <div> in tinyMCE? [SOLVED]

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • zota changed the title to How to insert a <div> in tinyMCE? [SOLVED no!] [now really SOLVED]
  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...