it is possible to render html template in umbraco backend

Enrico 47 posts 252 karma points

Feb 17, 2016 @ 17:05

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

Copy Link

Dave Woestenborghs 3504 posts 12135 karma points MVP 9x admin c-trib

Feb 17, 2016 @ 17:15

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

Copy Link

Enrico 47 posts 252 karma points

Feb 17, 2016 @ 17:17

Hi Dave,

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

Copy Link

Dave Woestenborghs 3504 posts 12135 karma points MVP 9x admin c-trib

Feb 17, 2016 @ 17:23

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

Copy Link

Enrico 47 posts 252 karma points

Feb 17, 2016 @ 17:34

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

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 09:43

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.

Copy Link

Kasper Holm 47 posts 180 karma points

Feb 18, 2016 @ 09:57

Hello Enrico

Can you try changing the

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

to

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

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 10:37

Hello Kasper,

thanks for your help.

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

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 12:45

Hello guys,

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

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 15:58

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?

Copy Link

Enrico 47 posts 252 karma points

Feb 18, 2016 @ 16:55

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

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

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