Summernote - 工具栏后面的文本区域答案

【问题标题】：Summernote - textarea behind toolbarSummernote - 工具栏后面的文本区域
【发布时间】：2018-10-09 03:04:12
【问题描述】：

我在 Laravel 应用程序中使用 Summernote。

               <div id="editIssue" style="display: none">
                    <form class="form-horizontal" action="{{route('projects.issues.update', $issue)}}" method="put">
                        @csrf
                        <div class="form-group row">
                            <label for="title" class="col-sm-2 text-right control-label col-form-label">Title*</label>
                            <div class="col-sm-10">
                                <input type="title" class="form-control" name="title" id="title" placeholder="Title" value="{{$issue->title}}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="description" class="col-sm-2 text-right control-label col-form-label">Description</label>
                            <div class="col-sm-10">
                                <textarea id="description" name="description"></textarea>
                            </div>
                        </div>

                        <div class="form-group m-b-0">
                            <div class="offset-sm-2 col-sm-10">
                                <button type="submit" class="btn btn-info waves-effect waves-light m-t-10">Save</button>
                            </div>
                        </div>
                    </form>
                </div>

我使用带有显示/隐藏功能的 jquery 按钮打开 div。

当我打开 div 时，summernote 的内容文本在工具栏的后面。当我滚动或调整窗口大小时，内容文本会正确显示。

当我删除 style="display: none" 时，文本显示正确。

summernote和show/hide div有冲突吗？

滚动前：

滚动后：

【问题讨论】：

我遇到了同样的工具栏重叠问题。与您的问题中的问题类似，我的summernote 文本区域是隐藏的，直到使用css/javascript 选项卡库显示一个div。我在 .note-editable 类中添加了一个 50px !important padding top 来解决这个问题。 .note-editable {height: 50vh; padding-top: 50px !important;} 当然这个css必须放在summernote.css加载到页面之后。

标签： css laravel summernote

【解决方案1】：

我们发现在打开summernote textarea 之前滚动时，工具栏和工具栏包装器中添加了一些css。为了解决这个问题，我刚刚添加了以下代码来删除添加的 css。

$('#myModal').on('shown.bs.modal', function(){
    $('.note-toolbar-wrapper').removeAttr('style');    
    $('.note-toolbar').removeAttr('style');
})

【讨论】：

这行得通，但您似乎遇到了相反的情况，即滚动后工具栏后面显示的描述，而不是在您滚动模式之前显示的描述

【解决方案2】：

现在默认情况下在 Summernote 中可用。您可以通过在选项中设置followingToolbar 布尔值来控制它。

$('#description').summernote({
        followingToolbar: false
});

【讨论】：

【解决方案3】：

在切换时初始化summernote：

        $('#buttonEditIssue').click(function () {
        $('#showIssue').hide()
        $('#editIssue').show()
        $('#description').summernote({
            placeholder: 'Enter your description',
            tabsize: 2,
            height: 150,
            dialogsInBody: true,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']]
            ]
        });

    })

【讨论】：