Answers.Body: <p>The right thing to do is</p>
  
  <pre><code>var that = this;
  var id = $(that.$editor).attr('id')
  $('#'+id).parent('.redactor-box').find('.CodeMirrorscroll').on('hover',function(){
  var idnumber = id.replace('redactor-uuid-','')
  $('#redactor-air-'+idnumber).css('display','block');
  });
  </code></pre>
  
  <p>on </p>
  
  <pre><code>init: function()
                  {
  </code></pre>
  
  <p>Now its ok, its only opens one if you have more than one</p>
  
  <p>THanks
  Carlos Vieira</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-24T18:16:05.670Z
Answers.LastActivityDate: 2017-02-24T18:16:05.670Z
Answers.UserDisplayName: Carlos Vieira
Answers.Body: <p>I created a callback on click in the .CodeMirror-gutters:</p>
  
  <pre><code>init: function(e) {
      var a = this.codemirror;
      $('.CodeMirror-gutters').on('click',function(e){
          if(a.$textarea.hasClass('open')){ a.hide(); }
      });
  },
  </code></pre>
  
  <p>and added a Material Icons code icon to the .CodeMirror-gutters:after css:</p>
  
  <pre><code>.CodeMirror-gutters:after {
      font-family: 'Material Icons';
      etc...
      content: '\E86F';
  }
  </code></pre>
  
  <p>so that when the user clicks the gutter in 'source' mode, it toggles back to 'visual' mode.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-28T23:19:38.250Z
Answers.LastActivityDate: 2017-11-28T23:43:22.567Z
Answers.LastEditDate: 2017-11-28T23:43:22.567Z
Answers.UserDisplayName: supernifty
Answers.Body: <p>I found a quick solution to show toolbar when hover code mirror</p>
  
  <pre><code> callbacks: {   
     init: function() {    
     $('.CodeMirror-scroll').on('hover',function(){
           $('.redactor-air').css('display','block');       
            });
         } 
  }
  </code></pre>
  
  <p>But the issue is the same when i have more then one redactor in same page, because it shows both toolbar...</p>
  
  <p>Any help on this ?
  Thanks </p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-29T18:26:14.730Z
Answers.Text: Try changing $('.redactor-air') to $(this).closest('.redactor-air') inside the hover event callback function.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-29T16:01:40.803Z
Answers.LastActivityDate: 2016-09-29T16:30:28.790Z
Answers.LastEditDate: 2016-09-29T16:30:28.790Z
Answers.UserDisplayName: Carlos Vieira
Body: <p>I'm using Redactor 2 and I set config <code>air: true</code> and <code>plugin: ['codemirror']</code>.
  The issue is when I click on html button the air toolbar disappears and is not possible to have toolbar on redactor again.</p>
  
  <p>Is there a solution?</p>
  
  <p>Thanks in advance.</p>
  
Tags: <redactor>
Title: Redactor air not visible when code mirror is enabled
ThreadText: # Redactor air not visible when code mirror is enabled
  
  (Asked by: username_0 on 2016-09-29)
  
  I'm using Redactor 2 and I set config `air: true` and `plugin: ['codemirror']`.
  The issue is when I click on html button the air toolbar disappears and is not possible to have toolbar on redactor again.
  
  Is there a solution?
  
  Thanks in advance.
  
  **Tags:** redactor
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_0 on 2017-02-24. Score: 1
  
  The right thing to do is
  
  ```
  var that = this;
  var id = $(that.$editor).attr('id')
  $('#'+id).parent('.redactor-box').find('.CodeMirrorscroll').on('hover',function(){
  var idnumber = id.replace('redactor-uuid-','')
  $('#redactor-air-'+idnumber).css('display','block');
  });
  
  ```
  
  on
  
  ```
  init: function()
                  {
  
  ```
  
  Now its ok, its only opens one if you have more than one
  
  THanks
  username_0 username_0
  
  
  ---
  
  ### Answer by username_1 on 2017-11-28. Score: 1
  
  I created a callback on click in the .CodeMirror-gutters:
  
  ```
  init: function(e) {
      var a = this.codemirror;
      $('.CodeMirror-gutters').on('click',function(e){
          if(a.$textarea.hasClass('open')){ a.hide(); }
      });
  },
  
  ```
  
  and added a Material Icons code icon to the .CodeMirror-gutters:after css:
  
  ```
  .CodeMirror-gutters:after {
      font-family: 'Material Icons';
      etc...
      content: '\E86F';
  }
  
  ```
  
  so that when the user clicks the gutter in 'source' mode, it toggles back to 'visual' mode.
  
  
  ---
  
  ### Answer by username_0 on 2016-09-29. Score: 1
  
  I found a quick solution to show toolbar when hover code mirror
  
  ```
   callbacks: {   
     init: function() {    
     $('.CodeMirror-scroll').on('hover',function(){
           $('.redactor-air').css('display','block');       
            });
         } 
  }
  
  ```
  
  But the issue is the same when i have more then one redactor in same page, because it shows both toolbar...
  
  Any help on this ?
  Thanks
  
  > **Comments:**
  > **username_2**: Try changing $('.redactor-air') to $(this).closest('.redactor-air') inside the hover event callback function.  
  
  ---
  
  