I have an bootstrap wysiwyg editor and it is as follows -
<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> <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…
</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>
And in my controller I am saving the html of editor as follows -
$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;
});
});
};
So, how do I properly escape this $('#editor').html() with the help of Angular Sanitize or is there a better way to achieve this ?
Also, How do I display it on screen if I get the content from an $HTTP GET request in a variable answer.text then how do I display it in a div
