如何在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>
上面代码的输出:
我希望输出如下:
如何实现上述结果。
4条答案
按热度按时间z3yyvxxp1#
这就是诀窍:
wz1wpwve2#
我不明白为什么不使用CSS。
大概是这样的
https://codepen.io/moshfeu/pen/wXwqmg
ldfqzlk83#
你可以使用flexbox来实现这一点。像这样的东西应该可以做到这一点:
还要记住你需要更新QuillCSS样式(边框等)
g6ll5ycj4#