如何在airmode和工具栏模式之间切换summernote编辑器?

时间:2015-09-15 13:40:37

标签: javascript jquery angularjs summernote

我正在尝试实现一个报表编辑器,其中使用多个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 + "'");
      };
    }]);

以下是我所看到的截图:

Screen Capture of Summernote Editors

我需要弄清楚如何更改模糊功能中的parentElement,以使该部分恢复为airmode。我有什么想法可以做到这一点吗?

0 个答案:

没有答案