Silverstripe:如何在 tinymce 中允许 javascript?

Silverstripe: How to allow javascript in tinymce?

我的一个网站的管理员和编辑想要在页面上包含一些 javascript 嵌入内容,例如 twitter、facebook、instagram 或其他任何内容。我认为在 tinyMCE 的 html 编辑器中设置 extended_valid_elements 以允许脚本标记真的很容易,但它显然不起作用。

我已将其添加到我的配置中

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

而且我检查过它已传递到我的 dom 中的 ssTinyMCEconfig 变量。

到目前为止一切顺利。但是当我尝试 post 一个简单的脚本到我的 HTML 编辑器时,它会删除它。有谁知道如何解决这个问题?

谢谢!

与其通过 TinyMCE 编辑器管理自定义脚本,我们还可以向 $db 添加一个文本变量,以通过普通 TextareaField.

管理自定义脚本

以下代码适用于 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;
    }
}

这里是 CMS 的一些自定义 css,使脚本输入字段显示等宽字体的文本。

mysite/css/cms.css

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

我们在 config.yml 文件中使用以下代码在 cms 中启用自定义 css:

mysite/_config/config.yml

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

在我们的 Page.ss 模板中,在 head 标签中,或者在 body 标签的底部,或者我们是否想要自定义脚本,我们放置以下内容来加载我们的自定义脚本:

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

如果我们想要站点范围的自定义脚本,我们还可以通过扩展 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'));
    }
}

我们在 config.yml 文件中启用此 SiteConfig 扩展:

mysite/_config/config.yml

SiteConfig:
  extensions:
     - CustomSiteConfig

在我们的 Page.ss 模板中的 head 标签中,或者在 body 标签的底部,我们放置以下内容来加载我们的站点范围的自定义脚本:

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

我只需在我的 header 中包含相关的脚本链接就可以解决 Twitter 嵌入的问题。这嵌入了我粘贴到 TimyMCE 中的 twitter-tweet blockquote 代码。