web-dev-qa-db-ja.com

codemirror-標準のtextareaのようにサイズ変更可能なtextarea

Codemirror textareaをtext-areaのようにサイズ変更できるようにする方法を知っている人はいますか？

コードミラーのtextareaのサイズを、下から下のグラバーコーナーにドラッグしてサイズ変更できるようにします。

Html divで可能であることは知っていますが（ text-areaのようにサイズ変更可能なdiv を参照）、コードミラーで同じことを達成することはできませんでした。

javascriptcodemirror
25
Zo72

一部のグーグルは、それが CodeMirrorではサポートされていません であると示唆していますが、 jQuery UI で 達成 できます：

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
});
$('.CodeMirror').resizable({
  resize: function() {
    editor.setSize($(this).width(), $(this).height());
  }
});
29
brianpeiris

JQUERYなし、CSSのみ

.CodeMirror {
      resize: vertical;
      overflow: auto !important;
    }

いくつかの苦労の後、この単純なコードは実際に私のために働きました。サイズ変更可能なCodemirrorインスタンスを垂直方向に取得し、スクロールが正しく機能しました。

12
Tadeu Marques

私が作った この小さな例 。

これは垂直方向にのみサイズ変更されることに注意してください。これはおそらく本当に必要なものですか？通常のテキストエリアの水平方向のサイズ変更機能は、レイアウトを壊す傾向があります。通常、エディターの幅が固定されており、サイズを変更するとその下のコンテンツが押し下げられるレイアウトを考え出す方がはるかに簡単です。

あなたがこれに合うように意図しているデザインを見たことがないので、私は推測しています。

これを変更して、両方向で機能するサイズ変更ウィジェットを取得するのはそれほど難しいことではありませんが、それが必要な場合は。

または、この例から派生した@Sphinxxxで このプラグイン を試すことを検討してください。

8
mindplay.dk
let CodeMirrorCustomResize = (params) => {
    var start_x, start_y, start_h,
        minHeight = params && params.minHeight ? params.minHeight : 150,
        resizableObj = params && params.resizableObj ? params.resizableObj : '.handle'

    let onDrag = (e) => {
        sqlEditor.setSize(null, `${Math.max(minHeight, (start_h + e.pageY - start_y))}px`);
    }

    let onRelease = (e) => {
        $('body').off("mousemove", onDrag);
        $(window).off("mouseup", onRelease);
    }

    $('body').on("mousedown", resizableObj, (e) => {
        start_x = e.pageX;
        start_y = e.pageY;
        start_h = $('.CodeMirror').height();

        $('body').on("mousemove", onDrag);
        $(window).on("mouseup", onRelease);
    });
}

誰かが@ mindplay.dkの答えのより短くてより多くのjQueryバージョンに興味があるなら（ところで、これに感謝します）。

0
TH3C120W
.CodeMirror__wrapper {
    resize: both;
    overflow: auto !important;
}

resizeを.CodeMirrorに追加しようとしましたが、機能しませんでした。ラッパーにサイズ変更を追加することは私にとってはうまくいきました。

0
Skip

JQueryがオプションではなく、IE（およびEdge、CSS _resize:_...に追いつくまで）でサイズ変更せずに生きることができる場合は、ここに概念実証例楽しくシンプルで軽いテクニックの例@ mindplay.dkによって開拓されたドラッグアンドドロップハックは必要ありません。

代わりに、ここで：

  1. コンテナDIV が使用され、
  2. プレーンCSSサイズ変更ハンドル、および
  3. サイズ変更イベントはResizeObserver/MutationObserverを介してCMにプロキシ転送されます（onResizeはwindowに対してのみ発生するため） 、Webプログラミングをもっと惨めにするためだけに;））。

解決すべき問題の1つ（CMで？WebKitで？または回避策として、忍耐力と蒸留する時間がありませんでした...）は、「CMonWebKit」に追加された余分な下部パディングです。 シナリオ。CSSサイズ変更ハンドルがCM独自のポットとパンとオーバーラップします。 OTOH、Firefoxはそれを何よりも上に描画するので、CMはハンドルを認識せず、そこにさまざまな（いくつかの！）長方形を描画しますが、Firefoxはそれを救助することに成功し、ハンドルが貼り付けられてもサイズ変更は機能しますスクロールバーの矢印。 （_z-index_で遊んだり、CMのがらくたをスタイリングしたりしても役に立ちませんでした。）

BTW、注：これは、プレーンCSS _overflow: hidden; resize: both;_がメインの_.CodeMirror_ DIVに直接適用されることを意味しますほぼはFirefoxで魔法なしで動作します（余分なフレームやジオメトリの調整などはありません）。ただし、cm.setSize(cm_div.clientWidth, cm_div.clientHeight)のサイズ変更イベントを（上記と同じ方法で）フックする必要があります。

しかし、FirefoxとChromeを検出して最適化することは、コードをはるかに両方で同じままにするよりも複雑にするでしょう...

_document.addEventListener("DOMContentLoaded", function(event) {
  
  fr = document.querySelector("#cm-resize-frame")
  
  // This 5-6 lines below is only for the WRAP/NOWRAP demo switch:
  cm = null
  reset = document.getElementById("wrap").onclick = function() {
    cm && cm.toTextArea() // clean up previous CM instance
    cm = CodeMirror.fromTextArea(document.getElementById("cm"),
        {lineWrapping: document.getElementById("wrap").checked,
         lineNumbers: true } // just to see if CM is actually alive & resizing
    )

    function cm_resize() {
        cm.setSize(fr.clientWidth + 2,   // chrome needs +2, others don't mind...
                   fr.clientHeight - 10) // and CM needs room for the resize handle :-/
    }

    // Needed (on FF, Edge & IE11, but not Chrome) for the scrollbars to properly initialize:
    cm_resize()

    // This is the actual "business logic" of the whole thing! ;)
    if (window.ResizeObserver) // Chrome 64+
        new ResizeObserver(cm_resize).observe(fr)
    else if (window.MutationObserver) // others
        new MutationObserver(cm_resize).observe(fr, {attributes: true})
  }
  reset()
})_
_#cm-resize-frame {
  overflow: hidden; /* CM will manage its own scrollbars. */
  resize: both;
  
  height: 10em; /* A fixed initial height is required in Chrome both for the resize handle to appear and to not fall into a shrinking loop due to the neg. offset in cm_resize()! */

  /* Optional... */
  border: 1px solid lightgrey;
  width: 20em;
}_
_<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.js"></script>

<div id="cm-resize-frame">
<textarea id="cm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc rhoncus ornare diam eget consequat. Suspendisse potenti.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
  
Sed scelerisque, ex nec pharetra ultrices, ipsum mi aliquam arcu, sit amet pulvinar erat mauris sit amet mi.
Fusce pulvinar vel ex semper imperdiet. Quisque dapibus purus eu commodo volutpat.

Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
  
Sed scelerisque, ex nec pharetra ultrices, ipsum mi aliquam arcu, sit amet pulvinar erat mauris sit amet mi.
Fusce pulvinar vel ex semper imperdiet. Quisque dapibus purus eu commodo volutpat.</textarea>
</div>

WRAP: <input id="wrap" type="checkbox" checked>_

（繰り返しますが、これは単なる例であり、この手法が機能することを示しています。JSスニペットは疑似コードとして読み取ることを目的としています。;）アプローチの単純さが維持されている場合、実際の洗練された実装。でも大歓迎です！）

（参照 CodePen ...）

0
Sz.