ESI-HTML-DOCX/ckeditor5-export
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🪑 table style pre-processing before inquiries for docx, with time table examples ✨

Browse Source
This commit is contained in:
Sahatsawat Kanpai 2025-01-15 15:34:07 +07:00
parent d41d9d2ac8
commit 5a0359dcea
2 changed files with 80 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
sample/index.html
View File

@ -26,26 +26,64 @@
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ถ้าจะต้องรายงาน</span><span <p><span style="font-family:'Angsana New', serif;font-size:16pt;">ถ้าจะต้องรายงาน</span><span
style="color:#4d8db0;font-family:'Angsana New', serif;font-size:16pt;"><strong><u>ค่าเฉลี่ย</u></strong></span><span style="color:#4d8db0;font-family:'Angsana New', serif;font-size:16pt;"><strong><u>ค่าเฉลี่ย</u></strong></span><span
style="font-family:'Angsana New', serif;font-size:16pt;">ของการวัดความยาวครั้งนี้&nbsp;</span><span style="font-family:'Angsana New', serif;font-size:16pt;">ของการวัดความยาวครั้งนี้&nbsp;</span><span
style="font-size:16pt;"> style="font-size:16pt;">&nbsp;&nbsp;
<script type="math/tex">\left(\overline{x}\right)</script> <script type="math/tex">\left(\overline{x}\right)</script>&nbsp;
</span><span </span><span
style="font-family:'Angsana New', serif;font-size:16pt;">&nbsp;และรายงานความคลายเคลื่อนของความยาวเฉลี่ย&nbsp;</span><span style="font-family:'Angsana New', serif;font-size:16pt;">และรายงานความคลายเคลื่อนของความยาวเฉลี่ย&nbsp;</span><span
style="font-size:16pt;"> style="font-size:16pt;">&nbsp;&nbsp;
<script type="math/tex">\left(\Delta\overline{x}\right)</script> <script type="math/tex">\left(\Delta\overline{x}\right)</script>&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">&nbsp;ด้วยสูตร</span></p> </span><span style="font-family:'Angsana New', serif;font-size:16pt;">ด้วยสูตร</span></p>
<p style="text-align:center;"><span style="font-size:16pt;"> <p style="text-align:center;"><span style="font-size:16pt;">
<script type="math/tex">\Delta\overline{x}=\frac{x_{\max}-x_{\min}}{2}</script> <script type="math/tex">\Delta\overline{x}=\frac{x_{\max}-x_{\min}}{2}</script>&nbsp;&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">&nbsp;</span></p> </span><span style="font-family:'Angsana New', serif;font-size:16pt;">&nbsp;</span></p>
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">เมื่อ&nbsp;</span><span style="font-size:16pt;"> <p><span style="font-family:'Angsana New', serif;font-size:16pt;">เมื่อ&nbsp;</span><span
<script type="math/tex">x_{\max}</script> style="font-size:16pt;">&nbsp;&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">&nbsp;และ&nbsp;</span><span <script type="math/tex">x_{\max}</script>&nbsp;
style="font-size:16pt;"> </span><span style="font-family:'Angsana New', serif;font-size:16pt;">และ&nbsp;</span><span
<script type="math/tex">x_{\min}</script> style="font-size:16pt;">&nbsp;&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">&nbsp;คือ ค่าที่มากที่สุด <script type="math/tex">x_{\min}</script>&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">คือ ค่าที่มากที่สุด
และค่าที่น้อยที่สุดของข้อมูล ตามลำดับ</span></p> และค่าที่น้อยที่สุดของข้อมูล ตามลำดับ</span></p>
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ข้อใดแสดงผลการรายงานการวัดความยาว</span><span <p><span style="font-family:'Angsana New', serif;font-size:16pt;">ข้อใดแสดงผลการรายงานการวัดความยาว</span><span
style="color:#7ccc7b;font-family:'Angsana New', serif;font-size:16pt;"><i><strong><u>ได้ถูกต้อง</u></strong></i></span> style="color:#7ccc7b;font-family:'Angsana New', serif;font-size:16pt;"><i><strong><u>ได้ถูกต้อง</u></strong></i></span>
</p> </p>
<figure class="table">
<table>
<thead>
<tr>
<th colspan="2">ตารางเรียน</th>
<th colspan="3">ปีการศึกษา 2567 ภาคปลาย (Spring2024)</th>
</tr>
</thead>
<tbody>
<tr>
<th>วัน</th>
<th>เวลา</th>
<td>0900 - 1200</td>
<td>1300 - 1600</td>
<td>1630 - 1900</td>
</tr>
<tr>
<th colspan="2">วันพฤหัส</th>
<td>Prob Stat</td>
<td>Seminar</td>
<td>ComSys Security</td>
</tr>
<tr>
<th colspan="2">lathmive</th>
<td>
<script type="math/tex">\sum_{0\le i \le m \atop 0 < j < n}P\left(i,j\right)</script>
</td>
<td>
<script type="math/tex">\prod_{k=1}^{n}A_k</script>
</td>
<td>
<script type="math/tex">\bigcup_{n=1}^{m}\left(X_n\cap Y_n\right)</script>
</td>
</tr>
</tbody>
</table>
</figure>
</div> </div>
<script src="./ckeditor.dist.js"></script> <script src="./ckeditor.dist.js"></script>

29
src/export.ts
View File

@ -52,12 +52,41 @@ export default class Export extends Plugin {
const parser = new DOMParser(); const parser = new DOMParser();
const doc = parser.parseFromString(this.editor.getData(), "text/html"); const doc = parser.parseFromString(this.editor.getData(), "text/html");
// pre-process mathlive script to html MathML tag with the help of temml
for (const mathliveElement of doc.querySelectorAll('script[type="math/tex"]')) { for (const mathliveElement of doc.querySelectorAll('script[type="math/tex"]')) {
const temmlWrapperElement = document.createElement('span'); const temmlWrapperElement = document.createElement('span');
const temmlMathMLString = Temml.render(mathliveElement.textContent ?? "", temmlWrapperElement); const temmlMathMLString = Temml.render(mathliveElement.textContent ?? "", temmlWrapperElement);
mathliveElement.replaceWith(temmlWrapperElement); mathliveElement.replaceWith(temmlWrapperElement);
} }
// pre-process for table
for (const table of doc.querySelectorAll('table')) {
// pre-process table for border and centering and inner border
table.style.borderCollapse = 'collapse';
table.style.borderSpacing = '0';
table.style.border = '1px solid #b3b3b3';
table.style.margin = 'auto';
// pre-process table for padding
for (const td of table.querySelectorAll('td')) {
td.style.padding = '8px';
}
// pre-process table for inner border
for (const tr of table.querySelectorAll('tr')) {
for (const td of tr.querySelectorAll('td')) {
td.style.border = '1px solid #b3b3b3';
}
}
// pre-process table for header background color rgba(0,0,0,.05) to hex #f2f2f2
// and it's own border
// and padding
const ths = table.querySelectorAll('th');
for (const th of ths) {
th.style.backgroundColor = '#f2f2f2';
th.style.border = '1px solid #b3b3b3';
th.style.padding = '8px';
}
}
console.log(doc.body.innerHTML); console.log(doc.body.innerHTML);
fetch('http://localhost:8080/aspose/html-to-word', { fetch('http://localhost:8080/aspose/html-to-word', {