javascript - 是否可以在 Quilljs 编辑器中的文本区域下方显示工具栏选项？

Question

如何在textarea下方显示工具栏。

我的代码:

var quill = new Quill('#txtMessage', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline'],
        [{
          'list': 'ordered'
        }, {
          'list': 'bullet'
        }],
        ['clean'],
        ['code-block'],
        [{
          'variables': ['{Name}', '{Email}']
        }],
      ],
      handlers: {
        "variables": function(value) {
          if (value) {
            const cursorPosition = this.quill.getSelection().index;
            this.quill.insertText(cursorPosition, value);
            this.quill.setSelection(cursorPosition + value.length);
          }
        }
      }
    }
  }
});

// Variables
const placeholderPickerItems = Array.prototype.slice.call(document.querySelectorAll('.ql-variables .ql-picker-item'));
placeholderPickerItems.forEach(item => item.textContent = item.dataset.value);
document.querySelector('.ql-variables .ql-picker-label').innerHTML = 'Variables' + document.querySelector('.ql-variables .ql-picker-label').innerHTML;

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet"/>

<div id="txtMessage"></div>

以上代码的输出:

我想要输出如下: 如何实现以上结果。

Answer 1

这就是诀窍:

.ql-container {
  display: flex;
  flex-direction: column-reverse; 
}