Ace编辑器不能使用bootstrap [英] Ace editor doesn't work with bootstrap

问题描述

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

I use boostrap default example theme: http://getbootstrap.com/examples/jumbotron-narrow/

我想过去的ace编辑器，而不是中央块，但ace编辑器不工作（空格）：

and i'd like to past ace editor instead central block, but ace editor doesn't work (empty space):

...
<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>
...

我做错了什么？

推荐答案

测试错误：

1. 检查Ace是否已添加其他div到< div id =editor> ，如果没有，控制台中必须有一些js错误。


2. 如果Ace存在但不可见，请从< div id =editor> 中删除​​所有文本，并注释掉 ace.edit 行查看什么大小ace将获得（ace尝试匹配那个div的高度）


3. 如果问题确实是Ace获取height = 0， height to the editor div，


4. 或如果您希望它适合文本，请设置 maxLines 和 minLines 选项，如 https://github.com/ajaxorg/ace-builds/blob/v1.1.6/demo/autoresize.html#L41-L43 ，但是不要将maxLines设置为非常大，因为它禁用了仅绘制可见文本，并且可以使编辑器对大文档缓慢。

1. check if Ace have added other divs into <div id="editor">, if no, there must be some js error in console.
2. If Ace is there but isn't visible, remove all text from <div id="editor"> and comment out ace.edit line to see what size ace will get (ace tries to match height of that div)
3. if the issue is indeed that Ace gets height=0, either add explicit height to the editor div,
4. or if you want it to fit to text, set maxLines and minLines options as shown in https://github.com/ajaxorg/ace-builds/blob/v1.1.6/demo/autoresize.html#L41-L43, however setting maxLines very large isn't recomended since it disables optimization of drawing only visible text, and can make editor slow for large documents.

这篇关于Ace编辑器不能使用bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！