Angular系列-AngularJs1使用Ace编辑器
2024-08-29 05:03:14
Ace编辑器
- Ace编辑器是一个嵌入web的代码编辑器，支持语法高亮，自动补全等功能，如果想在页面展示或编辑代码，使用该工具是很合适的。
- 参考项目地址：https://github.com/ajaxorg/ace
结合AngularJs1使用
- 目前已经有结合使用的项目了：Ui-ace
- 我仅做展示使用，所以参考该项目，写一个简单使用例子：
- 嵌入web的指令
app.directive('uiAce',[function () {
return {
restrict : 'EA',
require: '?ngModel',
link: function ($scope,$element,$attributes,ngModel) {
if (angular.isUndefined(window.ace)) {
throw new Error('ui-ace need ace to work...');
}
var acee = window.ace.edit($element[0]);
var session = acee.getSession();
if(ngModel){
ngModel.$formatters.push(function (value) {
if(angular.isUndefined(value) || value ==null){
return '';
}else {
return value;
}
});
ngModel.$render = function () {
var text = JSON.stringify(ngModel.$viewValue, null, '\t');
session.setValue(text);
};
}
}
}
}]);
- 页面使用
<ui-ace class="col-md-4" style="height: 400px;" ng-model="currentNamespace">
</ui-ace>
- 这里ng-model绑定的变量，只要变化，上面指令里会重新渲染编辑器的内容，实现代码展示的功能。
- 使用时加入ace的库，加入相关内容，即可。
最新文章
- Mac地址
- 通过一组RESTful API暴露CQRS系统功能
- C堆栈入门
- Android pull解析xml文件
- Tomcat 开发web项目报Illegal access: this web application instance has been stopped already. Could not load [org.apache.commons.pool.impl.CursorableLinkedList$Cursor]. 错误
- Aggregate
- 5.3.2 Eclipse集成开发环境的使用技巧
- 算法系列4《Luhn》
- jquery 源码学习（一）
- 探究为何rem在chrome浏览器上计算出错
- js 无刷新分页代码
- Ini文件操作类
- hdu1086(线段相交)
- CodeForces 1151B Dima and a Bad XOR
- SOC（网络安全管理平台）
- 剑指offer面试题15：链表中倒数第K个节点
- zoj4110 Strings in the Pocket（manacher）
- transition: 0.2s all ease;
- matlab plot line settings
- go语言之行--基础部分