確か <div id="editor"> のサイズによって変わるんだったような…。
https://ace.c9.io/#nav=howto&api=editor
前提
ブラウザ上にエディタを表示しました。
Aceエディタと呼ばれる、仮想エディタです。
実現したいこと
そこで、エディタを表示する範囲、
もしくはエディタの大きさを指定したいです。
このように画面いっぱいに表示するのではなく、
画面の四分の一くらいの大きさにしたいです。
発生している問題・エラーメッセージ
自分なりに調べましたが、
そのような手法が見当たりません。
該当のソースコード
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Ace Editor sample</title> </head> <body> <div id="editor" style="height: 600px"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script> <script> var editor = ace.edit("editor"); editor.$blockScrolling = Infinity; editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true }); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/javascript"); </script> </body> </html>
回答ありがとうございます。
<div class="size" id="editor" style="height: 300px"></div>
これで、高さは変えられました。
ただ、幅が変えられなかったので、
CSSで幅を変えました。
あれ？
<div class="size" id="editor" style="height: 300px; width: 300px;"></div>
でいけませんか？
http://w-d-l.net/css__course__inline_style/
まだ回答がついていません
会員登録して回答してみよう
