项目演示markdown-editor
教程地址markdown-editor
前提准备
- npm
- bower
- node 0.12.x
- angular 1.4x
技术栈
- Angular.js [动态更新数据]
- marked [转义markdown语法]
- highlight.js [高亮代码]
- less [管理css]
- gulp [自动化项目]
概要
通过github-pages免费申请一个页面
修改项目结构
...
打开项目,将原来的目录结构删掉,重新配置如下
├── front-end
│ ├── api
│ │ └── app.js
│ └── assets
│ ├── js
│ │ └── customer.js
│ └── styles
│ └── customer.css
└── index.html
- api里装angular的代码
- assets里是资源文件
- .gitignore是告诉git要忽略的文件
...
使用gulp自动化项目
编译less,压缩css,生成map文件
gulp.task('lessCSS', function () {
var combined = combine.obj([
gulp.src(path.lessPath),
plumber(),
sourcemaps.init(),
less(),
minifyCSS(),
sourcemaps.write('./maps'),
gulp.dest(path.destLessPath),
livereload()
]);
combined.on('error',log);
});
压缩js,生成map文件
gulp.task('uglifyJS', function () {
var combined = combine.obj([
gulp.src(path.jsPath),
plumber(),
sourcemaps.init(),
rename('customer.min.js'),
uglify(),
sourcemaps.write('./maps'),
gulp.dest(path.destJSPath),
livereload()
]);
combined.on('error',log);
});
合并angular,重命名,压缩后,生成map文件
gulp.task('uglifyAngularJS', function () {
var combined = combine.obj([
gulp.src(path.angularJSPath),
plumber(),
sourcemaps.init(),
concat('all.js'),
gulp.dest(path.destAngularJSPath),
rename('all.min.js'),
uglify(),
sourcemaps.write('./maps'),
gulp.dest(path.destAngularJSPath),
livereload()
]);
combined.on('error',log);
});
默认执行的任务
gulp.task('default',['uglifyAngularJS','uglifyJS','lessCSS','watch']);
使用less管理css
@charset:'utf-8';
@riceWhite:#F9F9F5;
@333:#333;
@555:#555;
@ccc:#ccc;
@eee:#eee;
@white:#fff;
.box-sizing{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.height(@height) {
height: @height;
}
.width(@width) {
width: @width;
}
.padding(@padding) {
padding: @padding;
}
.margin(@margin) {
margin: @margin;
}
.float(@float) {
float: @float;
}
.base{
.margin(0);
.padding(0);
.box-sizing;
}
.fill{
.height(100%);
.width(100%);
.box-sizing;
}
html,body{
.base;
.fill;
background-color: @riceWhite;
}
使用angular marked 和 highlight 完成核心功能
初始化angular应用
var app = angular.module('app',['ngSanitize']);
配置marked
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function (code) {
return hljs.highlightAuto(code).value;
}
});
动态显示结果,所编即所得
app
.controller('MarkdownController', ['$scope', function ($scope) {
$scope.inputText = '';
$scope.$watch('inputText', function(current) {
$scope.outputText = marked(current);
});
}])
优化tab键
优化自动下移
持久化存储markdown内容
教程地址markdown-editor