Question

我在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>

我使用带有show / hide功能的jquery按钮打开div。

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

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

与summernote和show / hide div有冲突吗？

滚动前：

滚动后：

Answer 1

我们发现，在打开Summernote文本区域之前滚动时，一些css已添加到工具栏和工具栏包装器中。为了解决这个问题，我只添加了以下代码以删除添加的css。

var pattern = @"#\D*";

        foreach (var sharp in tweet)
        {
            var match = Regex.Match(pattern, sharp);
            if (match.Success)
                Console.WriteLine(Regex.Replace(sharp, match.Value, "#" + match.Value, RegexOptions.Singleline));
            else
                Console.WriteLine(sharp);

        }

Answer 2

开始关于切换的夏令营：

        $('#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']]
            ]
        });

    })

Answer 3

默认情况下，此选项在Summernote中可用。您可以通过在选项中设置followingToolbar布尔值来对其进行控制。

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

Summernote - 工具栏后面的textarea

3 个答案: