Summernote 编辑器落后于 Summernote 工具栏

Posted 2023-03-22

【中文标题】Summernote 编辑器落后于 Summernote 工具栏

【英文标题】：Summernote editor gets behind the summernote toolbar

【发布时间】：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>

【参考方案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);
)