13

私は今日 CodeMirror を使って、データベースに保存されている PHP コードを編集できる小さな環境を作成しました (はい、これが有害である可能性があることはわかっていますが、通常のユーザーは PHP コードにアクセスできません)。

すべてがうまく機能し、エディターが機能し、コードの強調表示が機能し、タブのインデントが機能しますが、しばらくの間私を悩ませていることが1つあり、これに対する解決策を見つけることができないようです. 私の CodeMirror エディターのテキストエリア内にあるコードは、テキストエリアよりも長く、テキストエリアを超えており、画面の外に消えてしまいます (この記事の最後にあるスクリーンショットを参照してください)。

このコードを下の行に続けたいと思います（もちろん、余分な行番号を追加せずに）。これは既知の問題ですか、それとも簡単に修正できますか?

スクリーンショットは次のとおりです: http://www.pendemo.nl/codemirror.png

前もって感謝します。

// 編集: 修正済み

わかりました、すべてCSSファイルにあるようです! 興味のある人のための修正は次のとおりです。

.CodeMirror {
  overflow-y: auto;
  overflow-x: scroll;
  width: 700px;
  height: auto;
  line-height: 1em;
  font-family: monospace;
  _position: relative; /* IE6 hack */
}

overflow-y: auto (高さは自動で行われるため、垂直スクロールバーは必要ありません)。オーバーフロー-x: スクロール; テキストエリアの幅を超える代わりに、CodeMirror に強制的にスクロールバーを追加させます。そして、それらは固定幅（pxまたはパーセンテージ）を提供します。max-height を追加することもできますが、追加する場合は、overflow-y を設定して aswel をスクロールする必要があります。

4

3 に答える 3

9

lineWrappingオプションを に設定することにより、CodeMirror でワード ラップを有効にするのは簡単trueです。例：

    <textarea id="code" name="code">
      ...
    </textarea>

    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        tabMode: "indent",
        matchBrackets: true,
        theme: "night",
        lineNumbers: true,
        lineWrapping: true,
        indentUnit: 4,
        mode: "text/javascript"
      });
    </script>
于 2012-05-13T15:04:27.550 に答える
6

修正されました。他の誰かがこの問題にぶつかる可能性がある場合は、詳細について質問を参照してください。

于 2011-05-06T11:00:04.870 に答える