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

⚠ javascript/typescript dom do not touch doc.style. because it will turns the content to escaping characters and cannot process furthur more for put those into ckeditor support, because even using .replace or try to change those escaping characters will also not working for them and no way to apply on them anymore for examples " which is for single quote '

Browse Source
This commit is contained in:
Sahatsawat Kanpai 2025-01-20 21:45:18 +07:00
parent f34d56ca83
commit a0b4713b0c
3 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
sample/ckeditor.ts
View File

@ -140,19 +140,22 @@ ClassicEditor
fontFamily: { fontFamily: {
options: [ options: [
'default', 'default',
'Arial, sans-serif', // let's add some microsoft word fonts by dictionary but not too much
'Georgia, serif', 'Angsana New',
'Impact, Charcoal, sans-serif', 'AngsanaUPC',
'Lucida Console, Monaco, monospace', 'Arial',
'Lucida Sans Unicode, Lucida Grande, sans-serif', 'EucrosiaUPC',
'Tahoma, Geneva, sans-serif', 'FreesiaUPC',
'Times New Roman, Times, serif', 'JasmineUPC',
'Trebuchet MS, Helvetica, sans-serif', 'KodchiangUPC',
'Verdana, Geneva, sans-serif', 'Leelawadee',
'TH Sarabun New, sans-serif', 'Leelawadee UI',
'Angsana New, serif', 'Microsoft Sans Serif',
'EucrosiaUPC, serif', 'PMingLiU',
'Noto Sans Thai, sans-serif' 'Tahoma',
'Times New Roman',
'Trebuchet MS',
'Verdana'
] ]
}, },
mathlive: { mathlive: {

26
sample/index.html
View File

@ -19,33 +19,33 @@
<h1>CKEditor 5 – Development Sample</h1> <h1>CKEditor 5 – Development Sample</h1>
<div id="editor"> <div id="editor">
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ในการทดลองวัดความยาวของวัตถุชิ้นหนึ่งที่มีความยาวประมาณ <p><span style="font-family:'Angsana New';font-size:16pt;">ในการทดลองวัดความยาวของวัตถุชิ้นหนึ่งที่มีความยาวประมาณ
6 เซนติเมตร ด้วยไม้บรรทัดที่มีความละเอียด 0.1 เซนติเมตร โดยทำการวัดทั้งหมด 5 ครั้ง ได้ข้อมูลดังนี้</span></p> 6 เซนติเมตร ด้วยไม้บรรทัดที่มีความละเอียด 0.1 เซนติเมตร โดยทำการวัดทั้งหมด 5 ครั้ง ได้ข้อมูลดังนี้</span></p>
<p style="text-align:center;"><span style="font-family:'Angsana New', serif;font-size:16pt;">5.84 6.00 6.26 5.90 <p style="text-align:center;"><span style="font-family:'Angsana New';font-size:16pt;">5.84 6.00 6.26 5.90
12.25</span></p> 12.25</span></p>
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">ถ้าจะต้องรายงาน</span><span <p><span style="font-family:'Angsana New';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';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';font-size:16pt;">ของการวัดความยาวครั้งนี้&nbsp;</span><span
style="font-size:16pt;">&nbsp;&nbsp; style="font-size:16pt;">&nbsp;&nbsp;
<script type="math/tex">\left(\overline{x}\right)</script>&nbsp; <script type="math/tex">\left(\overline{x}\right)</script>&nbsp;
</span><span </span><span
style="font-family:'Angsana New', serif;font-size:16pt;">และรายงานความคลายเคลื่อนของความยาวเฉลี่ย&nbsp;</span><span style="font-family:'Angsana New';font-size:16pt;">และรายงานความคลายเคลื่อนของความยาวเฉลี่ย&nbsp;</span><span
style="font-size:16pt;">&nbsp;&nbsp; style="font-size:16pt;">&nbsp;&nbsp;
<script type="math/tex">\left(\Delta\overline{x}\right)</script>&nbsp; <script type="math/tex">\left(\Delta\overline{x}\right)</script>&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">ด้วยสูตร</span></p> </span><span style="font-family:'Angsana New';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>&nbsp;&nbsp; <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';font-size:16pt;">&nbsp;</span></p>
<p><span style="font-family:'Angsana New', serif;font-size:16pt;">เมื่อ&nbsp;</span><span <p><span style="font-family:'Angsana New';font-size:16pt;">เมื่อ&nbsp;</span><span
style="font-size:16pt;">&nbsp;&nbsp; style="font-size:16pt;">&nbsp;&nbsp;
<script type="math/tex">x_{\max}</script>&nbsp; <script type="math/tex">x_{\max}</script>&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">และ&nbsp;</span><span </span><span style="font-family:'Angsana New';font-size:16pt;">และ&nbsp;</span><span
style="font-size:16pt;">&nbsp;&nbsp; style="font-size:16pt;">&nbsp;&nbsp;
<script type="math/tex">x_{\min}</script>&nbsp; <script type="math/tex">x_{\min}</script>&nbsp;
</span><span style="font-family:'Angsana New', serif;font-size:16pt;">คือ ค่าที่มากที่สุด </span><span style="font-family:'Angsana New';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';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';font-size:16pt;"><i><strong><u>ได้ถูกต้อง</u></strong></i></span>
</p> </p>
<figure class="table"> <figure class="table">
<table> <table>

4
src/import.ts
View File

@ -79,13 +79,13 @@ export default class Import extends Plugin {
// font-family for <span> concat with , serif // font-family for <span> concat with , serif
const spans = body.querySelectorAll("span"); const spans = body.querySelectorAll("span");
spans.forEach(span => { spans.forEach(span => {
span.style.fontFamily += ", serif"; // span.style.fontFamily += ", serif";
// check if it's <p> tag has font-size attribute, then apply to <span> tag // check if it's <p> tag has font-size attribute, then apply to <span> tag
const p = span.parentElement; const p = span.parentElement;
if (p && p.tagName === "P") { if (p && p.tagName === "P") {
const fontSize = p.style.fontSize; const fontSize = p.style.fontSize;
if (fontSize) { if (fontSize) {
span.style.fontSize = fontSize; span.setAttribute("style", `${span.getAttribute("style")}; font-size: ${fontSize}`);
} }
} }
}); });