JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://jp.igniteui.com/js/angular.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angularjs.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>
<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>
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%;
}
JavaScript
$(function () {
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>";
});
});