Kraishan Kraishan - 18 days ago 11
PHP Question

Receiving and storing HTML entities with AngularJS

I am trying to store and receive HTML content (via HTML editor) with my AngularJS WebApp.
However, the code is shown as plain text.

JSApp:

$scope.SkipValidation = function (value) {
var decoded = $("#showtext").html(value).text();
return $sce.trustAsHtml(decoded);
};
// Retrieving the object with the content
$scope.getTemplate = function () {
$http({
method: 'GET',
url: 'api/template.php?id=' + $routeParams.id
}).then(function (response) {
$scope.template = response.data;
var index = $scope.types.findIndex(x => x.name==$scope.template.type)
$scope.selected = $scope.types[index];
$scope.content = $scope.template.content;
$("#templatebutton").hide();
$("#newtemplateform :input").prop("disabled", true);
$(".actions").show();
}, function (response) {
alert(response.data, response.status);
});
};


And finally the HTML





<div class="shown">
<div id="showtext" ng-bind-html="content"></div>
</div>


The code in the database is stored like this:
(After the POST in php:)

$template->content = htmlentities($_POST['content']);


And the result in my DB is:

&lt;b&gt;&lt;u&gt;&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;&lt;/u&gt;&lt;/b&gt;


UPDATE:
The skipValidation() methods started to work! So now my text is shown correctly.

However now I get HTML tags in my summernote textarea due to:

$('$templatecontent').html($('.summernote').summernote("code",$scope.content));


How can I show the formatted text instead of the text with tags like et cetera?

UPDATE 2:

Still no progress, however I tried to JSON_DECODE the $scope.content, and I've tried to use Angular-Summernote but apparently that's not compatible with my version (0.8.2).

UPDATE 3:

I found out that calling the following function when Summernote is loaded works;

var html = "<b>hello</b>";
$('#templatecontent').summernote('code',html);


However using a dynamic variable that is loaded on forehand doesn't work:

var html = $scope.template.content;
$('#templatecontent').summernote('code',html);


The result of this code is basically "hello" if that was to be the content of $scope.template.content. It still does not render correctly.

Answer

In the original post you can find some of the efforts I tried to show HTML formatted text, and how to load the same text into summernote with rendering the html tags visually.

After several attempts I found that changing

<textarea  class="form-control " id="templatecontent" name="content" ng-model="template.content"  style="resize:none;"></textarea>

to

<textarea  class="form-control " id="templatecontent" name="content" ng-bind-html="SkipValidation(template.content)"  style="resize:none;"></textarea>

(Note the ng-bind-html) worked. I assumed the ng-bind-html directive only worked for showing html-formatted text in a HTML element and not summernote. But hey, guess what.. Summernote exists out of HTML elements (duh...)

Thanks to those who helped!

The complete code to show and edit the text is:

 <div class="editor">
                        <textarea  class="form-control " id="templatecontent" name="content" ng-bind-html="SkipValidation(template.content)"  style="resize:none;"></textarea>
                    </div>
                    <div class="shown">
                        <p ng-bind-html="SkipValidation(template.content)"></p>
                    </div>