ryancramerdesign / InputfieldTinyMCE

TinyMCE v6 for ProcessWire 3.0.200+
2 stars 2 forks source link

Custom style formats CSS - <a> should use selector not inline #19

Closed chriswthomson closed 1 year ago

chriswthomson commented 1 year ago

I've a few rules set up in Custom style formats CSS for styling links using UIkit button classes e.g.

#Button a.uk-button.uk-button-default { background: transparent; border-color: #013a81; color: #013a81; text-decoration: none; } /* Default Button */

I'm finding that this isn't working. I'd expect to select a link and then choose the button style from the dropdown - this does nothing. If the cursor is in the link somewhere and I select the style from the dropdown, it starts a new element after my existing link (and the anchor option is highlighted in the menu). If I put some text in the created <a> with the button classes and then select the text and add a link, it doesn't retain the button classes on save. Something definitely isn't working here!

I've had a look and I see that the definition in ProcessWire.config.InputfieldTinyMCE is {title: "Default Button", inline: "a", classes: "uk-button uk-button-default"}.

I think that the <a> element should use 'selector' instead of 'inline'?

Perhaps this is a case where a custom JSON definition would be a better option for me?

Cheers,

Chris

ryancramerdesign commented 1 year ago

@chriswthomson Thanks, you are right the <a> element should be using selector rather than inline. I have pushed a fix. Also, for this case you'll need to add "uk-button" and "uk-button-default" as class options to the ProcessPageEditLink module settings. That way it will recognize and keep those classes when you edit links.

chriswthomson commented 1 year ago

Ah excellent thanks @ryancramerdesign, that's working for me now.