我在 Laravel 上使用 SummerNote 包,但问题是 Orderlist 和 Unorder List 在那里不起作用。这是我尝试使用的代码。请帮我解决这个问题。
HTML:
<textarea data-feature="all" class="summernote" data-height="250" 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)
})
})($)
我认为你需要覆盖列表的 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,所以我也使用了下载的 css,这就是问题所在。我转到 Summernote css 文件并搜索
list-style
选择器,发现 li
设置为 list-style: none;
,所以我用 style 替换了 none ,就是这样。
li {
list-style: style;
}