Jump to content

[SOLVED] TinyMCE confusion in high order


Boost
 Share

Recommended Posts

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!

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Boost changed the title to [SOLVED] TinyMCE confusion in high order
  • 2 weeks later...
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???

Link to comment
Share on other sites

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 ? 

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.?

Link to comment
Share on other sites

  • 2 weeks later...
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 ?

Link to comment
Share on other sites

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().

Link to comment
Share on other sites

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...