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

Posted 2023-03-22

【中文标题】如何在angularjs中显示包括图像和格式的summernote编辑器数据的预览？

【英文标题】：How to show the preview of summernote editor data including images and format in angularjs?

【发布时间】：2016-10-06 00:27:29

【问题描述】：

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

<button class="btn btn-primary saveBtn" ng-click="saveContent()">Save</button>
<summernote id="editor"  ng-model="content" on-image-upload="imageUpload(files)"></summernote>
<div class="preview" ng-show="item == 'preview'">
        content</div>

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

【问题讨论】：

我很困惑你到底在问什么。您能否尝试重新审视您的问题，添加更多代码（如果有），也许尝试更具体地解决您的问题。谢谢，祝你好运！

@wdanda，感谢您的回复。我想要预览summernote的内容。就像堆栈溢出显示一样。（当我们创建问题时，将显示预览，直到编辑器）。但是当我单击预览按钮时，我需要显示预览。

我已经更新了这个问题。请检查

【参考方案1】：

    <button class="btn btn-primary saveBtn" ng-click="saveContent()">Save</button>
    <summernote id="editor"  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 模块解决了我的问题