TinyMCE templates don't work

Question

I've configured TinyMCE editor as described in the documentation.

$scope.tinymceOptions = {
    plugins: 'template',
    templates: '/rest/templates'
}

@RequestMapping(value = "/rest/templates", method = RequestMethod.GET, produces = {MediaType.APPLICATION_JSON_VALUE})
@ResponseBody
public Set<TemplateVO> getTemplates() {
    Set<TemplateVO> result = // ...
    return result;
}

As you can see, in templates option I've specified an URL that produces a list of templates. When a user executes 'Insert template' command, the controller method getTemplates() is invoked, and all templates are returned in a JSON array.

[{"title":"test","description":"test","content":"test"},{"title":"test 2","description":"test","content":"test 2"}]

And I expect them to be displayed. But I receive a message with text 'No templates defined'.

When I specify the same items as an object, template insertion is working fine:

$scope.tinymceOptions = {
    plugins: 'template',
    templates: [
        {title: 'test', description: 'test', content: 'test'},
        {title: 'test 2', description: 'test', content: 'test 2'}
    ]
}

What is the correct way of loading TinyMCE templates from remote URL?

UPD. I've caugth an exception inside JSON.parse() (in Google Chrome)

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'". at eval (native) at Object.parse ...

Which version do you you use? Check community.tinymce.com/forum/viewtopic.php?id=32825 — Bas van Stein

naXa naXa · Accepted Answer · 2015-12-14T15:36:29

Your Content Security Policy does not allow JS evaluation, because it is unsafe. You can add 'unsafe-eval' to your CSP and templates loading will work:

<!-- Chrome 25+; FireFox 23+; Safari 7+ -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval'"/>
<!-- FireFox 4+; IE 10+ (not fully) -->
<meta http-equiv="X-Content-Security-Policy" content="xhr-src 'self' 'unsafe-eval'"/>
<!-- Chrome 14+; Safari 6+ -->
<meta http-equiv="X-WebKit-CSP" content="script-src 'self' 'unsafe-eval'"/>

TinyMCE templates don't work

1 Answers