Quill Editor 和 Flexbox 元素

Question

场景两个 flexbox 元素并排放置在一个容器中，左侧元素中有羽毛笔。 Quill 将边界设置为左侧元素，而不是 document.body 和 overflow-wrap 添加到 .ql-editor class.

问题当 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>

Answer 1

你可以设置.leftflex: 1（我还加了padding给它一些space）来限制它的增长（More info）。

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>

Quill Editor 和 Flexbox 元素

Quill Editor and Flexbox Elements

jquery

css

flexbox

quill