Блог

Главная - Вопросы по программированию - Редактор Quill и элементы Flexbox

Редактор Quill и элементы Flexbox

#jquery #css #flexbox #quill

#jquery #css #flexbox #quill

Вопрос:

Сценарий Два элемента flexbox, расположенные рядом, внутри контейнера, с quill в левом элементе. Quill, границы которого установлены для левого элемента, а не document.body и overflow-wrap добавлены в .ql-editor класс.

Проблема Когда quill достигает самой правой границы редактора, он переходит к следующей строке, но все равно постоянно перемещает правый элемент flexbox, уменьшая его до тех пор, пока его больше невозможно уменьшить.

Желаемая функциональность, чтобы quill ограничивался границами элемента flexbox, который его содержит, без расширения элемента и БЕЗ необходимости указывать ширину для поддержки адаптивного дизайна.

У кого-нибудь есть идея, как этого добиться?

Вот пример, который дополнительно иллюстрирует проблему.

 var toolbarOptions = [[{ 'header': [1, 2, 3, 4, 5, 6, false] }, 'bold', 'italic', 'underline', { 'list': 'bullet' }, { 'color': [] }, { 'background': [] }, { 'align': [] }]];
var quill = new Quill('.editor', {
    theme: 'snow',
    bounds: '.left',
    modules:
    {
        toolbar: toolbarOptions
    }
});
this.quill = quill;
this.quill.root.innerHTML = "Type in here until you get a second line the quill editor... it will happen eventually";  
 .container
{
  display: flex;
  flex-direction: initial;
}
.left
{
  display: flex;
  flex-direction: column;
}
.right
{
  display: flex;
}

.ql-editor
{
  overflow-wrap: anywhere;
}  
 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div class="container">
  <div class="left">
    <div class="editor">
    </div>
  </div>
  <div class="right">
    Just a place holder
  </div>
</div>

Ответ №1:

Вы можете установить .left flex: 1 (я также добавил padding , чтобы дать ему немного места), чтобы ограничить его рост (Подробнее).

 var toolbarOptions = [
  [{
    'header': [1, 2, 3, 4, 5, 6, false]
  }, 'bold', 'italic', 'underline', {
    'list': 'bullet'
  }, {
    'color': []
  }, {
    'background': []
  }, {
    'align': []
  }]
];
var quill = new Quill('.editor', {
  theme: 'snow',
  bounds: '.left',
  modules: {
    toolbar: toolbarOptions
  }
});
this.quill = quill;
this.quill.root.innerHTML = "Type in here until you get a second line the quill editor... it will happen eventually";  
 .container {
  display: flex;
  flex-direction: initial;
}

.left {
  display: flex;
  padding-right: 5px;
  flex-direction: column;
  flex: 1;
}

.right {
  display: flex;
}

.ql-editor {
  overflow-wrap: anywhere;
}

.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
  word-break: break-all;
}  
 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div class="container">
  <div class="left">
    <div class="editor">
    </div>
  </div>
  <div class="right">
    Just a place holder
  </div>
</div>

Комментарии:

1. Неплохое решение, хотя я бы хотел, чтобы оно прерывалось в середине слова, если это необходимо. Набрав 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333 в поле расширяет его права, а не нарушая слово, как в этом поле для комментариев.

2. Я ничего не нашел в документах об этом, и tbh, мне не нравится контролировать поведение сторонних разработчиков, но добавление word-break: break-all; устраняет проблему. Я считаю, что об этом можно сообщить как об ошибке / запросе функции.