I am using summernote package on laravel, but the thing is Orderlist and unorder list are not working there. Here is the code i am trying to use. Please hep me to solve this issue.

Html :

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

Version :

"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)
    })
})($)

I am using summernote package on laravel, but the thing is Orderlist and unorder list are not working there. Here is the code i am trying to use. Please hep me to solve this issue.

Html :

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

Version :

"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)
    })
})($)

• javascript
• jquery
• laravel
• summernote

2 Answers 2

I think you'll need to override your css for lists

/* 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;
}

This is how I solved my issue. I had downloaded summernote so I was using the downloaded css too and that's where the problem was. I went to the summernote css file and searched for list-style selector and discovered that li was set to list-style: none; so I replaced none with style and that was it.

li {
list-style: style;
}