Search code examples
angularjseditorpreviewsummernote

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


I have a preview and edit button in my project. when i click edit, editor will show and preview hides, viceversa. how to create the preview of summernote angularjs editor data in a div or something, the editor content may include the images .like stack overflow shows while creating post like question or answer. how to do it. Can anyone please help me ?

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

the preview here shows the code like <p>preview</p>. but i need to show like paragraph text and image will show in some format (with some code like appearance) which doesn't display the image.how to do to show the image and content in preview.


Solution

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

    trusted filter

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

    adding ng-bind-html="expression |filter" along with ngSanitize module solved my issue