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

【问题标题】：How to show the preview of summernote editor data including images and format in angularjs?如何在angularjs中显示包括图像和格式的summernote编辑器数据的预览？
【发布时间】：2016-10-06 00:27:29
【问题描述】：

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

<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> 的代码。但我需要显示段落文本和图像将以某种格式显示（带有一些类似外观的代码），它不显示图像。如何在预览中显示图像和内容。

【问题讨论】：

我很困惑你到底在问什么。您能否尝试重新审视您的问题，添加更多代码（如果有），也许尝试更具体地解决您的问题。谢谢，祝你好运！
@wdanda，感谢您的回复。我想要预览summernote的内容。就像堆栈溢出显示一样。（当我们创建问题时，将显示预览，直到编辑器）。但是当我单击预览按钮时，我需要显示预览。
我已经更新了这个问题。请检查

标签： angularjs editor preview summernote

【解决方案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 模块解决了我的问题

【讨论】：