如何在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); }); }); });