前提
ブラウザ上にエディタを表示しました。
Aceエディタと呼ばれる、仮想エディタです。
実現したいこと
そこで、エディタを表示する範囲、
もしくはエディタの大きさを指定したいです。
このように画面いっぱいに表示するのではなく、
画面の四分の一くらいの大きさにしたいです。
発生している問題・エラーメッセージ
自分なりに調べましたが、
そのような手法が見当たりません。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Ace Editor sample</title> 6</head> 7<body> 8 <div id="editor" style="height: 600px"></div> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script> 11 12 <script> 13 var editor = ace.edit("editor"); 14 editor.$blockScrolling = Infinity; 15 editor.setOptions({ 16 enableBasicAutocompletion: true, 17 enableSnippets: true, 18 enableLiveAutocompletion: true 19 }); 20 editor.setTheme("ace/theme/monokai"); 21 editor.getSession().setMode("ace/mode/javascript"); 22 </script> 23</body> 24</html> 25
確か <div id="editor"> のサイズによって変わるんだったような…。
https://ace.c9.io/#nav=howto&api=editor
回答ありがとうございます。
<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/
回答1件
あなたの回答
tips
プレビュー