可以'使用angular ui ace时,请不要查看ace编辑器
Can't see ace editor when using angular-ui-ace
我正试图在我的nodejs应用程序中使用ace编辑器,该应用程序使用angular ui 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>
但我一点也看不到王牌编辑。我做错了什么?
谢谢。
正确答案是这样的。
要查看某些内容,最好添加一些CSS,如
.ace_editor{height:200px;}
除非设置此css
对我有用,我想请您尝试一下这些更改。
- 卸下不需要的ui.bootstrap模块
要设置ace编辑器的属性,请在$scope中添加一个变量,如下所示,
$scope.aceOptions={主题:"tomorrow_night_eighties",模式:"html",useWrapMode:true}
这样可以很容易地将各种属性添加到ace编辑器中。
现在,在您的DOM(HTML代码)中,使用以下代码包含ace编辑器。
<div ui ace="aceOptions"ng trim="true">lt/div>
这将初始化你的ace编辑器。对我来说效果很好。希望这对你有帮助。
相关文章:
- 一个页面上有多个Ace编辑器,没有预先设置元素
- ACE编辑器正在删除模块,因为define是't一根绳子
- 扩展 ACE 编辑器,如何导入自定义文件
- 检查onbeforeunload中的ace编辑器,查看是否进行了更改
- 如何在没有注释的情况下从ACE编辑器中获取值
- 与 bower 一起安装的 ACE 编辑器找不到我的模式
- 如何从定制的ACE编辑器模式强制软包装
- 可以'使用angular ui ace时,请不要查看ace编辑器
- 销毁Ace编辑器中打开的自动完成弹出窗口
- ACE编辑器applyDeltas似乎与setTimeout不兼容
- Ace编辑器:如何防止某些标签被P包装
- ace编辑器查找代码片段
- Angular2-动态加载Ace编辑器
- Ace编辑器通过垂直滚动条隐藏最后的相扑
- 使用具有不同完成符的多个ace编辑器实例
- 当我单击另一个文件时,如何在 ace 编辑器中更改内容
- 在 Ace 编辑器中自动完成 XML 值和属性
- 带有选项卡面板的 ace 编辑器
- 使用 ACE 编辑器隐藏一些行
- Ace 编辑器上的键控事件