Post Editor Custom Buttons: "Option" toggle not displaying correctly

[Dreadknux]

I am trying to create a new button for the post editor, to display affiliate links with an "ipsButton" format. This is the setup I have:

I want to use the Option field to inset a URL into the ipsButton when the HTML is output, but this does not seem to happen at all for me. In fact, when I click the button nothing displays at all. This is output html (using Google Chrome inspect) after I have clicked the button in the post editor and included a URL in the option field:

<p>
  <br>
</p>

If I click the button and type nothing into the Option field, it does display the rest of the HTML correctly...

<p>
  <a data-cke-saved-href="" href="" rel="nofollow" target="_blank" class="ipsButton ipsButton_important ipsButton_medium" style="text-decoration: none;">
    &ZeroWidthSpace;&ZeroWidthSpace;&ZeroWidthSpace;&ZeroWidthSpace;&ZeroWidthSpace;&ZeroWidthSpace;&ZeroWidthSpace;
  </a><br>
</p>

And the text insertion point is in the right position (where the ZeroWidthSpace text in the HTML code is placed), but when I start typing the text I want to include in the button, the text automatically positions the text outside of the button:

<p>
  <a data-cke-saved-href="" href="" rel="nofollow" target="_blank" class="ipsButton ipsButton_important ipsButton_medium" style="text-decoration: none;"></a>
  hello<br>
</p>

I'm not entirely sure what's going wrong here. I'm assuming the "text outside the button" thing is happening because there is no URL in the A HREF tag, but I can't insert a URL into that space because the {option} tag does not seem to be working as intended. Any ideas?

[Nathan Explosion]

21 minutes ago, Dreadknux said:

And the text insertion point is in the right position (where the ZeroWidthSpace text in the HTML code is placed), but when I start typing the text I want to include in the button,

Take a look at the blurb about {content} - it's the text that is highlighted when clicking the button:

Quote

Use {content} to indicate where the content highlighted when the button is pressed should be inserted.

Any content you type after the html is added will be outside the html you have added.

Want content in it? Type the content, highlight it and then click the button.

[opentype]

Not relevant to the issue, but to be fixed later: don’t use hard-coded styles. Create a custom CSS class for the theme and call that. Also, white-list all classes. It doesn’t matter for the admin account, but will matter for user accounts. 

[Dreadknux]

20 hours ago, opentype said:

Not relevant to the issue, but to be fixed later: don’t use hard-coded styles. Create a custom CSS class for the theme and call that. Also, white-list all classes. It doesn’t matter for the admin account, but will matter for user accounts. 

Thanks - I only included a hard-coded style for the purposes of the test, but you're absolutely right. As for CSS white-listing, this isn't something I'm familiar with and Google searching this appears to take me down a number of roads relating to C#/Java programming, which is quite advanced. I feel like this might be something IPS should include as a built-in feature in the AdminCP for V5.

@Nathan Explosion - Understood regarding the 'content' function, I guess that's redundant for what I need then. Any ideas on the 'option' side of things?

Edited November 16, 2023 by Dreadknux

[opentype]

11 minutes ago, Dreadknux said:

As for CSS white-listing

It’s an option in the ACP: Customization → Editor → Settings → Advanced → Allowed CSS classes