如何建立一個簡易的markdown在線編輯器

項目演示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