關於編輯器自訂義 css 階層的問題
目前我在編輯器上面有自訂義 css 階層
$(document).ready(function(){
var new_css="";
var ns="";
//以下排序為 壹 , 一 , 1 , I , i , A ,
var new_css_array=["trad-chinese-formal","cjk-decimal","decimal","decimal","upper-latin","upper-latin","lower-latin"];
var iii = 1;
new_css_array.forEach(function(ele,index){
//console.log(ele);
if(iii %2 !=0 ){
new_css+=".ql-editor ol li.ql-indent-"+index+"::before { content: counter(list-"+index+", "+ele+") '.' !important;}"
} else {
new_css+=".ql-editor ol li.ql-indent-"+index+"::before { content:'('counter(list-"+index+", "+ele+")')' !important;width: 4rem; padding-right:12px;}"
}
iii = index;
//console.log(iii);
});
$('head').append("<style>white-space: normal;"+new_css+"</style>");
});
然後呈現的方式會是這樣
一、 測試測試
二、 測試測試
(一)、測試測試
(二)、測試測試
1. 測試測試
2. 測試測試
(1). 測試測試
(2). 測試測試
A. 測試測試
B. 測試測試
(A). 測試測試
(B). 測試測試
a. 測試測試
b. 測試測試
但是當我再列印的時候 階層不會顯示了
應該是沒帶入到 CSS?
那我該怎麼再列印的地方 帶入我的自訂義 CSS?
目前我的寫法是這樣
data: function () {
return {
printid: "",
pid: "",
array_data: [],
cssText: `
body {
font: inherit !important; // 繼承父層送過來的 font 格式
color: black;
}
.ql-editor *{
font-family: cwTeXKai !important;
}
table {
width: 90%;
border-collapse: collapse;
margin-top: 18pt;
border: solid 1pt;
}
td {
border: solid 1pt;
}
.fontsize-18 {
font-size: 18px;
}
.fontsize-16 {
font-size: 16px;
}
.fontsize-12 {
font-size: 12px;
}
.col_a {
width: 37pt;
border-left: none;
padding: 0cm 5.4pt 0cm 5.4pt;
}
.col_ad {
width: 37pt;
border-top: none;
border-left: none;
padding: 0cm 5.4pt 0cm 5.4pt;
}
p {
font-family: cwTeXKai !important;
display: block;
margin-block-start: .03em;
margin-block-end: .03em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
span{
font-family: cwTeXKai !important;
}
@page {
size: A4 portrait;
}
資料庫紀錄是這樣的
<ol><li>測試測試</li><li>測試測試</li><li class="ql-indent-1">測試測試</li><li class="ql-indent-1">測試測試</li><li class="ql-indent-2">測試測試</li><li class="ql-indent-2">測試測試</li><li class="ql-indent-3">測試測試</li><li class="ql-indent-3">測試測試</li><li class="ql-indent-4">測試測試</li><li class="ql-indent-4">測試測試</li><li class="ql-indent-5">測試測試</li><li class="ql-indent-5">測試測試</li><li class="ql-indent-6">測試測試</li><li class="ql-indent-6">測試測試</li></ol><p><br></p>