Выпадающее меню Summernote - PullRequest
Новая
       10

Выпадающее меню Summernote

0 голосов
/ 31 августа 2018

Мы используем Summernote текстовый редактор (в ядре MVC, как это происходит), и нам нужно добавить выпадающее меню с другим отображаемым текстом (в меню) к реальному тексту, который попадает в редактор (будет содержать заполнитель текста).

Мы следили за полезной информацией от "alxmh" на этой git-странице, но недостаточно хорошо ее понимаем, чтобы добавить необходимые функции, например: - 

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
}

Вышеприведенное работает хорошо, но в раскрывающемся списке допускается только тот же текст, который вставляется в тело редактора форматированного текста.

Любые мысли приветствуются.

1 Ответ

0 голосов
/ 16 января 2019

Наткнулся на эту публикацию, так как я хотел сделать то же самое в 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();
});
  1. Я преобразовал определенные пары ключ / значение в карту.
  2. Затем заполнил массив, названный списком, ключами карты
  3. Это использовалось для определения выпадающих пунктов
  4. Наконец, я использовал значение, возвращаемое нажатием кнопки, чтобы найти действительное значение на карте и вставить его в редактор.

Надеюсь, это поможет кому-то, кому нужно сделать что-то подобное.

...