quill添加表格
时间: 2023-09-25 11:12:24 浏览: 50
动态添加表格
3星 · 编辑精心推荐
要在Quill中添加表格,你需要使用Quill的table模块。以下是添加一个3列2行的表格的示例代码:
```
<div id="toolbar">
<button class="ql-table"></button>
</div>
<div id="editor">
<p>Insert table below:</p>
</div>
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: '#toolbar',
table: true
},
theme: 'snow'
});
</script>
```
上面的代码将在Quill编辑器中添加一个工具栏按钮,点击该按钮将会在光标位置下方插入一个3列2行的表格。你可以根据需要调整表格的行数和列数。
要进一步自定义表格,可以使用Quill的table模块提供的方法。例如,要设置表格的宽度和边框样式,可以使用以下代码:
```
quill.getModule('table').insertTable(3, 2, {
tableLayout: 'fixed',
widths: ['33%', '33%', '33%'],
borderStyle: 'solid',
borderWidth: '1px',
borderColor: '#ccc'
});
```
这将插入一个3列2行的表格,每列宽度为33%,边框样式为实线,宽度为1像素,颜色为灰色。
阅读全文