Saving HTML content from a textarea using AngularJS

Question

Saving HTML content from a textarea using AngularJS

Here is the custom HTML I am working with:

      <div ng-if="!item.edit>
           <div class='door-description' ng-bind-html="item.Description"></div>
           <div class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration"></div>
      </div>



<div ng-if="item.edit">
    <textarea elastic class='door-description' ng-bind-html="item.Description" ng-model="item.Description"></textarea>
    <textarea elastic class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration" ng-model="item.SoftValues"></textarea>
</div>

Issue arises when line breaks are lost after saving and retrieving content in non-edit mode.

View during editing:

https://i.sstatic.net/FXWW3.png

View without editing:

https://i.sstatic.net/84vBo.png

Even toggling between edit and non-edit modes shows the same result.

What can be done to ensure that line breaks are maintained in non-edit mode?

javascript angularjs

Answer 1

Answer №1

Have you considered using the pre tag in your code:

<pre class='door-info' ng-bind-html="item.Description"></pre>

Answer 2

Have you considered using the pre tag in your code:

<pre class='door-info' ng-bind-html="item.Description"></pre>

Answer 3

Answer №2

By simply adding the following CSS style to your element, you can achieve the desired outcome:

white-space: pre;

Answer 4

By simply adding the following CSS style to your element, you can achieve the desired outcome:

white-space: pre;

Answer 5

Answer №3

Could you try implementing it this way?

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<textarea elastic class='door-description' ng-bind-html="myText " ng-model="myText "></textarea>
</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <div><h1>John Doe</h1></div>";
});
</script>

Give it a try and see if it works for you.

Once implemented, it should display:

My name is: <div><h1>John Doe</h1></div>

Answer 6

Could you try implementing it this way?

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<textarea elastic class='door-description' ng-bind-html="myText " ng-model="myText "></textarea>
</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <div><h1>John Doe</h1></div>";
});
</script>

Give it a try and see if it works for you.

Once implemented, it should display:

My name is: <div><h1>John Doe</h1></div>

Saving HTML content from a textarea using AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Avoid the scenario in which JQuery .HTML replaces the existing .HTML content before it is shown

I am experiencing an issue with my AngularJS mock where it is not providing any data

Resolving issues with JavaScript caused by Polymer updates

The ng-blur functionality will only trigger if the click event occurs within the bounds of the textbox

An error occurred in NextJS because the property 'title' is being read from an undefined value, resulting in a

The onClick event function is activated when the component is first rendered on the screen

I'm looking to fill multiple input boxes with the same value

Res.redirect() function does not redirect the browser URL as expected when triggered by a request made through a frontend fetch() call

Is it a graphics card malfunction or a coding complication? Delving into THREE.JS WebGL

Is it possible to prevent the selected option from being available in other select lists using AngularJS?

Is it possible to trigger a script tag based on certain conditions using a JavaScript function?

Why isn't my computed property functioning properly in Vue.js?

Optimal technique for adding elements to the DOM using ngFor

Ways to prevent memory leaks in Angular applications

Counting the number of PHP inputs in a field

Creating a MultichoiceField with ModelForm in Django to handle database relations

Reversing data in Vue3

Unable to show <LI> elements

Styling buttons with different colors using React onClick event.getSelectedItem() method

Creating an AngularJS directive that utilizes a switch statement based on the value of an attribute