New post – Implementing and using TinyMCE 6 in ProcessWire

[bernhard]

As I've had the exact same issue yesterday (and also have been adding those rules to every single project) RockFrontend v2.34.0 adds those rules in the defaults.less file wich you simply have to add to your styles array:

$rockfrontend->styles()
  ->add('/site/modules/RockFrontend/less/defaults.less') // add this line

  // uikit styles
  ->add('/site/templates/uikit-3.16.3/src/less/uikit.theme.less')
  ->add('/site/modules/RockFrontend/uikit/defaults.less')

  ...

  // minify on production
  ->minify(!$config->debug);

 

[csaggo.com]

thank you @Denis Schultz simply adding it to sass uikit which i compile anyway makes a lot of sense

[csaggo.com]

thank you @bernhard god, i still didn't find the time, but i WILL check it out in depth soon!

[virtualgadjo]

Hi,

i've coded a little plugin that wraps some selected content, several p's, h and so on inside div but i run into a funny behaviour of the editor

onAction: function () {
let cnt = editor.selection.getContent({format: 'html'});
editor.selection.setContent('<div class="box">' + cnt + '</div>', { format: 'html' });
}

It works fine but tiny adds an an empty p before and after the div, not really a problem as i always use the remove empty p option but just wondering why 🙂

have a nice day

[BrendonKoz]

Without looking at it directly, I'm pretty sure the default setting/configuration for TinyMCE is to wrap all content in paragraph tags. However it knows enough to not wrap a DIV element in a paragraph, thus it falls back to doing what you notice it does. There should be a way to either disable the automatic paragraph, and/or switch it for a DIV, if that's what you (will always?) want. IIRC both TinyMCE and CKEditor (v4) both do that.

[virtualgadjo]

Hi,

@BrendonKoz thanks a lot for your answer 🙂

you know, using templates as i describe in this thread

it works and insert divs  or tags of all sorts without wrapping them with empty p's before and after hence my wondering 🙂

actually i can do all i want with this template thing but imagine, you write a long post and suddenly realize somme p's would be nice highlited in a box with a background and some nice styles, hop, with this little plugin you can just select them, click and job done
i know, i know, just a lazy option 😄 as you could insert a template and then cut and paste the content you want into it but i like to make my customers' life as easy and obvious as possible, something the createDiv in CKeditor allowed and i tried to reproduce 🙂

not really important but i'm wondering and won't stop searching (probably studying other plugins code, templates for example...) until i find out the right way to do this 🙂 even if, like i said, with the remove empty p option, not really a problem + it's easy to delete those p's even before saving

have a nice day

Edited to say: funny enough, if i use insertContent instead of setContent it only adds one empty p after the div, curiouser and curiouser 😄

Edited again to say: i think i understand why the empty p after the inserted div as in tinymce if it's the last thing you insert  and want to add a p after it, hitting enter, it will insert a new div, a bit more confusing for people not used to notice it and convert it into a p, just don't know why it doesn't happen with the template plugin but well, mine is ready, i'll probably post it on github 🙂

Edited once more but for good this time 🙂
it's on github in case anyone may need it
https://github.com/virtualgadjo/pw-tinymce-div-plugin