Summernote 编辑器落后于 Summernote 工具栏答案

【问题标题】：Summernote editor gets behind the summernote toolbarSummernote 编辑器落后于 Summernote 工具栏
【发布时间】：2018-09-04 17:08:00
【问题描述】：

我正在使用带有 angularJS 的 Summernote。我写了一个包装器来使它工作。在我的 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>

【问题讨论】：

标签： angularjs summernote

【解决方案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);
})

【讨论】：