Angular系列-AngularJs1使用Ace编辑器
时间:2019-03-19
本文章向大家介绍Angular系列-AngularJs1使用Ace编辑器,主要包括Angular系列-AngularJs1使用Ace编辑器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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的库,加入相关内容,即可。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 线性表--定长顺序串(十四)
- java学习之路:10.数组的基本操作(遍历,替换,排序,复制,查询)
- java学习之路:9.一,二维数组创建初始化
- 线性表--堆串(十五)
- 图解PostgreSQL-buffer管理(二)
- 同步复制注意点
- java学习之路:8.字符串生成器
- java学习之路:7.正则表达式
- PG11新特性解读:新增非空默认值字段不需要重写表
- java学习之路:6.格式化输出字符串
- java学习之路:4.String类 连接字符串 获取字符串信息
- java学习之路:11.数组排序算法
- java学习之路:5.字符串操作
- [Skr-Shop]什么,秒杀系统也有这么多种!
- java学习之路:3.数据类型 变量 运算符 转换