Silverstripe: How to allow javascript in tinymce?

Question

Admins and editors on one of my sites wants to include some javascript embeds like twitter, facebook, instagram or whatever, on pages. I thought it would be really easy to just set the extended_valid_elements to allow the script tag in the html editor of tinyMCE, but it apparently doesn't work.

I've added this to my config

HtmlEditorConfig::get('cms')->setOption(
    'extended_valid_elements',
    'script[charset|defer|language|src|type|async]'
);

And I've checked that it's passed to the ssTinyMCEconfig variable in my dom.

So far so good. But when I try to post a simple script in to my HTML-editor, it strips it. Does anyone know how this can be fixed?

Thank you!

Answer 1

Rather than manage custom scripts through the TinyMCE editor we could add a text variable to $db to manage the custom scripts through a plain TextareaField.

The following code works for SilverStripe 3.4:

class Page extends SiteTree {

    private static $db = array(
        'CustomScript' => 'Text'
    );

    public function getCMSFields() {

        $fields = parent::getCMSFields();

        $fields->addFieldToTab('Root.CustomScript', 
            TextareaField::create('CustomScript', 'Custom Script')
                ->setRows(30)
                ->addExtraClass('code')
                ->setAttribute('spellcheck', 'false'));

        return $fields;
    }
}

Here is some custom css for the CMS to make the script input fields display the text with a monospace font.

mysite/css/cms.css

.field.code textarea {
    max-width: 100%;
    font-family: "Courier New", Courier, monospace;
    color: #000000;
    background: #ffffff;
}

We enable the custom css in the cms with the following code in our config.yml file:

mysite/_config/config.yml

LeftAndMain:
  extra_requirements_css:
    - 'mysite/css/cms.css'

In our Page.ss template in the head tag, or at the bottom of the body tag, or whether we would like the custom script, we put the following to load our custom script:

<% if $CustomScript %>
    $CustomScript.RAW
<% end_if %>

If we want site wide custom scripts we could also add this field to the Settings tab by extending our SiteConfig:

mysite/code/extensions/CustomSiteConfig.php

class CustomSiteConfig extends DataExtension {

    private static $db = array(
        'CustomScript' => 'Text'
    );

    public function updateCMSFields(FieldList $fields) {

        $fields->addFieldToTab('Root.CustomScript',
            TextareaField::create('CustomScript', 'Custom Script')
                ->setRows(30)
                ->addExtraClass('code')
                ->setAttribute('spellcheck', 'false'));
    }
}

We enable this SiteConfig extension in our config.yml file:

mysite/_config/config.yml

SiteConfig:
  extensions:
     - CustomSiteConfig

In our Page.ss template in the head tag, or at the bottom of the body tag, we put the following to load our site wide custom script:

<% if $SiteConfig.CustomScript %>
    $SiteConfig.CustomScript.RAW
<% end_if %>

Answer 2

I was able to get around the issue for Twitter embed by simply including the relevant script links in my header. This embedded the twitter-tweet blockquote code that I pasted into TimyMCE.