CODEWITHSUNDEEP
jqueryhtmlcssangularjs
Tom Wellbrock
Tom Wellbrock

Reputation: 3042

Inline style within HTML textarea gets ignored

I recently started my first project with JHipster and created two entities. One of the entitys resembles a blog. That blog has an content attribute which works with a textarea. at my blogs.htmlfile I enabled the use of html-tags in my textarea like so:

<div ng-bind-html="topic.content"></div>

That works without a problem. I am able to define html-tags in my textarea and they get interpreted as such.

But the problem starts with styling my newly formed attributes. a simple div with inline styles:

<div style="font-size:100px"> Test</div>

gets interpreted as html but the style gets skipped. I also tryed to use ng-style instead:

 <div ng-style="font-size:100px"> Test</div>`

but that didnt work either. In the case that my styles might get overwritten I also tryed to set the !important flag without success.

It is a little difficult for me to provide actual code, as jhipster generated my entitys completly autonomic. I cant identify if some script would override my styles or forbade the use of style tags as whole. Never the less I made some pictures which might help to grasp the problem:

this is my textarea in which the user does his input this is my textarea in which the user does his input

this is how the result looks, notice the "test" text should be colored:

this is how the result looks, notice the "test" text should be coloured

Last but not least I try to provide how my browser resolves the attribute:

how my browser resolves the attribute

I appreciate your help!

Upvotes: 1

Views: 819

Answers (1)

Vi100
Vi100

Reputation: 4203

I think that the sanitizer is stripping out the style tag...

Inject the $sce service in your controller an map the trustAsHtml function to the view:

$scope.trustAsHtml = function(string) {
    return $sce.trustAsHtml(string);
};

then you can do this:

<div ng-bind-html="trustAsHtml(topic.content)"></div>

That should solve your problem, but be aware that your topic.content comes from a verified source (not from the user input) or you could an injection attack...

Upvotes: 2

Related Questions