如何在ckeditor 4中顯示具有不同列表樣式類型的嵌套有序列表？

Question

我維護了一個集成了 CKEDITOR 4 的遺留應用程序。 我正面臨嵌套有序列表的顯示問題。 用戶使用項目符號列表插件以這種方式添加了一個有序列表。

請參考截圖。

可以使用源按鈕查看此 HTML 代碼的源代碼。 這是源的樣子：

但是當用戶在查看模式下查看有序列表時，它沒有按預期顯示。 請參考這里的截圖：

在視圖頁面中，我的應用程序中使用了許多其他 css 文件，這些文件影響了輸出。

div.docSection ol li {
  /* list-style-type: decimal;  Commenting this line is solving the problem */ 
  margin: auto;
  margin-left: 2.0em;
  padding: 0em;
}
.sectionDiv li {
  padding: 0;
  padding-left: 2em;
  margin: 0;
  margin-bottom: 0.2em;
  margin-right: 1em;
  /* list-style: none; Commenting this line is solving the problem */
  line-height: 1.6em;
}

如何確保有序列表顯示在查看模式下不受影響。 CKEDITOR 4 中是否有設置？ 我們可以在 css 規則中解決這個問題嗎？

Answer 1

終於找到了解決這個問題的辦法。 我不得不使用 JQUERY 來解決這個問題。 基本上，我覆蓋了通過本地 css 規則從 Header Css 文件中應用的 css 規則。 以下適用於嵌套有序列表和嵌套無序列表，但不適用於混合嵌套列表。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> jQuery(document).ready(function() { jQuery('div.docSection').find('ol').each( function() { var list_style_type = jQuery( this ).css("list-style-type"); jQuery( this ).find('li').each( function () { jQuery( this ).css("list-style-type", list_style_type); }); }); });