title: override summernote image pop up not working
body: <p>I am using a text editor called summernote with codeigniter. I also have my own image manager I would like to use. </p>
  
  <p>On my java script code I have set it so my image manager should <strong>OVERRIDE</strong> the image pop up in summernote editor. It does not each time I click on the summernote editor button insert image it still shows the default insert image.</p>
  
  <p>I am not sure why the default insert image pop up is still showing?</p>
  
  <p>I am pretty sure because not adding <strong>data-toggle="image"</strong></p>
  
  <p>This part here not working <code>$('button[data-event=\'showImageDialog\']').attr('data-toggle', 'image').removeAttr('data-event');</code></p>
  
  <p><strong>What is the best practice of making sure My image manager overrides it.</strong></p>
  
  <p><strong>filename common.js</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  // Override summernotes image manager
  $('button[data-event=\'showImageDialog\']').attr('data-toggle', 'image').removeAttr('data-event');
  
  $(document).delegate('button[data-toggle=\'image\']', 'click', function() {
      $('#modal-image').remove();
  
      $(this).parents('.note-editor').find('.note-editable').focus();
  
      $.ajax({
           url: 'admin/filemanager',
          dataType: 'html',
          beforeSend: function() {
              $('#button-image i').replaceWith('&lt;i class="fa fa-circle-o-notch fa-spin"&gt;&lt;/i&gt;');
              $('#button-image').prop('disabled', true);
          },
          complete: function() {
              $('#button-image i').replaceWith('&lt;i class="fa fa-upload"&gt;&lt;/i&gt;');
              $('#button-image').prop('disabled', false);
          },
          success: function(html) {
              $('body').append('&lt;div id="modal-image" class="modal"&gt;' + html + '&lt;/div&gt;');
  
              $('#modal-image').modal('show');
          }
      }); 
  });
  
  // Image Manager
  
  $(document).delegate('a[data-toggle=\'image\']', 'click', function(e) {
      $('#modal-image').remove();
      e.preventDefault();
  
      var element = this;
  
      $(element).popover({
          html: true,
          placement: 'right',
          trigger: 'manual',
          content: function() {
              return '&lt;button type="button" id="button-image" class="btn btn-primary"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/button&gt;';
          }
      });
  
      $(element).popover('toggle');       
  
      $('#button-image').on('click', function() {
          $.ajax({
              url: 'admin/filemanager/?input=' + $(element).parent().find('input').attr('id') + '&amp;element='+ $(element).attr('id'),
              dataType: 'html',
              beforeSend: function() {
                  $('#button-image i').replaceWith('&lt;i class="fa fa-circle-o-notch fa-spin"&gt;&lt;/i&gt;');
                  $('#button-image').prop('disabled', true);
              },
              complete: function() {
                  $('#button-image i').replaceWith('&lt;i class="fa fa-upload"&gt;&lt;/i&gt;');
                  $('#button-image').prop('disabled', false);
              },
              success: function(html) {
                  $('body').append('&lt;div id="modal-image" style="" class="modal fade"&gt;' + html + '&lt;/div&gt;');                                      
                  $('#modal-image').modal('show');
              }
          });
  
          $(element).popover('hide');
      });
  });
  });
  </code></pre>
  
  <p><strong>Header</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /&gt;
  &lt;title&gt;&lt;?php echo $title;?&gt;&lt;/title&gt;
  &lt;base href="&lt;?php echo base_url();?&gt;"&gt;&lt;/base&gt;
  &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url();?&gt;assets/admin/css/bootstrap.css" media="screen"&gt;
  &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url();?&gt;assets/admin/css/custom.css" media="screen"&gt;
  &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url();?&gt;assets/admin/summernote/summernote.css"&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;?php echo base_url();?&gt;assets/admin/summernote/summernote.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;?php echo base_url();?&gt;assets/admin/js/common.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>