I am making a blogging platform for a website I am working on using TextAngular for the main content of each post. I am using django and django REST for the backend API and RESTAngular so everything plays nicely. I am able to get TextAngular to post
to my api successfully but when I use get
to show the post on another page while it will get
successfully it also will not format correctly, it breaks out all the html. For ex:
"This is a title.
This is a test post for the blog I am using.
Blah blah blah."
It will post to my API and then show on my final page:
<p>This is a title.</p>
<p>This is a test post for the blog I am using.</P>
<p>Blah blah blah.</p>
Is there a way to keep the formatting from TextAngular to save properly so it will continue to use the formatting in the final post?
Something to note, only admins of the site will have the ability to post so there should be no issues with anybody posting or injecting malicious code into the site.
Looks like I found the solution, I apologize for not posting code in the question, I will do so here as a before and after.
view before:
<div>
<!--individual post -->
<div ng-repeat="post in posts | orderBy:'-id'" class="tile-shadow tile-padding container padded-container">
<!--date published-->
<div class="col-xs-1">
<ul class="main-header date-format">
<li>{+ post.created | date:'MMM' +}</li>
<li>{+ post.created | date:'dd' +}</li>
<li>{+ post.created | date:'yyyy' +}</li>
</ul>
</div>
<div class="col-xs-11 left-vertical-line">
<div class="bold"><!--Title-->
{+ post.title +}
</div>
<div><!--Snippet of article-->
{+ post.body +}
</div>
</div>
</div>
</div>
And my controller:
app.controller('getBlogCtrl', ['$scope', 'RestConfig',
function($scope, RestConfig){
var Restangular = RestConfig.create('/api/v2/');
$scope.posts = Restangular.all('blog/bloglist').getList().$object
}])
What I had to do was make it so angular wasn't making the code safe, I found this neat website: http://creative-punch.net/2014/04/preserve-html-text-output-angularjs/
It told me to add a filter that would make it my code unsafe basically. Which ended up being unnecessary apparently.
The filter:
app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
}
})
Turns out just adding the ng-bind-html made it work just fine.
The modified view:
<div class="bold"><!--Title-->
<p ng-bind-html="post.title | unsafe"></p>
</div>
<div><!--Snippet of article-->
<p ng-bind-html="post.body | unsafe"></p>
</div>
The remodified view:
<div class="bold"><!--Title-->
<p ng-bind-html="post.title"></p>
</div>
<div><!--Snippet of article-->
<p ng-bind-html="post.body"></p>
</div>
This has fixed my issue. I put a bunch of detail in the answer for those that would like to also do what I am doing, just be careful, this can be dangerous if you let anybody inject html into posts. In my situation only admins of the site are allowed to post.