Adding a button on editor on fullScreen mode

1

Hi, I understand, most users of code mirror uses key bindings to switch to full screen mode and to exit full screen mode.
However, I’d like to add buttons to switch to full screen mode and to exit the full screen mode.

I could put a button to enter full screen mode but I am stuck while putting a button to exit full screen mode.

My understanding is, when we switch to full screen mode then couple of code mirror div’s overlaps all the content on screen and thus it becomes very difficult to add a button on full screen mode.

Has someone tried to accomplish the same or can give me some pointers on how to approach this problem.

Thanks for reading,
Vishal

2

You should be able to just have a button with a high z-index, so that it appears on top of the editor.

3

Thanks for your answer!

However, I have tried this approach but it did not work.

Let me explain what I have tried:

  1. I have created two buttons, one to enter full screen and another one to exit full screen mode.
  2. When, somebody presses “enter full screen button” then editor goes into full screen but does not show another button(even when its z-index is higher). I have not debugged why.

I know my approach is correct yet there is some missing piece which I have not figured out yet.

Vishal

4

If I put this button in the body of the fullscreen demo (demo/fullscreen.html in the distribution), it shows up fine when in full-screen mode.

<button style="z-index: 10; position: fixed; right: 10px; top: 10px">HELLO</button>
1 Like
5

Where the default is ‘F11’ to toggle fullscreen mode, if I wanted to use a button instead, where in the fullscreen.js code would I edit this?

6

Hello, can you put the correct code?
code Button that only appears on the full page of code-mirror and so I want to save the program by clicking on this button