CODEWITHSUNDEEP
silverstripeshortcode
ifusion
ifusion

Reputation: 2233

How to add a custom button in Silverstripe editor?

I want to be able to let the user add a styled button in the content editor in silverstripe. They need to be able to edit the text inside the button and also need to be able to link it to another page or website. I believe you can do this using shortcodes or possibly having a button on the tiny_mce editor would be better?

HTML:

<a href="http://www.need-to-be-editable.com">
    <div class="ribbon">
        <strong class="ribbon-content"><h1>Need to be editable</h1></strong>
    </div>
</a>

JSFIDDLE - HTML & CSS for button

Upvotes: 3

Views: 321

Answers (1)

Jono
Jono

Reputation: 166

For a start that HTML isn't semantic - you've got inline elements around block elements, and unless this button is going to kick off a new section you shouldn't be using an H1 tag.

Ideally you can simplify your link markup to something like this:

<a href="http://www.need-to-be-editable.com" class="ribbon">
    Editable text
</a>

Then you can easily apply the 'ribbon' class to the link in the editor, and the link can reside in a P, H1, H2 or whatever is appropriate for the context. Check out this module for some tips on taming the editor if you choose this approach.

If you need the markup to be more complex and include multiple elements then a shortcode is probably a better option. Shortcodable is a handy module for improving the editing experience for shortcodes in the CMS.

Upvotes: 4

Related Questions