javascript - Ace 编辑器无法与 bootstrap 配合使用

Question

我使用boostrap默认示例主题:http://getbootstrap.com/examples/jumbotron-narrow/

我想过去 ace 编辑器而不是中央 block ，但 ace 编辑器不起作用(空白区域):

...
<div class="container-narrow">
  <div class="masthead">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="#">Home</a></li>
    </ul>
    <h2 class="muted">Title</h2>
  </div>
  <hr>
  <textarea name="text" style="display: none;"></textarea>
  <div id="editor">Text</div>
  <hr>
  <div class="footer">
    <p>&copy; SiteName</p>
  </div>
</div> <!-- /container -->

<script src="style/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/xcode");
  editor.getSession().setMode("ace/mode/c_cpp");
</script>
...

我做错了什么？

Answer 1

要测试出了什么问题:

1. 检查 Ace 是否已将其他 div 添加到 <div id="editor"> 中，如果没有的话，控制台肯定有js错误。
2. 如果 Ace 存在但不可见，请删除 <div id="editor"> 中的所有文本并注释掉ace.edit行查看 ace 将获得的大小(ace 尝试匹配该 div 的高度)
3. 如果问题确实是 Ace 的 height=0，请向编辑器 div 添加显式高度，
4. 或者如果您希望它适合文本，请设置 maxLines和minLines选项如https://github.com/ajaxorg/ace-builds/blob/v1.1.6/demo/autoresize.html#L41-L43所示，但是不建议将 maxLines 设置得非常大，因为它会禁用仅绘制可见文本的优化，并且可能会使编辑器在处理大型文档时变慢。