关于javascript：使用angular-ui-ace时看不到ace编辑器


Can't see ace editor when using angular-ui-ace

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

index.html：

1
2
3
4
5
6
7
8
9
10
11
12
 <script src="bower_components/angular-route/angular-route.js">
  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js">
  <script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js">
  <script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ext-language_tools.js">
  <script type="text/javascript" src="bower_components/angular-ui-ace/ui-ace.js">
     ...
     ...
    <!-- build:js({.tmp,client}) app/app.js -->
    <script src="app/app.js">
      <!-- injector:js -->
      <script src="app/main/main.controller.js">
      <script src="app/main/main.js">

app.js：

1
2
3
4
5
6
7
8
9
10
11
'use strict';

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

main.html：

1
2
3
4
5
<form>
  ...
 
                   
</form>

main.less：

1
.ace_editor { height: 200px; }

main.controller.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     $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：

1
<textarea class="ace_text-input" wrap="off" spellcheck="false" style="opacity: 0;"></textarea>

但是我根本看不到Ace编辑器。 我究竟做错了什么？

谢谢。

相关讨论

正确的答案是这样。

为了看到一些东西，最好添加一些CSS，例如

.ace_editor {高度：200px; }

除非您设置此CSS，否则您将无法看到编辑器

为我工作，我想请您尝试这些更改。

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

  • 要将属性设置为ace编辑器，请向$ scope这样添加一个变量，如下所示：

    1
    2
    3
    4
    5
    $scope.aceOptions = {
        theme: 'tomorrow_night_eighties',
        mode: 'html',
        useWrapMode : true
    }

    • 这样做，您可以轻松地将各种属性添加到ace编辑器中。

  • 现在，在您的DOM(HTML代码)中，使用以下代码包含ace编辑器。

    1
     

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