小書匠表格元件使用說明
阿新 • • 發佈：2021-10-16
小書匠表格元件使用說明
教程表格元件小書匠概述
從小書匠 5.6.0 版本開始，添加了表格元件功能。這篇教程主要講解了表格元件的原理及使用。
原有 markdown 表格語法的缺點
- 單元格內不支援多行顯示
- 各種分隔符號，不方便輸入
- 不支援單元格對齊，只能對齊到列
- 無法巢狀表格
- 無法控制表格大小，特別是單元格，只能根據表格內容或者
css樣式調整
優點
- 支援表格內換行
- 支援合併單元格
- 支援表格巢狀
- 表格大小自定義
缺點
- 目前只有小書匠編輯器的解析引擎支援表格元件，在其他編輯器上不相容
- 需要自己單獨建立一個帶表格的 HTML 檔案
表格元件的工作原理
表格元件其實就是一個包含了表格(table 標籤)的 HTML 檔案。只要該 HTML 副檔名為 .table.html 或者 .table ，並做為該 markdown 文章的附件，通過 markdown 的圖片語法進行引用，系統就會將該 markdown 文章裡原本應該顯示一張圖片的內容替換成 HTML 檔案裡 table 標籤範圍內的資料。
實現表格元件條件
- 副檔名為
.table或者.table.html的檔案 - markdown 文章的附件，也就是以
./開頭的連結引用 - HTML 檔案內包含表格
table標籤 - 必須是塊級圖片語法(也就是圖片語法的上下各空一行，前後不能有其他文字)
什麼是塊級圖片語法
所謂塊級圖片語法，是指在圖片語法的前後不能有其他字元，並且上下各空一行。
類似下面的都不是塊級圖片語法
- 上面一行包含了文字
- 
- 前面包含了文字後面也包含了文字
下面的才是標準的塊級圖片語法
- 上面空一行
- 
- 下面也空一行
表格元件語法示例
表格元件的語法使用的是 markdown 圖片語法，唯一需要注意的是表格元件只能通過小書匠的上傳入口，也就是內建資料庫裡的附件做為檔案。圖片語法裡的副檔名以 .table 或者 .table.html 結尾的檔案，才會被解析成表格元件。同時表格元件裡的內容格式是需要標準的 html 片段，但不能包含 javascript
css 程式碼。解析器會自動過濾掉這些程式碼，再從 html 片段裡提取出第一個帶有表格標籤的 html 塊。
表格元件只能在塊級的圖片語法裡生效，也就是在圖片語法裡要前後各空一行。
下面的程式碼是不會被解析成表格元件，而是當做普通的圖片來處理
- # 不會生效的表格元件 
下面的程式碼會把檔案裡的表格資料解析出來
- # 上下要各空一行
- 
新增一個表格元件步驟
- 使用其他編輯器，準備好一個帶
table標籤的 HTML 檔案，我們這裡可以命名檔名為demo.table.html。
- <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內的表格檔案了。
檢視生成效果
檢視生成效果