具有不同编号样式的 TinyMce 嵌套有序列表十进制编号

Question

背景

Tinymce 编辑器支持嵌套编号列表。编辑器自然可以做到这一点，

现在要求是这样显示数字，

到目前为止

这可以通过使用以下列表样式修改与编辑器关联的样式表来实现（来自答案）

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

问题

现在的问题是，如果我 select 一些其他数字格式（例如编辑器中的低希腊语，它看起来如下）

如何让嵌套列表也使用与父列表相同的格式？

Answer 1

这是问题的解决方案，

ol {
  counter-reset: item
}

ol li {
  display: block
}

ol li:before {
  content: counters(item, ".") ". ";
  counter-increment: item
}

ol[style*="list-style-type: lower-alpha;"] li:before {
  content: counters(item, ".", lower-alpha) ". ";
  counter-increment: item
}

<ol>
  <li>Level 1</li>
  <li>Level 1
    <ol>
      <li>Level 2</li>
      <li>Level 2</li>
      <li>Level 2
        <ol>
          <li>Level 3</li>
          <li>Level 3</li>
          <li>Level 3
            <ol>
              <li>Level 4</li>
              <li>Level 4</li>
              <li>Level 4</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Level 1</li>
  <li>Level 1</li>
</ol>

具有不同编号样式的 TinyMce 嵌套有序列表十进制编号

TinyMce nested ordered list decimal numbering with different numbering styles

html

css

tinymce-4