iT邦幫忙

0

關於編輯器自訂義 css 階層的問題

  • 分享至 

  • xImage

關於編輯器自訂義 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>
這個看一下,應該是這個沒定義,基本上沒定義就是印不出來
https://www.google.com/search?q=%40media+print
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答