使用 angular-ui-ace 时看不到 ace 编辑器答案

【问题标题】：Can't see ace editor when using angular-ui-ace使用 angular-ui-ace 时看不到 ace 编辑器
【发布时间】：2015-05-06 01:44:48
【问题描述】：

我正在尝试在我的使用 angular-ui-ace 的 nodejs 应用程序中使用 ace 编辑器。我无法在屏幕上看到 ace 编辑器，即使我看到在 html 中填写了 div。我正在按照这里的说明进行操作：ui-ace

index.html:

 <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script> 
  <script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
  <script type="text/javascript" src="bower_components/angular-ui-ace/ui-ace.js"></script>
     ...
     ...
    <!-- build:js({.tmp,client}) app/app.js -->
    <script src="app/app.js"></script>
      <!-- injector:js -->
      <script src="app/main/main.controller.js"></script>
      <script src="app/main/main.js"></script>

app.js：

'use strict';

angular.module('plsdiffApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'btford.socket-io',
  'ui.ace',
  'ui.bootstrap'
])

main.html:

<form>
  ...
  <div>
    <div ui-ace="{ onLoad : aceLoaded, workerPath:'bower_components/ace/lib/'}">               </div>
</form>

main.less:

.ace_editor { height: 200px; }

main.controller.js：

     $scope.aceLoaded = function(_editor){
    // Editor part
    var _session = _editor.getSession();
    var _renderer = _editor.renderer;
    alert('inside aceLoaded');
    // Options
    _editor.setReadOnly(true);
    _session.setUndoManager(new ace.UndoManager());
    _renderer.setShowGutter(false);
    _session.setValue('<?xml version="1.0" encoding="UTF-8"?><dummy_xml id="1"></dummy_xml>');
    
    // Events
    _editor.on("changeSession", function(){ alert('changeSession'); });
    _session.on("change", function(){alert('change');});
  };

渲染的html：

<div class=" ace_editor ace-tm" ui-ace="{ onLoad : aceLoaded, workerPath:'bower_components/ace/lib/'}">
<textarea class="ace_text-input" wrap="off" spellcheck="false" style="opacity: 0;"></textarea>
<div class="ace_gutter" style="display: none;">
<div class="ace_scroller" style="left: 0px; right: 0px; bottom: 0px;">
<div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 20px; bottom: 0px;">
<div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 20px; left: 0px; right: 0px;">
<div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; white-space: pre; font: inherit; overflow: hidden;">
</div>

但我根本没有看到 ace 编辑器。我做错了什么？

谢谢。

【问题讨论】：

您是否在控制台中遇到任何错误？
只有这两个，我没有看到任何与 ui-ace 相关的东西。加载资源失败：net::ERR_CONNECTION_REFUSED localhost/:1 Denying load of chrome-extension://gkojfkhlekighikafcpjkiklfbnlmeio/js/jquery.min.map。资源必须列在 web_accessible_resources 清单键中，才能被扩展之外的页面加载。

标签： javascript css angularjs node.js ace-editor

【解决方案1】：

对我有用，我会请您尝试这些更改。

删除不需要的 ui.bootstrap 模块。

要为您的 ace 编辑器设置属性，请像这样向 $scope 添加一个变量，

$scope.aceOptions = {
    主题：'tomorrow_night_eighties',
    模式：'html'，
    使用WrapMode：真
}

这样做您可以轻松地向 ace 编辑器添加各种属性。

现在在您的 DOM（HTML 代码）中，使用以下代码包含 ace 编辑器。
```
 
```

这将初始化您的 ace 编辑器。对我来说效果很好。希望对您有所帮助。

【讨论】：

【解决方案2】：

正确答案是这个。

要查看一些内容，最好添加一些 CSS，例如

.ace_editor { 高度：200px; }

除非你设置了这个css，否则你将无法看到编辑器

【讨论】：