下拉项目Summernote的DIV示例

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值用作项目名称？

谢谢！