javascript - Summernote 下拉菜单

Question

我们正在使用 Summernote 富文本编辑器(碰巧在 MVC 核心中)，需要添加一个具有不同显示文本的下拉菜单(在菜单中) 到放入编辑器中的实际文本(将包含占位符文本)。

我们在这个 git 页面上遵循了来自“alxmh”的有用输入，但对它的理解还不够好，无法添加所需的功能，例如:-

Display    Inserted text
------------------------
First Name {{FirstName}}
Last Name  {{LastName}}

这是我们所拥有的(感谢 https://github.com/summernote/summernote/issues/1611):-

var EventData = function (context) {
    var ui = $.summernote.ui;

    // create button
    var event = ui.buttonGroup([
        ui.button({
            contents: 'Placeholders <i class="fa fa-caret-down" aria-hidden="true"></i>',
            `tooltip`: 'When you insert a placeholder into your email, it will get substituted with the correct contents at the time of sending',
            data: {
                toggle: 'dropdown'
            }
        }),
        ui.dropdown({
            items: [

                'First Name {{FirstName}}',
                'Last Name {{LastName}}'
            ],
            callback: function (items) {
                $(items).find('li a').on('click', function () {
                    context.invoke("editor.insertText", $(this).html())
                })
            }
        })
    ]);

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

上面的效果很好，但它只允许下拉列表中的文本与插入到富文本编辑器正文中的文本相同。

如有任何想法，我们将不胜感激。

Answer 1

请定义选择器 ul 或 select 或您需要的任何内容。例如:

<ul class="attribute d-none">
    <li data-value="{First Name}">{First Name}</li>
    <li data-value="{Last Name}">{Last Name}</li>
    <li data-value="{Company Name}">{Company Name}</li>
    <li data-value="{Email}">{Email}</li>
    <li data-value="{Address}">{Address}</li>
    <li data-value="{City}">{City}</li>
    <li data-value="{State}">{State}</li>
</ul>

并提供这样的内容

var AttributeButton = function (context) {
            var ui = $.summernote.ui;
            var list = $('#elements-list').val();

            var button = ui.buttonGroup([
                ui.button({
                    className: 'dropdown-toggle btn-variable',
                    contents: 'Add Variable',
                    tooltip: "Add Variable",
                    data: {
                        toggle: 'dropdown'
                    }
                }),
                ui.dropdown({
                    className: 'drop-default summernote-list',
                    contents: $('.attribute').html(),
                    callback: function ($dropdown) {                    
                        $dropdown.find('li').each(function () {
                            $(this).click(function () {  
                                $('.summernote').summernote('editor.restoreRange');
                                $('.summernote').summernote('editor.focus');
                                $('.summernote').summernote('editor.insertText', $(this).data('value'));
                            });
                        });
                    }
                })
            ]);        

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

希望对你有帮助