循环的quill-editor中.ql-container高度怎么设置为quill-editor高度减去标题栏高度
时间: 2024-11-16 21:20:13 浏览: 26
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
5星 · 资源好评率100%
在Quill Editor中,如果想让`.ql-container`的高度等于编辑区域的高度减去标题栏高度,首先需要获取标题栏的高度。这通常可以通过JavaScript来实现,比如你可以通过计算DOM元素的offsetTop属性来得到。
下面是一个简单的步骤说明:
1. 获取到包含标题栏的容器元素,例如`.ql-toolbar`,并计算其`offsetTop`值。
2. 获取到Quill Editor实例的根容器元素,如`.ql-container`。
3. 减去标题栏高度后,设置`.ql-container`的高度。
这里是一个示例代码片段,假设你已经有了Quill Editor的引用和标题栏元素:
```javascript
// 假设已经创建了Quill实例editor
const toolbar = document.querySelector('.ql-toolbar');
const container = document.querySelector('.ql-container');
// 计算标题栏高度
const headerHeight = toolbar.offsetTop;
// 设置容器高度
container.style.height = `${editor.root.scrollHeight - headerHeight}px`;
```
记得替换上述代码中的选择器以匹配实际HTML结构。执行这个操作后,`.ql-container`的高度就会动态地调整为编辑区的高度减去标题栏高度。
阅读全文