Summernote - 有序列表和无序列表不起作用

Posted

技术标签:

【中文标题】Summernote - 有序列表和无序列表不起作用【英文标题】:Summernote - Orderlist and unorder list is not working 【发布时间】:2021-02-07 14:46:47 【问题描述】:

我在 laravel 上使用 summernote 包,但问题是 Orderlist 和 unorder list 在那里不起作用。这是我尝试使用的代码。请帮我解决这个问题。

html

<textarea data-feature="all"  class="summernote" data- name="editor"></textarea>

版本:

"summernote": "^0.8.18",

Summernote.js:

import summernote from '../../node_modules/summernote/dist/summernote-lite.js'
import summernoteCss from '../../node_modules/summernote/dist/summernote-lite.css'

(function($)  
    "use strict";
        
    // Summernote
    $('.summernote').each(function() 
        let options = 
            placeholder: 'Hello stand alone ui',
            tabsize: 2,
            height: 120,
            toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'italic']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']]
            ]
        

        if ($(this).data('feature') == 'basic') 
            options.toolbar = [
                ['font', ['bold', 'underline', 'italic']]
            ]
        

        if ($(this).data('feature') == 'all') 
            options.toolbar = [
                ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        

        if ($(this).data('height') !== undefined) 
            options.height = $(this).data('height')
        

        $(this).summernote(options)
    )
)($)

【问题讨论】:

【参考方案1】:

我认为您需要为列表覆盖 css

/* For summernote override unordered and order list */
.note-editable ul
  list-style: disc !important;
  list-style-position: inside !important;


.note-editable ol 
  list-style: decimal !important;
  list-style-position: inside !important;

【讨论】:

以上是关于Summernote - 有序列表和无序列表不起作用的主要内容,如果未能解决你的问题,请参考以下文章

无序列表<ul>和有序列表<ol>

2019-01-23 LaTeX中的有序列表和无序列表

有序列表和无序列表

Markdown基本语法

HTMLHTML 列表 ( 无序列表 | 有序列表 | 自定义列表 )

HTML无序列表和有序列表