javascript - コードミラー . 垂直スクロールバーを無効にする

Question

現在、CodeMirror を使用して、ブラウザのテキスト領域で CODE を編集しています。20 行を超えるコードがある場合、垂直スクロール バーが右側に追加されます。しかし、このスクロールバーは必要ありません。代わりに、エディターのサイズを垂直方向に大きくする必要があります。

誰でも助けることができますか？

Answer 1

CodeMirror 3 には、スクロールバーを無効にするオプションがあります。scrollbarStyle: "null"

ドキュメントから：

scrollbarStyle: 文字列

スクロールバーの実装を選択します。デフォルトは「ネイティブ」で、ネイティブのスクロールバーを表示します。コア ライブラリは、スクロールバーを完全に非表示にする「null」スタイルも提供します。アドオンは、追加のスクロールバー モデルを実装できます。

これと組み合わせる：

• 自動高さ: height: auto& viewportMargin: Infinity(例: http://codemirror.net/demo/resize.html )
• 折り返し線:lineWrapping: true

そして、親divの高さ/幅を制御するとうまくいきます

Answer 2

CodeMirror docoでは、スクロールバーを表示するかどうか、テキストエリアをコンテンツに合わせて拡大するかどうかを制御するスタイルCodeMirror-scrollについて説明しています。具体的には次のように述べています。

CodeMirror-scroll エディターがスクロールするかどうか (オーバーフロー: 自動 + 固定高さ)。デフォルトでは、そうです。CodeMirror クラスの height: auto を設定し、このクラスに overflow-x: auto; を指定します。オーバーフロー-y: 非表示; コンテンツに合わせてエディターのサイズを変更します。

したがって、アイデアは、独自の CSS に次のようなものを追加することです。

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

スタイルCodeMirror-scrollに関するドキュメントに付属する公式デモでここに示されているように。

私のために働いたもの：

CodeMirror 2.34 を使用している私の個人的な状況では、次のスタイルを自分のスタイルシートに追加するだけでした。

div.CodeMirror-scroll { height: auto!important; overflow: visible; }

コードミラー 3:

CodeMirror 3 の簡単な初期テストでは、上記の両方の手法が機能せず、スクロールバーがまだ表示されました。CodeMirror 3 がスタイルを少し変更し、ドコがまだ追いついていない限り、件名の公式ドコは有効であると思われるので、興味深いです...