Html TinyMce 中的嵌套订单列表

Question

我想在 tinyMce 中创建 html 嵌套有序列表。我希望它如何显示的示例是结构 below.I 在 TinyMce 中获取此结果时遇到的问题。在 TinyMce 中，列表无法显示为 1.1,1.2。它显示为 1,2.

1.Topic
  1.1 Subtopic 1
  1.2 Subtopic 2

我不用tinymce也能达到这个效果。但是，在 tinymce 中运行时失败。

没有 TinyMce

<!DOCTYPE html>
<html>
 <head>
  <style>
   ol 
   { 
    counter-reset: item 
   }
   li
   { 
    display: block 
   }
   li:before 
   { 
    content: counters(item, ".") " "; counter-increment: item 
   }
   
  </style>
 </head>
 <body>
     
  <ol>
    <li>li element
      <ol>
        <li>sub li element</li>
        <li>sub li element</li>
        <li>sub li element</li>
      </ol>
    </li>
    <li>li element</li>
    <li>li element
      <ol>
        <li>sub li element</li>
        <li>sub li element</li>
        <li>sub li element</li>
      </ol>
    </li>
 </ol>  
 </body>
</html>

使用 TinyMce

    <!DOCTYPE html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.16/tinymce.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      tinymce.init({
        selector: 'textarea#full-featured-non-premium',
        plugins: 'print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
        imagetools_cors_hosts: ['picsum.photos'],
        menubar: 'file edit view insert format tools table help',
        toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
        toolbar_sticky: true,
        autosave_ask_before_unload: true,
        autosave_interval: "30s",
        autosave_prefix: "{path}{query}-{id}-",
        autosave_restore_when_empty: false,
        autosave_retention: "2m",
        image_advtab: true,
        content_css: [
          //'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
          //'//www.tiny.cloud/css/codepen.min.css'
          //'../../library/tinymce/css/font.css',
          //'../../library/tinymce/css/style.css'
          'css/style.css'
        ],
        link_list: [{
            title: 'My page 1',
            value: 'http://www.tinymce.com'
          },
          {
            title: 'My page 2',
            value: 'http://www.moxiecode.com'
          }
        ],
        image_list: [{
            title: 'My page 1',
            value: 'http://www.tinymce.com'
          },
          {
            title: 'My page 2',
            value: 'http://www.moxiecode.com'
          }
        ],
        image_class_list: [{
            title: 'None',
            value: ''
          },
          {
            title: 'Some class',
            value: 'class-name'
          }
        ],
        importcss_append: true,
        height: 400,
        file_picker_callback: function(callback, value, meta) {
          /* Provide file and text for the link dialog */
          if (meta.filetype === 'file') {
            callback('https://www.google.com/logos/google.jpg', {
              text: 'My text'
            });
          }

          /* Provide image and alt text for the image dialog */
          if (meta.filetype === 'image') {
            callback('https://www.google.com/logos/google.jpg', {
              alt: 'My alt text'
            });
          }

          /* Provide alternative source and posted for the media dialog */
          if (meta.filetype === 'media') {
            callback('movie.mp4', {
              source2: 'alt.ogg',
              poster: 'https://www.google.com/logos/google.jpg'
            });
          }
        },
        templates: [{
            title: 'New Table',
            description: 'creates a new table',
            content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
          },
          {
            title: 'Starting my story',
            description: 'A cure for writers block',
            content: 'Once upon a time...'
          },
          {
            title: 'New list with dates',
            description: 'New List with dates',
            content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
          }
        ],
        template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
        template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
        height: 600,
        image_caption: true,
        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
        noneditable_noneditable_class: "mceNonEditable",
        toolbar_drawer: 'sliding',
        contextmenu: "link image imagetools table",
      });


    });
  </script>
  <style>
    ol {
      counter-reset: item
    }

    li {
      display: block
    }

    li:before {
      content: counters(item, ".") " ";
      counter-increment: item
    }
  </style>
</head>

<body>
  <textarea id="full-featured-non-premium" name="full-featured-non-premium">      
        <ol>
          <li>li element
            <ol>
              <li>sub li element</li>
              <li>sub li element</li>
              <li>sub li element</li>
            </ol>
          </li>
          <li>li element</li>
          <li>li element
            <ol>
              <li>sub li element</li>
              <li>sub li element</li>
              <li>sub li element</li>
            </ol>
          </li>
    </ol>

        </textarea>
</body>

</html>

我想知道如何在 TinyMce 中做像 1.1,1.2 这样的列表。提前致谢。

Answer 1

正如您正确指出的那样，要获得您想要的标记，您需要使用 CSS。 HTML 中没有您想要的原生标记类型。

您可以通过 content_css 设置将 CSS 传递到 TinyMCE 中，然后将类应用到您的列表以按照您的喜好设置样式。您可以定义人们可以通过 style_formats 选项应用的样式。

https://www.tiny.cloud/docs/configure/content-appearance/#content_css https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats

Html TinyMce 中的嵌套订单列表

Html Nested Order List in TinyMce

html

tinymce