Пример DIV для выпадающего элемента Summernote

Question

Я хочу создать выпадающую кнопку в редакторе Summernote и для элемента списка назначить мой блок div для вставки в редактор.Я использую пример:

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

          // create button
          var buttonGroup = ui.buttonGroup([
            ui.button({
              className: 'dropdown-toggle',
              contents: 'Hello',
              tooltip: 'hello',
              data: {
                toggle: 'dropdown'
              },
              click: function() {
                // Cursor position must be saved because is lost when dropdown is opened.
                context.invoke('editor.saveRange');
              }
            }),
            ui.dropdown({
              className: 'drodown-style',
              contents: '<ol><li>Text.1</li><li>Text.2</li><li>Text.3</li></ol>',
              callback: function ($dropdown) {
                $dropdown.find('li').each(function () {
                  $(this).click(function(e) {
                    // We restore cursor position and text is inserted in correct pos.
                    context.invoke('editor.restoreRange');
                    context.invoke('editor.focus');
                    context.invoke("editor.insertText", $(this).html());
                    e.preventDefault();
                  });
                });
              }
            })
          ]);
          return buttonGroup.render();   // return button as jquery object
        };

Кнопка создания, но когда я нажимаю на элемент списка, я получаю значение Text.1 Text.2 и т. Д.

Как назначитьблок div для каждого элемента и использовать значения Text.1 Text.2 только для имени элемента?

Спасибо!