I am using textAngular and angular. In my app, the user can write html code and preview it. It previews correctly using iframe, but I noticed that angular strips the <html> and <head> tags before displaying it to the textAngular editor. How do I prevent angular from doing this?
Here is my code in plunkr: http://plnkr.co/edit/W1YjV9qO3kzeBQbdgSKf?p=preview
Notice that the contents of the editor($scope.orightml) starts with <!DOCTYPE html><html><head><link rel="stylesheet" .... but when I click on the toggle html button (the button with the </> icon), only <div class="alert alert-success">Hello World</div> is left. I want to show the entire contents. I don't want any of the tags removed. How to do that?
Sorry for my bad english.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,300">
<style>
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js'></script>
<script src='http://textangular.com/dist/textAngular-rangy.min.js'></script>
<script src='http://textangular.com/dist/textAngular-sanitize.min.js'></script>
<script src='http://textangular.com/dist/textAngular.min.js'></script>
</head>
<body>
<div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
<h1>Editor</h1>
<button ng-click="disabled = !disabled" unselectable>Disable text-angular Toggle</button>
<div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
</div>
<script>
angular.module("textAngularTest", ['textAngular']).controller('wysiwygeditor', function wysiwygeditor($scope) {
$scope.orightml = '<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/></head><body><div class="alert alert-success" role="alert">Hello World</div></body></html>';
$scope.htmlcontent = $scope.orightml;
$scope.disabled = false;
});
</script>
</body>
</html>