Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • David Jazbec 22 posts 144 karma points
    Jul 19, 2023 @ 08:11
    David Jazbec
    0

    ng-bind-html (Block Grid - Backoffice)

    Hi everybody,

    i have this one Grid Block with a string property which holds a html-formatted value. (for instance Youtube iframe).

    Now the frontend is not a problem rendering it with Html.Raw().

    I have trouble generating html in the backoffice Custom view. This snippet does not seem produce any result. 

    <div class="codeBlock" ng-bind-html="block.data.embedCode">

</div>

    I dont really have any experience with Angular so any help would be really welcome.

    Disclaimer: I know allowing Editors to input html/js in this way could be dangerous. But this is for my own personal website so i am not worried too much.

    Thanks! David

    Copy Link
  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Jul 19, 2023 @ 09:53
    Marc Goodson
    100

    Hi David

    There used to be an ng-bind-html-unsafe option in earlier angularJS versions but I think that's removed, now, I think you need to inject $sce service into your angularJS controller and use $sce.trustAsHtml(yourHtml); before it can be safely bound...

    ... I think ...

    ... I mean at times it just feels like voodoo ...

    Anyway looking in the Umbraco source, I found this filter called 'safe_html':

    https://github.com/umbraco/Umbraco-CMS/blob/a49a9851dc81677637ec1823963c50d84ef360f3/src/Umbraco.Web.UI.Client/src/common/filters/safehtml.filter.js#L3

    So I'm wondering if you can 'just' use that eg:

     <div ng-bind-html="block.data.embedCode | safe_html"></div>

    fingers crossed

    Marc

    Copy Link
  • David Jazbec 22 posts 144 karma points
    Jul 19, 2023 @ 10:42
    David Jazbec
    0

    This did it! Thank you Marc!

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft