⚠ 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 '

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

View File

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

View File

@ -19,33 +19,33 @@
<h1>CKEditor 5 Development Sample</h1>
<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>
<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>
<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="font-family:'Angsana New', serif;font-size:16pt;">ของการวัดความยาวครั้งนี้&nbsp;</span><span
<p><span style="font-family:'Angsana New';font-size:16pt;">ถ้าจะต้องรายงาน</span><span
style="color:#4d8db0;font-family:'Angsana New';font-size:16pt;"><strong><u>ค่าเฉลี่ย</u></strong></span><span
style="font-family:'Angsana New';font-size:16pt;">ของการวัดความยาวครั้งนี้&nbsp;</span><span
style="font-size:16pt;">&nbsp;&nbsp;
<script type="math/tex">\left(\overline{x}\right)</script>&nbsp;
</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;
<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;">
<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>
<p><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></p>
<p><span style="font-family:'Angsana New';font-size:16pt;">เมื่อ&nbsp;</span><span
style="font-size:16pt;">&nbsp;&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;
<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>
<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>
<p><span style="font-family:'Angsana New';font-size:16pt;">ข้อใดแสดงผลการรายงานการวัดความยาว</span><span
style="color:#7ccc7b;font-family:'Angsana New';font-size:16pt;"><i><strong><u>ได้ถูกต้อง</u></strong></i></span>
</p>
<figure class="table">
<table>

View File

@ -79,13 +79,13 @@ export default class Import extends Plugin {
// font-family for <span> concat with , serif
const spans = body.querySelectorAll("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
const p = span.parentElement;
if (p && p.tagName === "P") {
const fontSize = p.style.fontSize;
if (fontSize) {
span.style.fontSize = fontSize;
span.setAttribute("style", `${span.getAttribute("style")}; font-size: ${fontSize}`);
}
}
});