小书匠表格组件使用说明
概述
从小书匠 5.6.0 版本开始,添加了表格组件功能。这篇教程主要讲解了表格组件的原理及使用。
原有 markdown 表格语法的缺点
- 单元格内不支持多行显示
- 各种分隔符号,不方便输入
- 不支持单元格对齐,只能对齐到列
- 无法嵌套表格
- 无法控制表格大小,特别是单元格,只能根据表格内容或者
css
样式调整
优点
- 支持表格内换行
- 支持合并单元格
- 支持表格嵌套
- 表格大小自定义
缺点
- 目前只有小书匠编辑器的解析引擎支持表格组件,在其他编辑器上不兼容
- 需要自己单独创建一个带表格的 HTML 文件
表格组件的工作原理
表格组件其实就是一个包含了表格(table
标签)的 HTML 文件。只要该 HTML 文件扩展名为 .table.html
或者 .table
,并做为该 markdown 文章的附件,通过 markdown 的图片语法进行引用,系统就会将该 markdown 文章里原本应该显示一张图片的内容替换成 HTML 文件里 table
标签范围内的数据。
实现表格组件条件
- 扩展名为
.table
或者.table.html
的文件 - markdown 文章的附件,也就是以
./
开头的链接引用 - HTML 文件内包含表格
table
标签 - 必须是块级图片语法(也就是图片语法的上下各空一行,前后不能有其他文字)
什么是块级图片语法
所谓块级图片语法,是指在图片语法的前后不能有其他字符,并且上下各空一行。
类似下面的都不是块级图片语法
- 上面一行包含了文字
- ![](./a.jpg)
- 前面包含了文字![](./a.jpg)后面也包含了文字
下面的才是标准的块级图片语法
- 上面空一行
- ![](./a.jpg)
- 下面也空一行
表格组件语法示例
表格组件的语法使用的是 markdown 图片语法,唯一需要注意的是表格组件只能通过小书匠的上传入口,也就是内置数据库里的附件做为文件。图片语法里的文件扩展名以 .table
或者 .table.html
结尾的文件,才会被解析成表格组件。同时表格组件里的内容格式是需要标准的 html 片段,但不能包含 javascript
脚本 和 css
代码。解析器会自动过滤掉这些代码,再从 html 片段里提取出第一个带有表格标签的 html
块。
表格组件只能在块级的图片语法里生效,也就是在图片语法里要前后各空一行。
下面的代码是不会被解析成表格组件,而是当做普通的图片来处理
- # 不会生效的表格组件 ![](./demo.table.html)
下面的代码会把文件里的表格数据解析出来
- # 上下要各空一行
- ![](./demo.table.html)
添加一个表格组件步骤
- 使用其他编辑器,准备好一个带
table
标签的 HTML 文件,我们这里可以命名文件名为demo.table.html
。
demo.table.htmlhtml 20行
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <table style="border-collapse: collapse;" border=1>
- <tr>
- <td rowspan=2>合并单元格</td>
- <td>demo</td>
- <td>demo</td>
- </tr>
- <tr>
- <td colspan=2>合并单元格</td>
- </tr>
- </table>
-
- </body>
- </html>
- 在小书匠编辑器里,新建一篇 markdown 文章,然后直接把刚才创建的
demo.table.html
拖拽到编辑器内。 - 完成。可以直接在预览窗口内查看
demo.table.html
内的表格文件了。