JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css">
<script src="https://gutennews.com.br/webapp/sistema/js/quill/vs-1.7.0-quill-editor-producao-texto.js"></script>
<div ng-app="MyAppEditor">

<div ng-controller="EditorCtrl" class="tab-pane-text active tab-editor-producao-textual prod-textual" id="producao_textual">
    <div id="content" class="content-page producao-textual-content show-select">
            <div class="container">
                <div class="navbarmenu" ng-show="!loading_producao_texto">
                    <div ng-cloak class="top-page no-print ng-cloak">
                        <div id="toolbar-container">
                            <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7 bar-strech">
                                <div class="secound-buttons">
                                    <button class="ql-bold" title="negrito"  data-placement="bottom" ></button>
                                      <button class="ql-italic" title="itálico" data-placement="bottom" ></button>
                                      <button class="ql-underline" title="sublinhado" data-placement="bottom" ></button>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
               
                <div id="content_editor">
                    <div class="main">
                    <div id="editor-container" style="margin-top: 60px"></div>
                    </div>
                </div>
            </div>


    </div>
</div>

</div>

CSS

#editor-container {
  
  border: 1px solid #000;
  padding: 20px;
  min-height: 200px;
}

JavaScript

var app = angular.module('MyAppEditor',[])
    .controller("EditorCtrl", [
        "$scope","$sce","$rootScope", "$filter", "$location",
         "$timeout","$interval", "$compile","$window", "$animate",
        function($scope, $sce, $rootScope,  $filter, $location,
                 $timeout, $interval, $compile, $window, $animate) {

            $rootScope.editorQuill = true;
            $rootScope.hasQuill = true;
            $rootScope.selectedTab = 'producao-texto';
            $rootScope.backPage = false;
            $rootScope.currentTab = 1;
 
            $scope.intervalTime = null;
            $scope.seconds = 0;
            $scope.forceLeave = false;
            $scope.is_running_on_ipad = false;
            $scope.autosave_autoria = false;
            $scope.permissionAutoSaveAutoria = true;
            $scope.autoria_id = null;
            $scope.currentGame = 0;
 
            $scope.params_autoria = {};
 
            $scope.read_only = false;
 
            $scope.data_autoria = null;
            $scope.data_activity = null;
 
             $scope.scroll_options = {
                 'wrapperClass': '',
                 'scrollBarClass': '',
                 'scrollBarContainerClass': '',
                 'scrollBarContainerSpecialClass': '',
                 'scrollBarMinHeight': '',
                 'scrollBarFixedHeight': '',
                 'keepFocus': false
             };
             
               $scope.getQuillEditor = function(advancedEditor, call) {

                var _self = this;
                _self.editor = advancedEditor;
                _self.objQuill = Quill;

                _self.quillEditor = function() {
                    loadingOn('');
                    if (! _self.objQuill) {
                        loadingOn('Aguarde....');
                    } else {
                        if (typeof  _self.objQuill.import == 'function') {
                            loadingOff('');
                             var GrammarlyInline...