<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>

CC BY-SA 3.0
2017-02-24T18:16:05.670Z
2017-02-24T18:16:05.670Z
Carlos Vieira
<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>

CC BY-SA 3.0
2017-11-28T23:19:38.250Z
2017-11-28T23:43:22.567Z
2017-11-28T23:43:22.567Z
supernifty
<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>

CC BY-SA 3.0
2016-10-29T18:26:14.730Z
Try changing $('.redactor-air') to $(this).closest('.redactor-air') inside the hover event callback function.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-29T16:01:40.803Z
2016-09-29T16:30:28.790Z
2016-09-29T16:30:28.790Z
Carlos Vieira
<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>

<redactor>
Redactor air not visible when code mirror is enabled
# 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


---

### 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.  

---

