quill-editor表格
时间: 2023-08-27 08:04:56 浏览: 44
Quill Editor 可以通过插件来添加表格功能。
1. 引入 quill-table-extended 插件
```
import Quill from 'quill';
import TableExtended from 'quill-table-extended';
Quill.register('modules/tableExtended', TableExtended);
```
2. 在 Quill 的 options 中添加 tableExtended 模块
```
const options = {
modules: {
tableExtended: {
tableClassName: 'table'
},
// 其他模块...
},
// 其他选项...
}
```
3. 在需要添加表格的地方,使用 insertTable 方法
```
const quill = new Quill(container, options);
quill.getModule('tableExtended').insertTable(rows, columns);
```
其中,`rows` 为行数,`columns` 为列数。
完整示例:
```
import Quill from 'quill';
import TableExtended from 'quill-table-extended';
Quill.register('modules/tableExtended', TableExtended);
const container = document.getElementById('editor');
const options = {
modules: {
tableExtended: {
tableClassName: 'table'
}
},
theme: 'snow'
};
const quill = new Quill(container, options);
quill.getModule('tableExtended').insertTable(3, 3); // 添加一个 3 行 3 列的表格
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)