使用角度消毒逃脱并显示所见即所得内容

时间:2015-11-04 08:08:55

标签: javascript angularjs twitter-bootstrap wysiwyg bootstrap-wysiwyg

我有一个bootstrap wysiwyg编辑器,它如下 -

<div class="clearfix m-b m-t" ng-show="answer">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">Content</label>

                                <div class="col-sm-10">
                                    <div class="btn-toolbar m-b-sm btn-editor" data-role="editor-toolbar" data-target="#editor">
                                        <div class="btn-group dropdown">
                                            <a class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" tooltip="Font"><i
                                                    class="fa text-base fa-font"></i><b class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href dropdown-toggle data-edit="fontName Serif"
                                                       style="font-family:'Serif'">Serif</a></li>
                                                <li><a href dropdown-toggle data-edit="fontName Sans"
                                                       style="font-family:'Sans'">Sans</a></li>
                                                <li><a href dropdown-toggle data-edit="fontName Arial"
                                                       style="font-family:'Arial'">Arial</a></li>
                                            </ul>
                                        </div>
                                        <div class="btn-group dropdown">
                                            <a class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"
                                               tooltip="Font Size"><i class="fa text-base fa-text-height"></i>&nbsp;<b
                                                    class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href dropdown-toggle data-edit="fontSize 5" style="font-size:24px">Huge</a></li>
                                                <li><a href dropdown-toggle data-edit="fontSize 3" style="font-size:18px">Normal</a>
                                                </li>
                                                <li><a href dropdown-toggle data-edit="fontSize 1" style="font-size:14px">Small</a></li>
                                            </ul>
                                        </div>
                                        <div class="btn-group">
                                            <a class="btn btn-sm btn-default" data-edit="bold" tooltip="Bold (Ctrl/Cmd+B)"><i
                                                    class="fa text-base fa-bold"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="italic" tooltip="Italic (Ctrl/Cmd+I)"><i
                                                    class="fa text-base fa-italic"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="strikethrough" tooltip="Strikethrough"><i
                                                    class="fa text-base fa-strikethrough"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="underline" tooltip="Underline (Ctrl/Cmd+U)"><i
                                                    class="fa text-base fa-underline"></i></a>
                                        </div>
                                        <div class="btn-group">
                                            <a class="btn btn-sm btn-default" data-edit="insertunorderedlist" tooltip="Bullet list"><i
                                                    class="fa text-base fa-list-ul"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="insertorderedlist" tooltip="Number list"><i
                                                    class="fa text-base fa-list-ol"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="outdent" tooltip="Reduce indent (Shift+Tab)"><i
                                                    class="fa text-base fa-dedent"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="indent" tooltip="Indent (Tab)"><i
                                                    class="fa text-base fa-indent"></i></a>
                                        </div>
                                        <div class="btn-group">
                                            <a class="btn btn-sm btn-default" data-edit="justifyleft" tooltip="Align Left (Ctrl/Cmd+L)"><i
                                                    class="fa text-base fa-align-left"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="justifycenter" tooltip="Center (Ctrl/Cmd+E)"><i
                                                    class="fa text-base fa-align-center"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="justifyright"
                                               tooltip="Align Right (Ctrl/Cmd+R)"><i class="fa text-base fa-align-right"></i></a>
                                            <a class="btn btn-sm btn-default" data-edit="justifyfull" tooltip="Justify (Ctrl/Cmd+J)"><i
                                                    class="fa text-base fa-align-justify"></i></a>
                                        </div>
                                    </div>
                                    <div ui-jq="wysiwyg" class="form-control h-auto" style="min-height:200px;" id="editor">
                                        Go ahead&hellip;
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-8 col-lg-offset-2 m-t">
                                    <button class="btn btn-info w-xs" ng-click="addAnswer()">Send</button>
                                </div>
                            </div>
                        </div>

在我的控制器中,我保存编辑器的html如下 -

$scope.addAnswer = function(){
        var answerText = $('#editor').html();
        var answer = new Answer({text:answerText,user:Auth.getCurrentUser()._id,queryId:$scope.query._id});
        answer.$save(function(answer){
            $scope.query.answers.push(answer._id);
            $scope.query.$save(function(query){
                $scope.getQuestion();
                $('#editor').html('');
                $scope.answer=!$scope.answer;
            });
        });
    };

那么,如何在Angular Sanitize的帮助下正确地逃避这个$('#editor').html()还是有更好的方法来实现这个目标吗?

另外,如果我从变量answer.text中的$HTTP GET请求获取内容,那么如何在屏幕上显示它然后如何在div中显示

0 个答案:

没有答案