JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div ng-app="editorApp" ng-controller="EditorCtrl as ctrl">
    <div medium-editor ng-model="ctrl.content.description">{{ctrl.content.description}}</div>
    <br>
    <button ng-click="ctrl.save()">Save</button>
    <hr>
    <div ng-bind-html="ctrl.content.description"></div>
</div>

CSS

[medium-editor] {
    padding:10px;
    border:1px solid #ccc;
}

JavaScript

(function () {

    'use strict';

    angular.module('editorApp', [])
        .controller('EditorCtrl', EditorCtrl)
        .directive('mediumEditor', mediumEditor);

    function EditorCtrl($sce) {
        var vm = this;
        var content = '<b>This is come content</b>';
        vm.content = {
            title: 'Test',
            description: $sce.trustAsHtml(content)
        }
        vm.save = save;

        function save() {
            alert(vm.content.description);
        }
    }

    function mediumEditor($sce, $timeout) {
        var directive = {
            require: 'ngModel',
            restrict: 'A',
            link: link
        };

        return directive;

        function link(scope, element, attrs, ngModel) {
            new MediumEditor(element, {
                disableDoubleReturn: true,
                disablePlaceholders: true
            });

            ngModel.$render = function () {
                element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
            };

            $timeout(function () {
                //setViewValue();
            }, 100);

            element.on('blur keyup change', function () {
                var html = element.html();

                if (html == '<br>') {
                    html = '';
                }

                ngModel.$setViewValue(html);
            });

        }
    }

})();