naXa naXa - 1 month ago 8
JSON Question

TinyMCE templates don't work

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
...

Answer

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'"/>