如何在angularjs中显示summernote编辑器数据的预览,包括图像和格式?

cod*_*ner 2 editor preview angularjs summernote

我的项目中有一个预览和编辑按钮.当我点击编辑时,编辑器将显示和预览隐藏,反之亦然.如何在div或其他东西中创建summernote angularjs编辑器数据的预览,编辑器内容可能包括图像.像堆栈溢出显示,同时创建像问题或答案的帖子.怎么做.谁能帮帮我吗 ?

<button class="btn btn-primary saveBtn" ng-click="saveContent()">Save</button>
<summernote id="editor" height="400" ng-model="content" on-image-upload="imageUpload(files)"></summernote>
<div class="preview" ng-show="item == 'preview'">
        {{content}}</div>
Run Code Online (Sandbox Code Playgroud)

这里的预览显示代码<p>preview</p>.但我需要显示段落文本和图像将以某种格式显示(有一些代码,如外观),不显示图像.如何在预览中显示图像和内容.

cod*_*ner 5

    <button class="btn btn-primary saveBtn" ng-click="saveContent()">Save</button>
    <summernote id="editor" height="400" ng-model="content"></summernote>
    <div class="preview" ng-show="item == 'preview'">
        <div ng-bind-html="content| trusted"></div>
    </div>
Run Code Online (Sandbox Code Playgroud)

可信过滤器

 angular.module('app.filters')
     .filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     })
Run Code Online (Sandbox Code Playgroud)

添加ng-bind-html ="expression | filter"和ngSanitize模块解决了我的问题