JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.min.js"></script>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<div ng-app="tinymce.module" ng-controller="tinyMceCtrl">
<button ng-click="addItem($index)" ng-if="!elements.length">Add Item</button>
<div ng-repeat="el in elements">
<button ng-click="addItem($index)">Add Item</button>
<button ng-click="removeItem($index)">Remove Item</button>
<tinymce-toggle ng-model="el"></tinymce-toggle>
<pre>
{{el}}
</pre>
<!-- Editor End -->
</div>
</div>
CSS
pre {
display: block;
overflow: auto;
margin: 10px;
border: 1px solid #333;
background: #2d2d2d;
color: white;
border-radius: 3px;
padding: 10px;
}
JavaScript
tinymce.baseURL = 'https://cloud.tinymce.com/stable/tinymce.min.js/';
angular.module('tinymce.module', ['ngSanitize'])
.directive('tinymceToggle', function() {
return {
restrict: 'EA',
require: 'ngModel',
scope: {
model: '=ngModel'
},
template: [
'<div ng-bind-html="model" ng-click="toggleEdtior()" ng-if="!show"></div>',
'<div ng-cloak tinymce ng-model="model" ng-if="show" on-blur="toggleEdtior(content)"></div>'
].join(''),
link: function(scope, element, attrs, ngModelCtrl) {
scope.show = false;
scope.toggleEdtior = function(content) {
scope.show = !scope.show;
content && ngModelCtrl.$setViewValue(content);
scope.$applyAsync();
};
}
}
})
.directive('tinymce', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
onBlur: '&'
},
link: function(scope, element, attrs, ngModelCtrl) {
element[0].id = element[0].id || ['tinymce', scope.$id, scope.$index, +new Date()].join('_');
scope.id = element[0].id;
setTimeout(function() {
tinymce.execCommand('mceAddControl', true, scope.id);
scope.setupEvents();
});
scope.setupEvents = function() {
setTimeout(function() {
var editor = tinymce.editors[scope.id];
editor.setContent(ngModelCtrl.$viewValue);
editor.onKeyUp.add(function(editor) {
ngModelCtrl.$setViewValue(editor.getContent());
});
console.log(editor.getDoc());
tinymce.dom.Event.add(editor.getBody(), 'blur', function(e) {
// Do something when the editor window is blured.
scope.onBlur({content: editor.getContent()});
});
/* editor.onChange.add(function(editor, bookmark) {
ngModelCtrl.$setViewValue(bookmark.content);
}); */
}, 100);
...