如何扩展 html Twig 转义器？

Question

我正在逐步将现有的 Symfony 应用程序迁移到 VueJS。

我最近发现的问题是 {{ stuff }} 标记总是由 VueJS 解释，即使内容来自渲染的 twig 变量。

为避免这种情况，我想扩展 html 转义符，以分别用 { 和 } html 代码替换 { 和 }。

我怎样才能正确地做到这一点？转义在 twig_escape_filter 内部，没有我可以覆盖的服务。

我还尝试制作自定义逃生策略猜测器，返回我的 vue 转义，在替换所需字符之前，它本身调用 twig_escape_filter 和 html 转义。我所有的源代码都被转义了。 :-D

感谢您的帮助。

Answer 1

事实上，你可以在你的 javascript 中解决这个问题，就这么简单：

import Vue from 'vue';

Vue.options.delimiters = ['${', '}'];

现在您可以像以前一样对树枝使用双括号 ({{ }})，对 VueJ 使用 ${ }。

编辑：你想做的事是不可能的。您确实可以使用这样的简单过滤器将{{ }} 转换为相应的html实体：

new \Twig_Filter('yourFilter', function ($string) {
    return htmlentities($string, ENT_HTML5);
}, ['is_safe' => ['html']])

但是由于 Vue 在你渲染的 html 之上运行，你呈现的冲突仍然会发生（因为 html 会将这些 html 实体渲染为括号）。

您唯一的解决方案是像这样为您的 Vue 使用更具体的分隔符，以避免这种冲突：

Vue.options.delimiters = ['$vue{', '}'];