naXa naXa - 8 months ago 42
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})
public Set<TemplateVO> getTemplates() {
Set<TemplateVO> result = // ...
return result;

As you can see, in
option I've specified an URL that produces a list of templates. When a user executes 'Insert template' command, the controller method
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
(in Google Chrome)

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


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