Example codemirror in textarea supporting html and css linting and auto resize in a bootstrap template.
npm install codemirror-examples --save-dev
Then include the js and css in your web app.
Auto resize is great for editing of small content. However, it becomes painful for large content. There should be a method to toggle this feature. Auto resize is enabled by default. You can set an explict editor height by:
element.editor({
height: '300px' // auto, or pixels
});
All demos support fullscreen mode. This mode is really full viewport. After you click inside the editor keypress:
- F11 - toggles full viewport
- ESC - exits full viewport
For editors with toolbars wrap the editor with div:
<div class="cm-fullscreen-container">
<!-- start of mega menu -->
<!-- textarea here -->
</div>
The <div>
which is expanded to full viewport is determined by:
- The outer closest div (
<div class="cm-fullscreen-container">
) to the codemirror div, if not found - The code mirror wrapper instance (
<div class="codemirror">
).
You can add Bootstrap navbars (toobars) and footers to codemirror. The HTML flexbox layout is:
The css is shown below and is included in the examples:
.cm-flex-container {display: flex;flex-direction: column;height: 100%;}
.cm-flex-child-fixed {flex: none;}
.cm-flex-child-grow {flex: auto; overflow-y:hidden;}
Useful resources for flexbox include:
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://css-tricks.com/snippets/css/complete-guide-grid/
- http://flexboxgrid.com/
There should be option to limit the size of the editor in auto-scrolling.
- Support window scroll on exit: Be the user presses the fullscreen mode the browser window might be scrolled. This scrolled state should be restore upon existing fullscreen.
- Support codemirror scroll on enter: Before the user presses fullscreen mode the editor might be too large for fullscreen. In this case the editor will scroll. The cursor can be below the fold.
Show the textarea value length as 10.1 KB
grunt build