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

Posted 2023-03-22

【中文标题】Summernote - 有序和无序列表的自定义下拉列表

【英文标题】：Summernote - Custom dropdown for ordered and unordered list

【发布时间】：2021-08-10 18:41:15

【问题描述】：

我使用 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。

请帮忙。

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

【参考方案1】：

我解决了这个问题。

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

下拉列表需要在 'ui.dropdown' 内的 'contents' 属性中具有以下结构

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

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