TinyMCE 模板不起作用

Question

我已经按照 the documentation 中的描述配置了 TinyMCE 编辑器。

$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;
}

如您所见，在 templates 选项中我指定了一个 URL 来生成模板列表。当用户执行 'Insert template' 命令时，控制器方法 getTemplates() 被调用，所有模板在 JSON 数组中返回。

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

而且我希望它们能够显示出来。但我收到一条消息，文本为 'No templates defined'.

当我将相同的项目指定为对象时，模板插入工作正常：

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

从远程加载 TinyMCE 模板的正确方法是什么 URL？

UPD. 我在 JSON.parse() 中发现了一个异常（在 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 1

您的 Content Security Policy 不允许 JS 求值，因为它不安全。您可以将 'unsafe-eval' 添加到您的 CSP 并且模板加载将起作用：

<!-- 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 模板不起作用

TinyMCE templates don't work

json

tinymce

angular-ui