cm-resize

Add a resize handle to your CodeMirror editor.

Usage no npm install needed!

<script type="module">
  import cmResize from 'https://cdn.skypack.dev/cm-resize';
</script>

README

cm-resize

Add a resize handle to your CodeMirror editor.

Based on an example by Rasmus Schultz (CodeMirror issue), with some extra options.

Demo

https://rawgit.com/Sphinxxxx/cm-resize/master/demo/index.html
https://codepen.io/Sphinxxxx/pen/dVPXdX

Getting Started

Installing

  • NPM:

    • npm install cm-resize --save
    • import cmResize from 'cm-resize';
  • ..or client-side <script>:

<script src="https://unpkg.com/cm-resize@1"></script>

Usage

var myCodeMirror = CodeMirror.fromTextArea(...);  //..or some other way to create a CodeMirror instance
cmResize(myCodeMirror);

Options

var handle = cmResize(myCodeMirror, {
    minWidth:  200,               //Minimum size of the CodeMirror editor.
    minHeight: 100,

    resizableWidth:  true,        //Which direction the editor can be resized (default: both width and height).
    resizableHeight: true,

    cssClass: 'cm-resize-handle', //CSS class to use on the *default* resize handle.
    handle:                       //An element to use as the handler instead of the default one (`cssClass` doesn't apply here).
});