Ace编辑器

  • Ace编辑器是一个嵌入web的代码编辑器,支持语法高亮,自动补全等功能,如果想在页面展示或编辑代码,使用该工具是很合适的。
  • 参考项目地址:https://github.com/ajaxorg/ace

结合AngularJs1使用

  • 目前已经有结合使用的项目了:Ui-ace
  • 我仅做展示使用,所以参考该项目,写一个简单使用例子:
  1. 嵌入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);
};
}
}
}
}]);
  1. 页面使用
<ui-ace class="col-md-4" style="height: 400px;" ng-model="currentNamespace">
</ui-ace>
  • 这里ng-model绑定的变量,只要变化,上面指令里会重新渲染编辑器的内容,实现代码展示的功能。
  1. 使用时加入ace的库,加入相关内容,即可。

Angular系列-AngularJs1使用Ace编辑器的更多相关文章

  1. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  2. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  3. Angular系列一:Angular程序架构

    Angular程序架构 Angular程序架构 组件:一段带有业务逻辑和数据的Html服务:用来封装可重用的业务逻辑指令:允许你向Html元素添加自定义行为模块: 环境搭建 安装nodeJs安装好no ...

  4. Angular系列------AngularJS入门教程:导言和准备(转载)

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...

  5. Angular系列----AngularJS入门教程04:迭代器过滤(转载)

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

  6. Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  7. Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  8. Angular系列----AngularJS入门教程00:引导程序(转载)

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  9. Angular系列------AngularJS快速开始(转载)

    Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...

随机推荐

  1. 小程序checkbox调整大小

    .cb{ transform: scale(0.6,0.6); } <view> <label class="lab" for="box1"& ...

  2. IIS配置问题:WCF服务打开svc文件报错:请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理

    在参考网上多个教程后,我用IIS配置的网站终于能正常打开了,但是很快就发现了新的问题,在打开WCF服务中的svc文件时报错: HTTP 错误 404.17 - Not Found请求的内容似乎是脚本, ...

  3. nginx反向代理部署vue项目(history模式)的方法

    前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理 问题1思考: vue-route ...

  4. 分析CSS布局神器

    只要在页面下加入如下css,整个css布局就清晰了 * { background-color: rgba(255,0,0,.2); } * * { background-color: rgba(0,2 ...

  5. PorterDuffXfermode之PorterDuff.Mode.SRC_IN

    package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...

  6. iptables+ipset自动封闭和解封频繁访问web服务的恶意IP

    转载于互联网     iptables直接针对ip进行封禁,在ip数量不大的时候是没什么问题的,但当有大量ip的时候性能会严重下降,iptables是O(N)的性能.而ipset就像一个集合,把需要封 ...

  7. socket服务端开发之测试使用threading和gevent框架

    socket服务端开发之测试使用threading和gevent框架 话题是测试下多线程和gevent在socket服务端的小包表现能力,测试的方法不太严谨,也没有用event loop + pool ...

  8. Qt编写自定义控件48-面板窗体控件

    一.前言 很多时候需要有一个控件,能够替代容器控件,自动容纳多个widget,自适应宽高,然后提供滚动条功能,这就必然需要用到QScrollArea控件,可设置各个子面板的间距等,也在很多系统中用到, ...

  9. 【设计思路】Booking优化

    https://www.uisdc.com/booking-redesign https://medium.muz.li/booking-com-ux-case-study-7ffb39e54791

  10. vs2015配置link.exe环境变量

    https://www.cnblogs.com/johnwii/p/4966086.html