Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Enrico 47 posts 252 karma points
    Feb 17, 2016 @ 17:05
    Enrico
    0

    Is it possible to render html code in the Umbraco backend?

    Hello everyone,

    I was trying to render Html code in the Umbraco Backend, but I can't

    I created a new property editor containing a simple div and I wanted to get some html code from a backend controller and render it.

    The purpose, in the future, is to save an email template in a textbox and having a preview inside the property editor.

    This is the code of the manifest file:

    {
      propertyEditors: [
        {
                alias: "TemplateEditor",
                name: "Email Template Editor",
                editor: {
                    view: "~/App_Plugins/TemplateEditor/editor.html",
                    valueType: "JSON"
                }
        },
      ],
      javascript: [
          '~/App_Plugins/TemplateEditor/editor.controller.js',
      ],
      css: [
          '~/App_Plugins/TemplateEditor/editor.css'
      ]
    }
    

    This is the code of editor.html

    <div ng-controller="EmailTemplateEditor" class="umb-editor list-wrapper">
    
        <p ng-bind="msg" class="msg"></p>
    
        <div class="email-template" ng-bind="template" ng-bind-html-unsafe="template"></div>
    </div>
    

    This is the code of editor.controller.js

    var app = angular.module('umbraco');
    
    app.factory('editorService', function ($http) {
        return {
            getTemplate: function (id) {
                return $http.get('/umbraco/backoffice/api/EmailTemplateEditorBackend/GetTemplate?id=' + id);
            }
    
        }
    });
    
    app.controller('EmailTemplateEditor', function ($scope, $routeParams, editorService) {
        var nodeId = $routeParams.id;
        $scope.msg = nodeId;
    
        editorService.getTemplate(nodeId).then(function (d) {
            $scope.template = d.data;
        });
    
    
    });
    

    This is the code of the backend controller

    [IsBackOffice]
        public class EmailTemplateEditorBackendController : UmbracoAuthorizedApiController
        {
            [System.Web.Http.HttpGet]
            public string GetTemplate(string id){
                string tt = "";
                IPublishedContent model = Umbraco.TypedContent(id);
    
                // tt = "<p><u><b>TEST DIV  test passed " + id + "</b></u></p>";
    
                tt = model.GetPropertyValue<string>("htmlText");
    
                return tt;
            }
        }
    

    This is the final result the html code is not rendered properly

    enter image description here

  • Dave Woestenborghs 3504 posts 12135 karma points MVP 9x admin c-trib
    Feb 17, 2016 @ 17:15
    Dave Woestenborghs
    0

    Hi Enrico,

    Maybe you can change this line in your view :

     <div class="email-template"  ng-bind-html-unsafe="template"></div>
    

    You had 2 bind directives in there

    Dave

  • Enrico 47 posts 252 karma points
    Feb 17, 2016 @ 17:17
    Enrico
    0

    Hi Dave,

    thanks for your suggestion. But the result remains the same. The Html does not render properly.

  • Dave Woestenborghs 3504 posts 12135 karma points MVP 9x admin c-trib
    Feb 17, 2016 @ 17:23
    Dave Woestenborghs
    0

    Maybe you should output the result of the API call to the console to see if there are no issues with it.

    Because i'm actually doing the same in a property editor and that works just fine :

    https://bitbucket.org/dawoe/embed-property-editor/src/1720f8b0e81b0723241f25f4def3e7451ad244bd/Sources/Dawoe.OEmbedPickerPropertyEditor/Views/editor.html?at=master&fileviewer=file-view-default#editor.html-4

    Dave

  • Enrico 47 posts 252 karma points
    Feb 17, 2016 @ 17:34
    Enrico
    0

    I will try to output the Api result to the Chrome Extension Postman and see what happens.

    Thanks for your help

    I will let you know

  • Enrico 47 posts 252 karma points
    Feb 18, 2016 @ 09:43
    Enrico
    0

    I tried to return a test string from the Api controller

    This is the code of the controller

    [IsBackOffice]
        public class EmailTemplateEditorBackendController : UmbracoAuthorizedApiController
        {
            [System.Web.Http.HttpGet]
            public string GetTemplate(string id){
                string tt = "";
    
    
                tt = "<p><u><b>TEST DIV  test passed " + id + "</b></u></p>";
    
    
    
                return tt;
            }
        }
    

    This is the result:

    enter image description here

    As you can see the HTML is rendered with inside two double quotes.

    I read some topic around and I tried to use $sce to render the code, but is not possible in the Umbraco back end.

  • Kasper Holm 47 posts 180 karma points
    Feb 18, 2016 @ 09:57
    Kasper Holm
    0

    Hello Enrico

    Can you try changing the

     tt = model.GetPropertyValue<string>("htmlText");
    

    to

     tt = model.GetPropertyValue<IHtmlString>("htmlText");
    
  • Enrico 47 posts 252 karma points
    Feb 18, 2016 @ 10:37
    Enrico
    0

    Hello Kasper,

    thanks for your help.

    I tried your solution, but I get a null result using IHtmlString.

  • Enrico 47 posts 252 karma points
    Feb 18, 2016 @ 12:45
    Enrico
    0

    Hello guys,

    did anyone of you used $sce with Umbraco Backend to escape html code?

  • Enrico 47 posts 252 karma points
    Feb 18, 2016 @ 15:58
    Enrico
    0

    I just discovered that outside Umbraco backend it works.

    I created a basic html page using the same libraries used in the backend

    This is the code :

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" ng-app="umbraco">
    <head>
        <title></title>
        <script src="/umbraco/lib/angular/1.1.5/angular.min.js"></script>
    
        <script>
    
            var app = angular.module('umbraco', []);
    
            app.factory('editorService', function ($http) {
                return {
                    getTemplate: function (id) {
                        return $http.get('/umbraco/surface/EmailTemplateEditor/getTemplate?id=' + id);
                    }
    
                }
            });
    
            app.controller('testController', function ($scope, editorService) {
                var nodeId = 1426;
                editorService.getTemplate(nodeId).then(function (d) {
                    $scope.template = d.data;
                });
            });
    
        </script>
    </head>
    <body>
        <div ng-controller="testController">
            <div class="blank" ng-bind-html-unsafe="template"></div>
        </div>
    </body>
    </html>
    

    And it renders the html code without any problems.

    Why is not not doing the same in Umbraco backend?

  • Enrico 47 posts 252 karma points
    Feb 18, 2016 @ 16:55
    Enrico
    100

    I found the solution.

    I hope this could be useful.

    This is the updated code of the backend controller

    [IsBackOffice]
        public class EmailTemplateEditorBackendController : UmbracoAuthorizedApiController
        {
            [System.Web.Http.HttpGet]
            public HttpResponseMessage GetTemplate(string id)
            {
    
                IPublishedContent model = Umbraco.TypedContent(id);
    
                var tt = model.GetPropertyValue<string>("htmlText");
    
                var response = new HttpResponseMessage();
                response.Content = new StringContent(tt);
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
    
    
    
                return response;
            }
        }
    
Please Sign in or register to post replies

Write your reply to:

Draft