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
}

上面的方法效果很好，但是在下拉列表中只允许与插入到RTF主体中的文本相同。

任何想法都将不胜感激。

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 
        }

我希望有帮助

Answer 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的数组
这是用来定义下拉菜单项
最后，我使用单击按钮返回的值在地图中查找实际值并将其插入编辑器。

我希望这可以帮助需要做类似事情的人。

Answer 3

<块引用>

这个是我在summernote中设置下拉菜单的工作，并且在更改下拉项目文本时打印在文本编辑器中

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下拉菜单

3 个答案: