【问题标题】:Ignore sanitization for a scope variable忽略范围变量的清理
【发布时间】:2014-12-24 17:41:00
【问题描述】:

我正在尝试实现一个文本编辑器,它可以使用 Angular 和 TinyMCE 获取 html 输入。 问题是 - 如果我使用 ngModel 进行绑定,那么当我在该模型变量中有 mathml 标签时,它们就会被剥离。是否可以完全忽略范围变量的清理?通过消毒,我的意思是 - https://docs.angularjs.org/api/ngSanitize/service/$sanitize

这就是我正在做的:(供参考)

<script>
        appControllers.controller('appController',['$scope','$sce',
        function($scope, $sce){
            $scope.tinymceOptions = {
                height: '450px',
                statusbar: true,
            };

            $scope.editorText = "<math xmlns:mml='http://www.w3.org/1998/Math/MathML' xmlns:m='http://schemas.openxmlformats.org/officeDocument/2006/math'><mi>H</mi><mi>C</mi><mo>≡</mo><mi>C</mi><mo>-</mo><mtable><mtr><mtd><mtable><mtr><mtd><mi>C</mi><msub><mrow><mi>H</mi></mrow><mrow><mn>3</mn></mrow></msub></mtd></mtr><mtr><mtd><mo>|</mo></mtd></mtr><mtr><mtd><mi>C</mi></mtd></mtr></mtable></mtd></mtr><mtr><mtd><mo>|</mo></mtd></mtr><mtr><mtd><mi>C</mi><msub><mrow><mi>H</mi></mrow><mrow><mn>3</mn></mrow></msub></mtd></mtr></mtable><mo>-</mo><msub><mrow><mi>C</mi><mi>H</mi></mrow><mrow><mn>3</mn></mrow></msub></math>";

            $scope.deliberatelyTrustDangerousSnippet = function(){
                return $sce.trustAsHtml($scope.editorText);
            };
        }]);

    </script>

<textarea ui-tinymce="tinymceOptions" ng-model="editorText"></textarea>
<p>{{deliberatelyTrustDangerousSnippet()}}</p>

【问题讨论】:

  • 真的是这样吗?我创建了一个 JSFiddle 并且无法重现您所描述的内容(MathML 标记仍然存在于呈现的输出中)。见:jsfiddle.net/GordyD/qrw62vok/3
  • 事实证明,我很快就扣动了扳机,ui-tinymce 指令或者可能是 tinymce 库本身也参与其中。我从这里拉出来的:github.com/angular-ui/ui-tinymce。我想我应该首先从图片中获取角度绑定。事实证明,正如您在我的案例中指出的那样,它们从未出现在图片中!谢谢

标签: javascript angularjs


【解决方案1】:

我忘记了我之前为什么这样做,但我遇到了类似的事情,这帮助了我。

app.config(function ( $sceProvider) {
    $sceProvider.enabled(false);        
});

请注意,这将适用于整个应用程序,因此在使用 ng-bind-html 之类的内容时会增加风险

【讨论】:

  • 我不知道这个。您知道将其粒度化为单个变量而不是整个应用程序的任何方式/方法?有可能吗?
  • 不确定是否诚实。我把它扔给你了,但有一段时间没有深入研究它了,我在 Angular 还年轻的时候也这样做了。尝试在文档中找到它。还可以查看 $sanitize 的源代码
猜你喜欢
  • 2017-10-20
  • 1970-01-01
  • 1970-01-01
  • 2017-07-06
  • 2011-03-24
  • 2019-12-07
  • 1970-01-01
  • 1970-01-01
  • 2020-06-10
相关资源
最近更新 更多