CODEWITHSUNDEEP
silverstripe
subs
subs

Reputation: 179

Silverstripe 3: Add a custom block to HTMLEditorField

I want to add the option to create a 'div' in the html editor field.

How do I add an option to the format dropdown list that will create a div with a specific class?

I have added a style successfully to the styles dropdown with this code in editor.css

.responsive-table {
    overflow-x: scroll;
}

I am using silverstripe 3 and want to be able to add my own options to the format dropdown to create various elements.

Upvotes: 1

Views: 372

Answers (1)

3dgoo
3dgoo

Reputation: 15794

In SilverStripe 3 we can edit style dropdown items in our HTMLEditorField by adding the following to our mysite/_config.php:

HtmlEditorConfig::get('cms')->setOption('style_formats', [
    [
        'title' => 'Responsive table',
        'attributes' => ['class' => 'responsive-table'],
        'selector' => 'div',
    ],
]);

The above code will make the HTMLEditorField style dropdown have one item in it, a Responsive table option that can be applied to div elements. If we prefer this to be applied to table elements we can change this in the selector option.

Here is a handy module that shows examples of how we can make changes to the HTMLEditorField in SilverStripe 3: https://github.com/jonom/silverstripe-tinytidy/blob/master/_config.php

Upvotes: 1

Related Questions