Как изменить поля на панели инструментов Quill. js? - PullRequest
Новая
       2

Как изменить поля на панели инструментов Quill. js?

0 голосов
/ 07 мая 2020

Я создаю веб-страницу, которая позволяет моим пользователям вводить форматированный текст и в конечном итоге загружать этот форматированный текст в мою базу данных. Я использую Quill. js в качестве редактора форматированного текста через Quill CDN. Я успешно настроил Quill. Контейнеры редактора Quill и панели инструментов настроены следующим образом: 

<div class="quill-toolbar" id="toolbar" style="margin-left: 50px; margin-right: 50px"></div>
<div class="quill-editor" id="editor" style="margin-left: 50px; margin-right: 50px"></div>

Я также написал сценарий для инициализации Quill. js с включенным редактором «снежной» тематики. Этот сценарий находится ниже: 

<script>
        var FontAttributor = Quill.import('formats/font');
        FontAttributor.whitelist = [
            'sans-serif', 'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
        ];

        Quill.register(FontAttributor, true);

        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            ['link', 'image', 'video', 'formula'],
        ];

        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions,
            },
            placeholder: 'Start writing...',
            theme: 'snow'
        });\
</script>

Моя проблема возникает, когда я пытаюсь правильно расположить панель инструментов Quill. Используя встроенный CSS, я смог разместить редактор Quill в центре экрана с полями в 50 пикселей, как вы видели, когда я настраивал панель инструментов и контейнеры редактора: style="margin-left: 50px; margin-right: 50px". Однако я не могу сделать то же самое с панелью инструментов Quill.

Как настроить панель инструментов так, чтобы на каждой стороне панели инструментов и в редакторе были поля по 50 пикселей?

Обновление статуса

Я продолжил экспериментировать с CSS изменениями, чтобы добавить поля на панель инструментов. Самым простым решением, которое я смог найти, было установить поля на <body> для страницы. Однако теперь у меня проблема с панелью навигации. <body> выглядит так <body style="margin-left: 50px">. Однако панель навигации теперь неуместна, и если я добавлю отрицательное поле вроде этого: <div class="topnav" style="margin-left: -50px">, это будет пробел в правой части панели навигации. Почему это происходит. Это изменение полей <body> лучшее решение?

...