Ace 编辑器不适用于引导程序 [英] Ace editor doesn't work with bootstrap

问题描述

我使用 boostrap 默认示例主题: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="#">首页</a></li><h2 class="静音">标题</h2>

<小时><textarea name="text" style="display: none;"></textarea><div id="editor">文本</div><小时><div class="footer"><p>&copy;站点名称

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

我做错了什么?

解决方案

Ace 应该可以很好地与 Bootstrap 配合使用.确保您已包含适当的 ACE js 脚本并为其容器设置特定高度.

Ace Bootstrap 示例

https://codeply.com/p/hytEdNhVOV

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

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

What am I doing wrong?

解决方案

Ace should work fine with Bootstrap. Make sure you've included the appropriate ACE js scripts and set an specific height for it's container.

Ace Bootstrap Example

https://codeply.com/p/hytEdNhVOV

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