首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否可以在Quilljs编辑器中显示文本区域下方的工具栏选项?

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

Stack Overflow用户
提问于 2018-05-28 19:48:25
回答 3查看 2.5K关注 0票数 3

如何在textarea下显示工具栏。

我的代码:

代码语言:javascript
复制
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;
代码语言:javascript
复制
<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>

以上代码的输出:

我希望输出如下:

如何实现上述结果。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-05-28 20:51:18

我不明白为什么不只使用css。

如下所示:

代码语言:javascript
复制
var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});
代码语言:javascript
复制
#editor-container {
  height: 375px;
}

.editor-wrapper {
  position: relative;
}

.ql-toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
}
代码语言:javascript
复制
<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 class="editor-wrapper">
  <div id="editor-container">
  </div>
</div>

https://codepen.io/moshfeu/pen/wXwqmg

票数 1
EN

Stack Overflow用户

发布于 2018-11-02 00:42:35

这样做是可行的:

代码语言:javascript
复制
.ql-container {
  display: flex;
  flex-direction: column-reverse; 
}
票数 5
EN

Stack Overflow用户

发布于 2020-11-05 03:36:53

您可以使用flexbox来实现这一点。下面这样的代码应该能起到作用:

代码语言:javascript
复制
<div class="d-flex flex-column-reverse">
   <div id="quill-editor"></div>
</div>

还要记住,您需要更新Quill css样式(边框等)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50565719

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档