是否可以在Quilljs编辑器中显示文本区域下方的工具栏选项？
是否可以在Quilljs编辑器中显示文本区域下方的工具栏选项？
提问于 2018-05-28 19:48:25
如何在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>
以上代码的输出：
我希望输出如下：
如何实现上述结果。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-28 20:51:18
我不明白为什么不只使用css。
如下所示：
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'
});#editor-container {
height: 375px;
}
.editor-wrapper {
position: relative;
}
.ql-toolbar {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(100%);
}<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>
Stack Overflow用户
发布于 2018-11-02 00:42:35
这样做是可行的：
.ql-container {
display: flex;
flex-direction: column-reverse;
}Stack Overflow用户
发布于 2020-11-05 03:36:53
您可以使用flexbox来实现这一点。下面这样的代码应该能起到作用：
<div class="d-flex flex-column-reverse">
<div id="quill-editor"></div>
</div>还要记住，您需要更新Quill css样式(边框等)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50565719
复制相关文章
相似问题
腾讯云开发者
