ngMeditor | Angularjs Module to create a Medium style editor

ngMeditor angular-js module


Stars : 10

Forks : 10

Created by wangming

Demo Download GitHub

Medium style editor for AngularJs


  • Header1-6/Bold/Itatic/underline/(un)order list/hr/justfy.

  • Code input supported. Just input ``` at line start, or format it.

  • Tab key supported.

  • Append whitespace to URL to insert link.

  • Drop or select image to insert it, or just paste from clipboard (ff not supported, trying to figure it out), image are saved to QiniuCloud.

Demo: Not support insertting image online yet, working on it, you can test it local by implement token api.


  • IE Support.


<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/angular-file-upload-shim.js"></script>
<script type="text/javascript" src="bower_components/ng-file-upload/angular-file-upload.js"></script>
<script type="text/javascript" src="src/editor.js"></script>
<link rel="stylesheet" href="src/editor.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">

<ng-meditor ng-model="content" placeholder="placeholder"></ng-meditor>

ng-file-upload needed for support uploading image.


//inject ngMeditor directives and services.
angular.module("ieditor", ['angularFileUpload','ngMeditor']);

// config
angular.module("ieditor").run(function ($http, meditorProvider) {
            supportCommands:['justfy', 'bold', 'italic', 'underline', 'H1', 'hr', 'code', 'insertOrderedList', 'eraser', 'image', 'fullscreen'],
            qnConfig: {
                endPoint: '',
                tokenFunc: function () {
                    return $'/token');

Support Insert Image

You need implement token API, for example:

package main

import (
    qauth ""
    qrs ""

func generateQiniuUpToken(scope, accessKey, secretKey string, sizeLimit int64) string {

    mac := qauth.Mac{AccessKey: accessKey, SecretKey: []byte(secretKey)}
    policy := qrs.PutPolicy{}
    policy.Scope = scope
    policy.ReturnBody = `{"key": $(key), "mimeType": $(mimeType), "fsize": $(fsize)}`
    policy.FsizeLimit = sizeLimit

    return policy.Token(&mac)

func main() {

    accessKey := os.Getenv("accessKey")
    secretKey := os.Getenv("secretKey")

    CDNDomain := ""
    bucket := "ngmeditor"
    fsizeLimit := 1024 * 1024

    mux := http.NewServeMux()
    mux.HandleFunc("/token", func(rw http.ResponseWriter, req *http.Request) {
        encoder := json.NewEncoder(rw)
        key := strconv.FormatInt(time.Now().UnixNano(), 10)
        m := map[string]interface{}{
            "key":   key,
            "token": generateQiniuUpToken(bucket+":"+key, accessKey, secretKey, int64(fsizeLimit)),
            "url":   CDNDomain + "/" + key,
    log.Fatalln(http.ListenAndServe(":8088", mux))


Javascript plugin