Как переключить редактор summernote между режимами «воздух» и «панель инструментов»?

Question

Я пытаюсь реализовать редактор отчетов, где есть только одна панель инструментов, отображаемая при использовании нескольких разделов редактора summernote WYSIWYG. Я придумал решение, в котором первая секция представляет собой полный редактор, а другой раздел - в режиме воздушного движения.

Вот HTML код, я использую:

<h1>Report Editor</h1> 
<h2>Findings</h2> 
<summernote id="findings" class="summernote focused" ng-model="summernoteText" config="options" on-blur="reportCtrl.blur(evt)"></summernote> 
<h2>Conclusions</h2> 
<summernote id="conclusions" class="summernote" ng-model="summernoteText1" config="options" airmode on-blur="reportCtrl.blur(evt)"></summernote> 
<h3>Findings Preview</h3> 
<div class="sectionPreview">{{ summernoteText | notEmpty }}</div> 

Здесь контроллер:

var module = angular.module('risReportControllers', ['summernote']); 
module 
    .controller('ReportController', ['$route', '$scope', '$log', 
    function ($route, $scope, $log) { 
     $scope.summernoteText = "<p>Hi! I'm section #1!</p><p>Pick a car: <select name=\"cars\"> <option value=\"volvo\">Volvo</option> <option value=\"saab\">Saab</option> <option value=\"fiat\">Fiat</option> <option value=\"audi\">Audi</option> </select> and you could win!</p>"; 
     $scope.summernoteText1 = "<p>Ooops, I did #2.</p>"; 
     $scope.options = { 
     height: 150, 
     minHeight: null, 
     toolbar: [ 
      ['style', ['bold', 'italic', 'underline', 'clear']], 
      ['color', ['color']], 
      ['table', ['table']], 
      ['para', ['ul', 'ol', 'paragraph']], 
      ['height', ['height']], 
      ['view', ['fullscreen', 'codeview']] 
     ], 

     }; 

     this.blur = function (event) { 
     $log.debug("blur(event='" + event + "'"); 
     var parentElement = angular.element(event.currentTarget.parentElement.parentElement); 
     $log.debug("parentElement = '" + parentElement + "'"); 
     }; 
    }]); 

Вот скриншот того, что я вижу:

Мне нужно выяснить, как изменить parentElement в размытия, чтобы сделать раздел обратно на airmode. Любые идеи, как я могу это сделать?

Answer 1

Я придумал лучший способ сделать это, который теперь использует бутстрап для стилизации. Я больше не использую 'airmode' от summernote. Вместо этого у меня есть интерактивные div, которые активируют или уничтожают редактор summernote при нажатии. Если щелкнуть другой раздел, все остальные редакторы будут уничтожены (если они активны).

HTML

<div class="container"> 
    <h1>Summernote Editor</h1> 
    <div ng-repeat="section in reportCtrl.sections"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> {{ section.heading }}</div> 
     <div id="section_{{$index}}" class="panel-body" ng-bind-html="section.body" ng-click="section.onClick($index)"></div> 
    </div> 
    </div> 
    <button type="button" class="btn btn-primary pull-right" ng-click="reportCtrl.destroyEditors()">Close All</button> 
</div> 

JS

var module = angular.module('risReportControllers', ['summernote']); 
module 
    .controller('ReportController', ['$route', '$scope', '$log', '$sce', 'ModelFetchService', 
    function ($route, $scope, $log, $sce, ModelFetchService) { 
    var reportCtrl = this; 
    reportCtrl.sections = []; 
    // This fetches a fake report from the reports folder and populates the sections[] array. 
    ModelFetchService.get({reportId: 'report'}, function (file) { 
     for (var i in file.report) { 
     var section = file.report[i]; 
     reportCtrl.sections.push({ 
      heading: section.heading, 
      body: $sce.trustAsHtml(section.body), 
      isEditable: false, 
      onClick: function (i) { 
      reportCtrl.activateEditor(i); 
      } 
     }); 
     } 
    }); 
    const SECTION_ID_PREFIX = '#section_'; 

    /** 
    * Renders the editor for the section with the given id value and turns off editing for all other sections. 
    * 
    * @param sectionId the html id of the section to edit. 
    */ 
    reportCtrl.activateEditor = function (sectionIndex) { 
     var section = reportCtrl.sections[sectionIndex]; 
     activateEditor(sectionIndex); 
     // Destroy the editor an all other sections but this one. 
     for (var i in reportCtrl.sections) { 
     if (i != sectionIndex) { 
      destroyEditor(i); 
     } 
     } 
    }; 

    /** 
    * Destroys the editor for all sections. 
    */ 
    reportCtrl.destroyEditors = function() { 
     for (var i in reportCtrl.sections) { 
     destroyEditor(i); 
     } 
    }; 

    /** 
    * Actives the editor in the section with the given sectionIndex (if it is not already active). 
    * 
    * @param sectionIndex the numerical index of the section in the reportCtrl's sections array 
    */ 
    var activateEditor = function (sectionIndex) { 
     var section = reportCtrl.sections[sectionIndex]; 
     if (!section.isEditable) { 
     section.isEditable = true; 
     $log.debug("activateEditor(sectionIndex='" + sectionIndex + "')"); 
     const sectionId = SECTION_ID_PREFIX + sectionIndex; 
     var element = angular.element(sectionId); 
     element.summernote({ 
      minHeight: 150, 
      toolbar: [ 
      ['style', ['bold', 'italic', 'underline']], 
      ['para', ['ul', 'ol']], 
      ] 
     }); 
     } 
    }; 

    /** 
    * Destroys the editor in the given section (if the editor is active). 
    * 
    * @param sectionIndex the numerical index of the section in the reportCtrl's sections array. 
    */ 
    var destroyEditor = function (sectionIndex) { 
     var section = reportCtrl.sections[sectionIndex]; 
     if (section.isEditable) { 
     section.isEditable = false; 
     $log.debug("destroyEditor(sectionIndex='" + sectionIndex + "')"); 
     const sectionId = SECTION_ID_PREFIX + sectionIndex; 
     var element = angular.element(sectionId); 
     section.body = $sce.trustAsHtml(element.code()); 
     element.destroy(); 
     // You have to add the onClick method back because it is destroyed by the summernote integration. 
     element.on('click', function() { 
      section.onClick(sectionIndex); 
     }); 
     } 
    }; 
}]); 

Примечания, что в предварительной иноходи из моих reportCtrl я добавил вызов к моим ModelFetchService, который извлекает JSON файл и вставляет его в массив sections[]. Это используется ng-repeat в моем html для создания разделов.

Screen Shot