Question

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

我想通过ace编辑器而不是中央块，但是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

测试出了什么问题：

检查Ace是否已将其他div添加到<div id="editor">，如果不是，则控制台中必定存在一些js错误。
如果Ace在那里但是不可见，请删除<div id="editor">中的所有文本并注释掉ace.edit行以查看ace将获得的大小（ace尝试匹配该div的高度）
如果问题确实是Ace获得高度= 0，则向编辑器div添加显式高度
或者如果您希望它适合文字，请设置maxLines和minLines选项，如https://github.com/ajaxorg/ace-builds/blob/v1.1.6/demo/autoresize.html#L41-L43所示，但不建议设置maxLines非常大，因为它会禁用绘图优化只有可见文本，并且可以使编辑器对于大型文档来说很慢。

Answer 2

Ace应该可以正常使用Bootstrap。确保您已包含相应的ACE js脚本并为其容器设置特定高度。

Ace Bootstrap示例

http://www.bootply.com/5wt39zvswV

Ace编辑器不能与bootstrap一起使用

2 个答案: