New post – Implementing and using TinyMCE 6 in ProcessWire

[ryan]

The TinyMCE 6 rich text editor opens up a lot of new and useful abilities for ProcessWire users. In this post, we'll take a look at a few of them, and how you can start using them now, with a focus on those that are unique to ProcessWire's implementation of TinyMCE— 

https://processwire.com/blog/posts/using-tinymce-6-in-processwire/

[szabesz]

Thank you for all the hard work you put into migrating PW to TinyMCE 6, which is so much better than CKEditor.

One thing I'm still longing for is a "proper" source code editor which is a paid addon, unfortunately. Would it be possible for you to implement a TinyMCE code editor for ProcessWire, based on CodeMirror or similar? 

[Krlos]

I was testing TinyMCE 6 with tailwindcss and everything works perfect, I tried the tailwindcss prose plugin by simply adding a wrapping div <div class="prose"> and boom... all the text was styled perfectly.

Better yet, the classes are not removed, as many times I had to battle with ckeditor not to remove the classes from the source code.

Thank you for all the hard work @ryan

[bernhard]

Great stuff Ryan! Maybe you want to link to this blog post on the module's readme? https://processwire.com/modules/inputfield-tiny-mce/

OK I'm through the post and there's lots of great informations in it! Thx a lot! I'm wondering if there is an easy way of making a field have a minimal setup?

The default.json with its merge features looks great for regular text fields. But what I often need is to have text fields that only allow the user to add two things: add line breaks and make some words bold. That's useful for my page builder where I have blocks for a very specific purpose (like inserting a multiline headline). Is there an easy way to setup such a field without having to manually remove all defaults? 

Another thing: really great stuff with the css styling feature!! What I wondered here is how we could add multilingual labels for our editor styles? 

Maybe something like this? (sorry on mobile) 

/* en = Red paragraph */

