[SOLVED] TinyMCE confusion in high order

[Boost]

Hi,

This question is not about the custom CSS styles that we can add to TinyMCE that end up showing up in the Format drop-down menu. This is about the TinyMCE-generated classes. For example, if you select a text and go to Format -> Align -> Left, the editor will output the text with a "aling_left" class. My confusion is here. Is there a way to modify that? So, instead of output "align_left", it would output "uk-text-left".

Any help will be appreciated!

 

[AndZyk]

Hi @Boost,

I don't have much experience with the new TinyMCE yet, but I couldn't find a way to rename classes of the default styles.

But you can hide the default styles and add your own classes:

#Align { display: none }
#UIkit .uk-text-left { text-align: left } /* Text Left */
#UIkit .uk-text-center { text-align: center } /* Text Center */
#UIkit .uk-text-right { text-align: right } /* Text Right */

Source: https://processwire.com/blog/posts/using-tinymce-6-in-processwire/#specifying-element.class-versus-just-class

Regards, Andreas

[Boost]

Hi @AndZyk,

Thanks, that it is what I'm doing now. However, I would like to see TinyMCE generating the uk-text-left class, instead the align_left one.

[AndZyk]

I guess to rename the default classes you have to use custom JSON settings:

https://processwire.com/blog/posts/using-tinymce-6-in-processwire/#using-custom-json-settings

https://www.tiny.cloud/docs/configure/content-formatting/

But maybe @ryan knows an easier way. ?

[Boost]

Thanks! Custom JSON is the way to go!

[sebibu]

On 10/13/2023 at 5:50 PM, Boost said:

Thanks! Custom JSON is the way to go!

@Boost I have the exact same need to see TinyMCE generating the uk-text-left class, instead the align_left one.

I tried dozents of JSON-instructions in Default setting overrides JSON text, i.e.

{
    "replace_alignleft": {
        "classes": "uk-align-left",
        "selector": "img"
    },
    "replace_aligncenter": {
        "classes": "uk-align-center",
        "selector": "img"
    },
    "replace_alignright": {
        "classes": "uk-align-right",
        "selector": "img"
    }
}

and changed the whitelist (.., img[class=uk-align-left|uk-align-right|uk-align-center], ..) to accept the new classes, but no effect.

Did you get it done and if, can you please share your JSON???

[7Studio]

TinyMCE inherits this class names from the Page Edit Image module, you can change these classes in the: modules -> configure -> ProcessPageEditImageSelect module

 

[Boost]

11 hours ago, sebibu said:

@Boost I have the exact same need to see TinyMCE generating the uk-text-left class, instead the align_left one.

I tried dozents of JSON-instructions in Default setting overrides JSON text, i.e.

{
    "replace_alignleft": {
        "classes": "uk-align-left",
        "selector": "img"
    },
    "replace_aligncenter": {
        "classes": "uk-align-center",
        "selector": "img"
    },
    "replace_alignright": {
        "classes": "uk-align-right",
        "selector": "img"
    }
}

and changed the whitelist (.., img[class=uk-align-left|uk-align-right|uk-align-center], ..) to accept the new classes, but no effect.

Did you get it done and if, can you please share your JSON???

Yeah, I'm still having issues. @JoseFrasher links helped, but I'm not yet able to get it fully working. Every time I fix something, another gets broken? However @7Studio post did the trick for the images ? 

 

[sebibu]

3 hours ago, 7Studio said:

TinyMCE inherits this class names from the Page Edit Image module, you can change these classes in the: modules -> configure -> ProcessPageEditImageSelect module

Thanks so much, @7Studio! This works.
Now it makes sense, that I saw the placeholders {alignleft}, {aligncenter} and {alignright} in the JSON-file „wire/modules/Inputfield/InputfieldTinyMCE/defaults.json“. Thread-topic solved.?

 

Yes, @AndZyks links are really helpful, but i still have to make friends with the syntax.?

1 hour ago, Boost said:

Yeah, I'm still having issues. @JoseFrasher links helped, but I'm not yet able to get it fully working. Every time I fix something, another gets broken?

What are you trying to accomplish? Maybe me or someone more experienced can help.

[Boost]

Thanks @sebibu.

The alignment trick helped a lot. Now, I'm just need to have the formalting (bold, text-align, heading sizes) using the uk-kit.

 

[sebibu]

That's a good point! Default elements <strong> and <em> are styled in my UIkit-frontend, so I didn't thought about that.

In the JSON-file „wire/modules/Inputfield/InputfieldTinyMCE/defaults.json“ I can see that the CSS-classes for text-aligning of elements p,h1,h2,h3,h4,h5,h6,td,th,div,(table,)img,figure,audio,video is also defined via placeholder {alignleft}, {aligncenter}, {alignright} and {alignfull}, but I wasn't able to find the place were the values of these placeholders are defined so far.?

I suspected in module-configuration of InputfieldTinyMCE, but that's not the case.
Via  „Default setting overrides JSON (text/file)“ it is certainly possible to overwrite the placeholders, but I am still struggling with the syntax.?

[Boost]

On 10/25/2023 at 4:28 PM, sebibu said:

That's a good point! Default elements <strong> and <em> are styled in my UIkit-frontend, so I didn't thought about that.

In the JSON-file „wire/modules/Inputfield/InputfieldTinyMCE/defaults.json“ I can see that the CSS-classes for text-aligning of elements p,h1,h2,h3,h4,h5,h6,td,th,div,(table,)img,figure,audio,video is also defined via placeholder {alignleft}, {aligncenter}, {alignright} and {alignfull}, but I wasn't able to find the place were the values of these placeholders are defined so far.?

I suspected in module-configuration of InputfieldTinyMCE, but that's not the case.
Via  „Default setting overrides JSON (text/file)“ it is certainly possible to overwrite the placeholders, but I am still struggling with the syntax.?

I'm not necroposting here, I'm just curious if @sebibu got any further with TinyMCE ?

[BitPoet]

On 10/25/2023 at 4:28 PM, sebibu said:

In the JSON-file „wire/modules/Inputfield/InputfieldTinyMCE/defaults.json“ I can see that the CSS-classes for text-aligning of elements p,h1,h2,h3,h4,h5,h6,td,th,div,(table,)img,figure,audio,video is also defined via placeholder {alignleft}, {aligncenter}, {alignright} and {alignfull}, but I wasn't able to find the place were the values of these placeholders are defined so far.?

These are read from the module configuration of ProcessPageEditImageSelect ("Page Edit Image" in Modules -> Configure) in InputfieldTinyMCESettings:getAlignClasses() and applied in InputfieldTinyMCESettings::getDefaults().

[Boost]

2 hours ago, BitPoet said:

p,h1,h2,h3,h4,h5,h6,td,th,div

But not this part.