JSFiddle - React, Tailwind, and code Playground

by hemedani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<body>
  <rt-editor></rt-editor>
</body>

JavaScript

(function () {
	'use strict';
	angular.module('barname.rtEditor', [])
		.directive('rtEditor', rtEditor);

	function rtEditor() {

		return {
			restrict: 'E',
			replace: true,
			template: '<div ng-repeat="inp in com.inp" id="{{inp.name}}"><label>{{inp.name}} :</label><input type="text" ng-model="inp.model" /><span ng-click="execIn(inp.command, inp.modelcommand)">doIt!</span></div>',
			compile: compile
		};

		function compile() {

			return {
				post: function (scope, element, attrs) {

					scope.com = {

						inp: [{
							name: 'video',
							model: scope.vimodel,
							command: 'insertHTML',
							modelcommand: scope.vimodel
						}, {
							name: 'pic',
							model: scope.pimodel,
							command: 'insertImage',
							modelcommand: scope.pimodel
						}, {
							name: 'link',
							model: scope.linkmodel,
							command: 'createLink',
							modelcommand: scope.linkmodel
						}],

					};

					scope.vimodel = 'hello!';

					scope.$watch('vimodel', function (newValue, oldValue) {
						console.log('vim model watch :-> ', newValue);
					});

					scope.execIn = function (cmd, val) {

						console.log('cmd val :->', cmd + ' | ' + val);

						scope.vimodel = '';


					};
				}
			};

		}
	}
})();