/* de = Roter Absatz /*

[pwired]

Quote

One thing I'm still longing for is a "proper" source code editor . . . . .

Maybe this could be of any help

https://github.com/melquibrito/source-code-editor-tinymce-plugin
https://gitlab.com/tinymce-plugins/tinymce-codemirror

 

[szabesz]

10 minutes ago, pwired said:

Maybe this could be of any help

As a starting point, I guess, as they look outdated to me but I have not tried... Anyway, I think an officially supported "advanced" code editor plugin would be beneficial to all of us.

[Fuzen]

Just being able to specify styles right within settings is a monster feature alone. My goodness that is sweet. Thanks for your hard work on this. And the post is excellent. I love your clear and thorough writing.

[bernhard]

I'm testing TinyMCE and it looks absolutely brilliant!

I'll report my findings as they occur ?

Quote

PHP Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in .../modules/InputfieldTinyMCE/InputfieldTinyMCEConfigs.php:637

@ryan it seems you are still not on PHP8? Could you please have a look at DDEV for local development? Using DDEV you can simply switch PHP and DB versions and do "ddev restart". It's such a great tool, it has saved me so much time and headache since I installed it on my laptop one year ago! I've not had a single situation that ddev wasn't able to handle.

Want to setup a new project? "ddev config" is all you need to do!

You want to test something that sends emails? DDEV has mailhog on board and you can simply launch it via "ddev launch -m"

You want to have local dev using HTTPS? ddev creates certificates for you!

You want to create JPGs from PDFs on page save? You can add poppler-utils to your web-container config and have the same environment as on the remote server.

You can even share your projects with clients using ngrok. You can share your project on the local network to test it on mobile devices.

Want to import a db dump? You can import it simply by doing "ddev import-db -f site/assets/backups/database/db.sql".

 

[bernhard]

Hey @ryan I've managed to find a way to get a minimal tinymce field using this very simple json:

{
  "menubar": false,
  "toolbar": "bold",
  "toolbar_sticky": true
}

Result:

This is very nice and what I want!

The problem: I need to set the JSON globally for ALL tinymce fields:

Would it be possible to add an option to set the defaults.json file on a field level?

This would be extremely helpful (necessary) for module development where one wants to ship fields with a custom set of options.

It's also a lot easier to create fields where the settings are defined in code (GIT!) rather than via gui.

Another benefit would be that the core (or a module) could ship different versions of defaults (eg minimal.json, simple.json, default.json) that a field could use and extend on them rather than on global defaults.

Thx!

[BrendonKoz]

Pastefilter:

For someone currently testing, could you see what the difference in the Pastefilter is for a[href|id], a[target=_blank] and a[href|id|target=_blank], if any? It seems Ryan split any assignments to their own entry, even though they merge, so I was just curious if there was a reason for that, other than potentially simplified logic/understanding.

Not that I currently have a reason to do this, but what if there was a need to whitelist a certain range of classes (attributes; perhaps data-* attributes)? Similar to allowing the pasting of fontawesome content? I'm thinking there's no REGEX or glob matching for attributes and associated values (ex: i[class=fa*] which should cover i.far.fa-horse, i.fas.fa-horse, etc.).

Tip on Performance of Plugins:

Although it makes complete sense, I might not've thought to check that. I very much appreciate the tip about that, and the "advlist" plugin, specifically! Thanks! The amount of work on documenting its behavior is extremely welcomed - thank you so much, Ryan!

EDIT: Pastefilter -- I tested...

It appears as though there's a specific distinction when applying value matching as opposed to simple attribute allowance. If providing a match to an attribute's value, it must (currently, at least) have its own unique entry in the list. It cannot be merged with the simpler attribute entry that allows any value. In my testing when I merged the entries together (ex: a[href|id|target=_blank]) only the matching attribute entry was allowed and retained during paste (target=_blank).

[ryan]

@BrendonKoz An attribute definition can either define allowed attributes or allowed values, but not both in the same definition. So you are right that a[href|id] and a[target=_blank] can't be merged into one definition, at the moment; they should be two definitions. You can do a[href|id] but if you preferred it you can also just write them separately: a[href],a[id].

Regarding things like data attributes or wildcards on classes: keep in mind this is just for filtering externally pasted content, and this is not a content filter for the editor itself. So hopefully data attribute and wildcards aren't needed as copied/pasted content. The reason for pastefilter is largely to reduce the pasted content to its roots, the base semantic HTML tags preferably without any attributes (excepting things like an href attribute on an <a> tag). If your need is to allow things like pasting in Font Awesome icon tags and such, then I would suggest just not using the Pastefilter. Either that, or use the code/source editor dialog and paste your tailored markup in there.

I see the Pastefilter as being useful for our clients that primarily copy text out of Word (or other editor) and pasting it in. These folks often don't know the difference between paste and paste-as-plain-text, so they can get themselves in trouble, or they can create editor markup that is full of proprietary garbage. Pastefilter helps to prevent that issue. The default configuration of TinyMCE's content filter is a little more open than that of CKEditor's, which I think many people like, but when it comes to externally pasted content, it can be more problematic. So that's where Pastefilter helps out, but it's also completely optional and I'm guessing there will be as many instances where people don't need it as those that do. 

[ryan]

@bernhard Yes, so far it sounds like that would work. I might be forgetting something, but I will definitely look into adding that, thanks! 

[ryan]

@szabesz I'm not sure I've got the ability to develop a code editor for TinyMCE. And I'm also not sure about how many people really need that, as isn't the the main benefit of a rich text editor to be able to not have to code the HTML? (though no doubt it's useful to resolve occasionally issues in the markup). But I do think it would be nice to have something more like Ace than something like Notepad, and the current editor source code popup is more like Notepad. Maybe a way to achieve that would be a toggle that would let you temporarily swap the Input type from TinyMCE to an Ace editor Inputfield or something, it does seem technically possible, though there's probably more to it than that, but interesting to consider. 

[szabesz]

56 minutes ago, ryan said:

Maybe a way to achieve that would be a toggle that would let you temporarily swap the Input type from TinyMCE to an Ace editor Inputfield or something, it does seem technically possible, though there's probably more to it than that, but interesting to consider. 

That's an interesting idea indeed. I'm not sure how that could be implemented in practice but the possibility to switch compatible Inpufileds on the fly sounds powerful enough on its own. Maybe this request is related in some regard: https://github.com/processwire/processwire-requests/issues/470

1 hour ago, ryan said:

(though no doubt it's useful to resolve occasionally issues in the markup)

This often happens, especially when fixing client's work done in the RTE. Maybe TinyMCE 6 is a lot better than CKEditor was, so fixing things will be less frequent in the future but when the HTML source is long and complex then a plain text HTML input is hard to work with. Also, I often like "experimenting" with the HTML source and that is another use case, I think.

[BrendonKoz]

Hey Ryan,

Thanks for replying and confirming my assertions above, and also thanks for identifying your intentions of its purpose. That was what I figured it was for (primarily cleaning pasted content from other rich text editors). I could see some end-users copying and pasting from other websites, or even other owned properties of theirs and, if sharing a CSS theme, expecting a similar output. To be frank, I don't even think I would want that to work, but I wanted to test just to be sure how versatile the Pastefilter was, and what its limitations were. As for pattern matching attributes or values, I can't currently imagine a necessity for that particular use-case, and until there is one out there by someone, I don't think there's any need to even consider building it into core.

Regardless, I'm pretty stoked for this additional functionality for cleaning pasted content!

[webbear]

Hello Ryan

thanks for all your work!
I tried tinyMCE in a nested Repeater setting (RepeaterMatrix and default repeater such as tiles / accordion) - as soon I have one text field set to tinyMCE the nested Repeater looses the tools an titles... switching back to CKEditor and the titles show up again, as well as drag/drop and all other repeater tools. Unfortunately I cannot see any error message in the browser console...

 

[Fuzen]

@ryan or anyone else, I have a project I’m using the most current development version on (3.0.209). In a quick run-through of the CMS in her presence, when she copied from Microsoft Word into the new TinyMCE field, both browsers (Microsoft Edge and Google Chrome) would not allow the pasting of what was in the clipboard. The error read approximately: “Your browser’s security doesn’t allow pasting from the clipboard.” It does it on both browsers.

Is there a setting I need to adjust for TinyMCE? Pretty much all my settings for that module are default. It seems like it’s an operating-system level issue because both browsers are affected but I could be wrong. Pretty weird.

[UPDATE] It’s an OS issue. Here’s the relevant article which I still need to try:
https://windowsreport.com/browser-doesnt-allow-clipboard-access/

Edited January 1, 2023 by fuzenco
New finding

[bernhard]

I'd check if she is able to copy/paste here: https://www.tiny.cloud/docs/demo/full-featured/

[Fuzen]

1 minute ago, bernhard said:

I'd check if she is able to copy/paste here: https://www.tiny.cloud/docs/demo/full-featured/

@bernhard Thank you my man. I will try that tomorrow. Peace and best wishes on your new year. Note that I updated my previous message.

[Fuzen]

@bernhard I’m circling back on this issue. Visit the URL you provided throws the same error. It happens when my client uses the Edit > Paste feature from within TinyMCE. If you use the paste shortcut (control + v), there is no issue and paste functions normally. It’s only when using the built-in paste. And the article I mentioned previously doesn't really help. It requires an extension to be installed in the browser but even then the error happened.

[bernhard]

Well then it's an issue with TinyMCE that has nothing to do with ProcessWire. I'd try to see if there is already an issue for it (https://github.com/tinymce/tinymce/issues) and if not I'd report it there and ask for help.

[Fuzen]

On 1/17/2023 at 4:45 PM, bernhard said:

Well then it's an issue with TinyMCE that has nothing to do with ProcessWire. I'd try to see if there is already an issue for it (https://github.com/tinymce/tinymce/issues) and if not I'd report it there and ask for help.

Will do. Thank you.

[simonGG]

SOLVED!

Ah i got it. In the JSON you have to set a real URL instead of {url}. So that the pwlink plugin loads.)

Hey there, i have a question about the custom settings using JSON file. For example, when I enter the path to the defaults - the possibility to set links disappears in the editor.
So the link icon just disappears. I would like to work with the custom settings but need the possibility to set links. Any idea what the problem is? I dont get it right now

cheers Simon

[csaggo.com]

@ryani like tinymce alot. What i'm coming across that some stuff is not inline-css but classes like "align_center" now that works in the editor but my uikit-frontend does not know about this.
I didn't figure out how to set it up that the align center entry uses uk-text-center instead or additionally? or do i have to remove the original align menu in the settings and set it up as my own "uikit-align"

or is there a frontend css file i can simply add to frontend?

[Tiberium]

@csaggo.com

I personally add the three classes in my frontend css on every processwire project. The rules are also for the old editor.

.align_left {
	text-align: left;
}
.align_center {
	text-align: center;
}
.align_right {
	text-align: right;
}

When i know, there will be a conflict with other align rules, i set also !important.

For uikit, you can add this rule in the site.scss, like here explained: https://getuikit.com/docs/sass#how-to-build  the "// 1. Your custom variables and variable overwrites." section in the example code.

Edited March 22, 2023 by Denis Schultz
clearify uikit