Jump to content

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


Dreadknux

Recommended Posts

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:

Could contain: File, Page, Text, Webpage, Computer Hardware, Electronics, Hardware, Monitor, Screen

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Dreadknux
Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...