I am trying to use ace editor in my nodejs app which utilizes angular-ui-ace. I am not able to see the ace editor on the screen, even though i see the div filled out in the html. I am following instructions from here: 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');});
};
Rendered 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>
But i don't see the ace editor at all. What am i doing wrong?
Thanks.
The correct Answer is this.
To see something it's better to add some CSS, like
You wont be able to see the editor unless you set this css
Works for me, I would ask you to try these few changes.
To set attributes to your ace editor, add a variable to the $scope like this,
$scope.aceOptions = { \n theme: 'tomorrow_night_eighties', \n mode: 'html', \n useWrapMode : true \n}
Doing this you can easily add various properties to the ace editor.
Now in your DOM(HTML code), include ace editor using following code.
<div ui-ace="aceOptions" ng-trim="true"></div>
This will initialize your ace editor. Works well for me. Hope this helps you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.