javascript - 如何在airmode 和toolbar 模式之间切换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>

这是 Controller :

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

我想出了一个更好的方法来做到这一点，现在使用 Bootstrap 进行样式设置。我不再使用 Summernote 中的“airmode”。相反，我有可点击的 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[] 数组中。我的 html 中的 ng-repeat 使用它来创建部分。

屏幕截图