Summernote 下拉菜单答案

【问题标题】：Summernote dropdown menuSummernote 下拉菜单
【发布时间】：2019-02-06 11:41:04
【问题描述】：

我们正在使用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
}

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

任何想法将不胜感激。

【问题讨论】：

您找到解决方案了吗？
不，还没有解决。而且，从那时起，我们实际上已经倒退了一步。移至 0.8.9 后（不确定是否相关），我们自己的下拉菜单（如上）不再有效。目前正在尝试修复。
如果你使用bootstrap 4，你必须删除li

标签： javascript jquery html summernote

【解决方案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 
        }

希望对你有帮助

【讨论】：

【解决方案2】：

因为我想在 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 的数组
这用于定义下拉项
最后我使用按钮点击返回的值在地图中查找实际值并将其插入到编辑器中。

我希望这对需要做类似事情的人有所帮助。

【讨论】：

这个怎么用？

【解决方案3】：

它对我有用。当您点击地址菜单时，“{ADDRESS}”将被插入到编辑器中我只是总结了一些cmetshere。 Summernote v0.8.18

var VariableButton = function (context) {
    var ui = $.summernote.ui;
    var button = ui.buttonGroup([
        ui.button({
            className: 'dropdown-toggle',
            contents: 'Variable <span class="note-icon-caret"></span>',
            tooltip: 'Insert variable',
            data: {
                toggle: 'dropdown'
            }
        }),
        ui.dropdown({
            className: 'dropdown-variable',
            contents: '<li><a href="javascript:;" data-value="{NAME}">Name</a></li>' + '<li><a href="javascript:;" data-value="{ADDRESS}">Address</a></li>',
            callback: function (items) {
                $(items).find('li a').each(function () {
                    $(this).click(function(e) {
                        context.invoke("editor.insertText", this.dataset.value);
                        e.preventDefault();
                    });
                });
            }
        })
    ]);

    return button.render();
};

$scope.editorOptions = {
    height: 320,
    minHeight: null,
    maxHeight: null,
    placeholder: 'Please enter email template',
    toolbar: [
        //['headline', ['style']],
        ['style', ['bold', 'italic', 'underline', 'strikethrough']],
        ['fontface', ['fontname']],
        ['textsize', ['fontsize']],
        ['fontclr', ['color']],
        ['alignment', ['ul', 'ol', 'paragraph', 'lineheight']],
        ['height', ['height']],
        ['table', ['table']],
        ['insert', ['link','picture','hr']],
        ['style', ['clear']],
        //['edit',['undo','redo']]
        ['view', ['codeview']],
        ['custom', ['variable']]
    ],
    buttons: {
        variable: VariableButton
    }
};

【讨论】：

这在鼠标悬停 FX 的下拉菜单中表现得更正确。但是，放弃胡萝卜的跨度，因为 SummerNote 添加了自己的一个

【解决方案4】：

这是我的工作，基于先前的答案并进行了调整。这些适用于 SM 0.8.18：

CSS：

  <style>
    div.note-dropdown-menu {
      overflow-y:auto;
      max-height:400px; /*recommend keep it approx 50 px less than height of editor itself*/
      width: 180px; /*SM's setting was too narrow for its own style DDL */
    }
  </style>

这是我的 javascript：

    $(document).ready(function () {

  $('#txtContent').summernote({
    placeholder: 'Content',
    tabsize: 2,
    height: 300,
    toolbar: [
      ['style', ['style']],
      ['fontface', ['fontname']],
      ['textsize', ['fontsize']],
      ['fontclr', ['color']],
      ['font', ['bold', 'underline', 'clear']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'mailMergeDDL']],
      ['view', ['fullscreen', 'codeview', 'help']]
    ],
    buttons: {
      mailMergeDDL: MailMergeButton
    }
  });
});


var MailMergeButton = function (context) {
  var ui = $.summernote.ui;
  var button = ui.buttonGroup([
    ui.button({
      className: 'dropdown-toggle',
      contents: 'Merge Fields',
      tooltip: 'Inserts mail-merge tag',
      data: {
        toggle: 'dropdown'
      }
    }),
    ui.dropdown({
      className: 'dropdown-variable',
      //contents: $('.attribute').html(),
      items: ['Name', 'Address', 'Field3', 'Field4', 'Field5', 'Field6', 'Field7', 'Field8', 'Field9', 'Field10', 'Field11', 'Field12', 'Field13', 'Field14', 'Field15', 'Field16', 'Field17', 'Field18', 'Field19', 'Field20'],
      callback: function (items) {
        $(items).find('a').each(function () {
          $(this).click(function () {
            //context.summernote('editor.restoreRange');
            //context.summernote('editor.focus'); //not needed and doesn't work. the insert is injecting at the cursor
            context.invoke("editor.insertText", '{'+ this.dataset.value + '}'); 
          });
        });
      }
    }),
  ]);

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

【讨论】：

【解决方案5】：

这对我来说是在summernote中设置下拉菜单的工作，并且在更改下拉项目时，文本会打印在texteditor中

var EventData = function (context) {
var ui = $.summernote.ui;
var event = ui.buttonGroup([
ui.button({
contents: 'Tags',
data: {
toggle: 'dropdown'
}
}),
ui.dropdown({
items: [
'Name', 'Address'
],
callback: function ($dropdown) {
$dropdown.find('li').each(function () {
$(this).click(function () {

                                    context.invoke("editor.insertText", '[' + $(this)[0].ariaLabel + '] ');
                                });
                            });
                        }
                  
                        
                    }),
                 
                ]);

                return event.render();   // return button as jquery object
            }
           $('#TemplateEditor').summernote({
                height: 250,
                placeholder: "write here...",
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['template', 'link', 'picture', 'hr']],
                    ['view', ['fullscreen', 'codeview']],
                    ['help', ['help']],
                    ['eventButton', ['event']]
                ],
                callbacks: {
                    onChange: function (contents, $editable) {
                        var markup = $('#TemplateEditor').summernote('code');

                    }
                },
                buttons: {
                    event: EventData
                }
            });

【讨论】：

这不适用于最新的 SummerNote，因为项目列表没有用 LI 标签框起来。将您的 find() 更改为使用“a”，它应该可以工作（对我有用）。