Summernote - текстовая область за панелью инструментов - PullRequest
Новая
       6

Summernote - текстовая область за панелью инструментов

0 голосов
/ 28 апреля 2018

Я использую Summernote в приложении Laravel. 

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

Я открываю div с помощью кнопки jquery с функцией show / hide.

Когда я открываю div, текст содержимого Summernote находится за панелью инструментов. Когда я прокручиваю окно или изменяю его размер, текст содержимого отображается правильно.

Когда я удаляю style="display: none", текст отображается правильно.

Есть ли конфликт с summernote и show / hide div?

Перед прокруткой:

enter image description here

После прокрутки:

enter image description here

Ответы [ 3 ]

0 голосов
/ 09 августа 2018

Мы обнаружили, что при прокрутке перед открытием текстовой области summernote на панель инструментов и панель-оболочку инструментов добавлялось несколько CSS. Чтобы исправить это, я просто добавил следующий код, чтобы удалить CSS, который был добавлен. 

$('#myModal').on('shown.bs.modal', function(){
    $('.note-toolbar-wrapper').removeAttr('style');    
    $('.note-toolbar').removeAttr('style');
})
0 голосов
/ 01 августа 2019

Это доступно в Summernote по умолчанию сейчас. Вы можете управлять им, установив логическое значение followingToolbar в опциях. 

$('#description').summernote({
        followingToolbar: false
});
0 голосов
/ 30 апреля 2018

Инициализировать летнюю заметку при переключении: 

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

    })
...