Javascript Summernote下拉菜单

我们正在使用

Summernote

富文本编辑器（在

MVC

core中），需要添加一个带有不同显示文本（在菜单中）的下拉菜单，以将实际文本放入编辑器（将包含占位符文本）

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

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

以下是我们所拥有的（感谢）：-

var EventData=函数（上下文）{
var ui=$.summernote.ui；
//创建按钮
var event=ui.buttonGroup([
用户界面按钮({
内容：“占位符”，
`工具提示“：”当您在电子邮件中插入占位符时，它将在发送时被替换为正确的内容“，
数据：{
切换：“下拉列表”
}
}),
ui.下拉列表({
项目：[
“名字{{FirstName}}”，
“姓氏{{LastName}}”
],
回调：函数（项）{
$（项）。查找（'li a'）。在（'click'，函数（）{
invoke（“editor.insertText”，$（this.html（））
})
}
})
]);
return event.render（）；//将按钮作为jquery对象返回
}

上面的方法工作得很好，但它只允许下拉列表中的文本与插入到富文本编辑器主体中的文本相同

---

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

我在Summernote 0.8.8中看到这篇文章时，也想做同样的事情

我设法用地图使它工作

在summernote选项部分，我添加了以下内容来定义我的键/值对：

// Control keywords to display on email editor
emailControls: [
    ['Firstname', '##FIRSTNAME##'],
    ['Lastname', '##LASTNAME##'],
    ['Filename', '##FILENAME##'],
    ['Keys', '##KEYS##'],
    ['Hubcode', '##HUBCODE##'],
    ['Hubname', '##HUBNAME##'],
    ['User ID', '##USERID##'],
    ['Full site signature', '##FS_SIGNATURE##'],
    ['Mobile site signature', '##MS_SIGNATURE##'],
    ['Full site link (displayed as \'click here\')',  '##PORTAL_LINK_FS##'],
    ['Mobile site link (displayed as \'click here\')',  '##PORTAL_LINK_MS##']
],  

然后我定义了下拉列表：

context.memo('button.emailControls', function () {

    var keywordMap = new Map(options.emailControls);
    var list = Array.from(keywordMap.keys());

    return ui.buttonGroup([
        ui.button({
            className: 'dropdown-toggle',
            contents: ui.dropdownButtonContents(ui.icon(options.icons.emailControls), options),
            tooltip: lang.emailControls.emailControls,
            data: {
                toggle: 'dropdown'
            }
        }),
        ui.dropdown({
            items: list,
            className: 'dropdown-email-control',
            click: function (event) {
                var $button = $(event.target);
                var value = $button.data('value');
                context.invoke('editor.insertText', keywordMap.get(value));
            }
        })
    ]).render();
});

我将定义的键/值对转换为映射

然后用映射键填充一个名为list的数组

这用于定义下拉项

最后，我使用按钮单击返回的值在地图中查找实际值并将其插入编辑器

---

我希望这能帮助那些需要做类似事情的人

请定义选择器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>

我希望这有帮助

这是我在summernote中设置下拉列表的工作，在更改下拉列表项时，文本将打印在texteditor中

var EventData=函数（上下文）{
var ui=$.summernote.ui；
var event=ui.buttonGroup([
用户界面按钮({
目录：“标签”，
数据：{
切换：“下拉列表”
}
}),
ui.下拉列表({
项目：[
'姓名'，'地址'
],
回调：函数（$dropdown）{
$dropdown.find（'li'）。每个（函数（）{
$（此）。单击（函数（）{
context.invoke（“editor.insertText”，“['+$（this）[0].ariabelab+']）；
});
});
}
}),
]);
return event.render（）；//将按钮作为jquery对象返回
}
$（'#TemplateEditor'）。summernote({
身高：250，
占位符：“写在这里…”，
工具栏：[
['style'，['style']]，
['font'、['bold'、'斜体'、'下划线'、'清除']]，
['fontname'，['fontname']]，
['color'，['color']]，
[para'，[ul'，ol'，段落]]，
['height'，['height']]，
['table'，['table']]，
['insert'、['template'、'link'、'picture'、'hr']]，
['view'，['fullscreen'，'codeview']]，
['help'，['help']]，
['eventButton'，['event']]
],
回调：{
onChange：函数（内容，$editable）{
var markup=$（'#TemplateEditor'）。summernote（'code'）；
}
},
按钮：{
事件：EventData
}
});找到解决方案了吗？没有，尚未解决。而且，从这以后，我们实际上后退了一步。在移动到0.8.9（不确定是否相关）之后，我们自己的下拉列表（如上所述）不再工作。当前正在尝试修复。如果使用bootstrap 4，则必须删除
li
如何使用此选项？
<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 
        }