Summernote编辑器位于summernote工具栏的后面

Question

我正在使用angularJS的夏季笔记。我写了一个包装器来让它工作。在我的html中，我尝试使用带有bootstrap折叠的summernote。当我切换面板时，summernote编辑器出现在summernote工具栏的后面。当我稍微调整窗口的大小时，它就被修复了。不知道问题出在哪里。

This how it shows up in the console

这是js包装器。

   @Component({
selector: 'summernote',
templateUrl: './summernote.html'})
  export class SummernoteComponent implements AfterViewInit, OnDestroy {
@ViewChild('input') input: ElementRef;

@Input() placeHolderText: string = "";
@Input() selectedText = null;

@Output() changeText = new EventEmitter<any>();
value: string;

constructor(private zone: NgZone) { }

ngAfterViewInit() {
    var config = this.buildConfigObject();
    if (typeof window !== 'undefined') {
        let _self = this;
        this.zone.runOutsideAngular(() => {
            $(_self.input.nativeElement).summernote(config);
            $(_self.input.nativeElement).on("summernote.change", function (value, contents, $editable) {
                // _self.value = contents;
                _self.value = contents.split("<p><br></p>").join("");
                _self.changeText.emit(_self.value);
            })

            if (_self.selectedText) {
                $(_self.input.nativeElement).summernote('pasteHTML', _self.selectedText);
            }

        });
        $(_self.input.nativeElement).summernote('disable');
        $(_self.input.nativeElement).summernote('enable');

    }
}

ngOnDestroy() {
    //$(this.input.nativeElement).timepicker('destroy');
}

buildConfigObject() {
    var config = {
        callbacks: {
            onChange: function (contents, $editable) {
            }
        },
        placeholder: this.placeHolderText,
        // airMode: true,
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true,
          popover: {}
    }
    return config;
}

}

这是html

        <div class="card card-default">

            <div class="tools">
                <a class="collapse" href="javascript:;"></a>
                <a class="config" data-toggle="modal" href="#grid-config"></a>
                <a class="reload" href="javascript:;"></a>
                <a class="remove" href="javascript:;"></a>
            </div>

            <div class="card-block no-scroll card-toolbar" style="padding:0px;">
                <div class="summernote-wrapper">
                    <div id="summernote" #input></div>
                </div>
            </div>
        </div>

Answer 1

在显示之后，您应该构建编辑器。

Summernote将寻找用于建筑的元素高度和宽度。如果你在不可见模式下初始化它，它会出现错误。

// show is before animation and shown is after it.
// if you use tab, there is also a event: shown.bs.tab
$('#collapse').on('shown.bs.collapse', function() {
  $('#summernote').summernote(config);
})