Summernote

Question

我使用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');

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

焦点不在当前行。相反，它转到旧列表并且旧列表样式 (Ordered/unordered) 正在更改。

我还在工具栏中保留了默认值 UL/OL 用于调试，我可以看到方法 WrappedRange.prototype.nativeRange 中的 document.selection() 为默认值 UL/OL 但是为我的下拉菜单 UL/OL.

提供了错误的选择

请帮忙。

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

Answer 1

我解决了这个问题。

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

下拉列表需要在 'ui.dropdown'

内的 'contents' 属性中采用以下结构

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

'a' 标签内 'li' 标签

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

Summernote - Custom dropdown for ordered and unordered list

html

javascript

jquery