title: Custom Summernote Button to create links with classes
body: <p>So I'm thoroughly confused as how to make a custom SummerNote button which will allow me to either add classes to an already inserted HTML element (i.e. links) or even wrap selected text in something like:</p>
  
  <pre><code>&lt;button class="btn btn-primary"&gt; **selected text** &lt;/button&gt;
  </code></pre>
  
  <p>From the <a href="https://summernote.org/deep-dive/#custom-button" rel="nofollow noreferrer">Summernote Deep Dive</a> it shows how to create a custom button that inserts static text and I understand how to implement it. However, I can't seem to figure out how to make it dynamic for whatever text is selected. I've tried replacing the <code>'text'</code> part of the example after <code>context.invoke</code> call but it doesn't convert the text to html, it just prints it.</p>
  
  <p>The need is for creating links as buttons. Ideally I'd wish to access the <code>Insert Link</code> dialog already built into SummerNote to make buttons that will insert links with predefined classes but I'm not sure how complicated that would be.</p>
  
  <p>Does anyone have any suggestions?</p>
  
  <pre><code>var bsButton = function (context) {
  var ui = $.summernote.ui;
  
  // create button
  var button = ui.button({
      contents: 'Btn',
      tooltip: 'Create Button',
      click: function () {
          // invoke insertText method with 'hello' on editor module.
          context.invoke('editor.insertText', '&lt;button class="btn btn-primary"&gt;&lt;/button&gt;');
      }
  });
  
  return button.render();   // return button as jquery object
  }
  </code></pre>
  
  <p>I've reviewed a ton of different posts but I haven't gotten much further than the example for what I'm trying to accomplish. Thanks in advance to anyone who takes the time to help.</p>