<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="/js/angular.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/extensions/igniteui-angularjs.js"></script>
<script type="text/javascript">
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
sampleApp.controller('gridController', function ($scope) {
$scope.data = "<p>Ignite UI for jQuery controls:</p><p><ul><li>igEditors</li><li>igHtmlEditor</li><li>igGrid</li><li>igDataChart</li><li>etc.</li></ul></p>";
});
</script>
<style type="text/css">
textarea {
width: 100%;
height: 400px;
}
.row {
margin-right:-15px;
margin-left:-15px
}
.col-left,.col-right {
position:relative;
min-height:1px;
padding-right:15px;
padding-left:15px;
float:left;
}
.box-sizing {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.col-left {
width:66.6%;
}
.col-right {
width:33.3%;
}
</style>
</head>
<body>
<div ng-app="sampleApp" ng-controller="gridController">
<div class="row">
<div class="col-left box-sizing">
<ig-html-editor id="htmlEditor" height="400px" width="100%" value="data"></ig-html-editor>
</div>
<div class="col-right box-sizing">
<textarea ng-model="data"></textarea>
</div>
</div>
</div>
</body>
</html>
