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

Question

我的项目中有一个预览和编辑按钮。当我单击编辑时，编辑器将显示和预览隐藏，反之亦然。如何在 div 或其他内容中创建 summernote angularjs 编辑器数据的预览，编辑器内容可能包括图像。在创建 post 之类的问题或答案时，如堆栈溢出显示。怎么做。谁能帮帮我？

<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>

这里的预览显示了类似 <p>preview</p> 的代码。但我需要像段落一样显示文本和图像将以某种格式显示（带有一些代码，如外观），不显示 image.how 以在预览中显示图像和内容。

Answer 1

    <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>

受信任的过滤器

 angular.module('app.filters')
     .filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     })

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

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

How to show the preview of summernote editor data including images and format in angularjs?

editor

preview

angularjs

summernote