Summernote - 有序和无序列表的自定义下拉列表

问题描述

我使用 Summernote 编辑器 v0.8.9 已经很长时间了。我使用以下代码为有序列表和无序列表创建了一个自定义下拉按钮

let orderedList = function (context)
        {
            let ui = $.summernote.ui;

            // create button
            let button = ui.buttonGroup([
                ui.button({
                className: 'dropdown-toggle',contents: '<i class="fa fa-list-ol"/><span class="note-icon-caret"></span>',container: false,tooltip: 'Ordered List',data: {
                    toggle: 'dropdown'
                }
                }),ui.dropdown({
                    className: 'dropdown-style',contents: "<ol style='list-style-type:none' class='ordered-list'><li data-value='1'>1</li><li data-value='1' style='display: none;'>1)</li><li data-value='I'>I</li><li data-value='A'>A</li><li data-value='a)' style='display: none;'>a)</li><li data-value='a'>a</li><li data-value='i'>i</li></ol>",callback: function ($dropdown) {
                        $dropdown.find('li').each(function () {
                            $(this).click(function() {
                                selectedListType = orderedListMap[$(this).attr('data-value')];
                                $(context).summernote('editor.insertOrderedList');
                            });
                        });
                    }
                })
            ]);

            return button.render();   // return button as jquery object
        };

我还得到了附加到工具栏的下拉菜单，如图所示

我在summernote.js中修改了一些代码，在点击下拉项后改变了列表样式类型。

我在 Bullet.prototype.wrapList 方法中添加如下代码

//for bullets and numbering style
if (selectedListType != 'NA') {
     listNode.setAttribute('style','list-style-type:' + selectedListType);
 }

我还在“dom”对象的“function replace(node,nodeName)”方法中添加了以下代码。

//for bullets and numbering style
if ((nodeName == 'OL' || nodeName == 'UL' ) && selectedListType != 'NA') {
    $(newNode).css('list-style-type',selectedListType);
}

当我点击下拉项时，我调用下面的代码。

$(context).summernote('editor.insertOrderedList');

首先一切正常。我可以将有序列表更改为无序列表以及其他类型的列表。但是当我尝试创建新列表时出现问题。当我尝试在现有列表下方创建一个新列表时（注意：双重输入新行后，现有列表关闭，因此在双重输入新行后会创建一个新列表），

焦点不会停留在当前行上。相反，它转到旧列表，旧列表样式（有序/无序）正在发生变化。

我还在工具栏中保留了默认的 UL/OL 用于调试，我可以看到 WrappedRange.prototype.nativeRange 方法中的 document.selection() 为默认 UL/OL 提供了正确的选择，但提供了错误的选择用于我的下拉列表 UL/OL。

请帮忙。

如果需要我这边的任何信息，请告诉我

解决方法

我解决了这个问题。

问题出在我创建的自定义下拉菜单上。

下拉菜单需要在 'ui.dropdown' 内的 'contents' 属性中采用以下结构

<li>
    <a href="#"></a>
</li>
<li>
    <a href="#"></a>
</li>

'li' 标签内的 'a' 标签

html javascript jquery