我正在尝试实现一个报表编辑器,其中使用多个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
。我有什么想法可以做到这一点吗?