Releases v1.4.0

.gitignore

@@ -7,7 +7,7 @@ node_modules/
 research/
 test/
 backup/
-examples/uploads/
+examples/uploads/**/*
 *.bat
 *.sh
 .project

CHANGE.md

@@ -346,4 +346,75 @@ v1.2.0 主要更新：
     - 新增配置项`atLink`，默认为`true`; 
 - 修复无法输入`/`的问题 [#42](https://github.com/pandao/editor.md/issues/42)；
 - 修改使用帮助说明的错误 [#43](https://github.com/pandao/editor.md/issues/43)；
-- 新增配置项`pluginPath`，默认为空时，等于`settings.path + "../plugins/"`；
+- 新增配置项`pluginPath`，默认为空时，等于`settings.path + "../plugins/"`；
+
+### v1.4
+
+#### v1.4.0
+
+主要更新：
+
+- 新增延迟解析机制，预览更即时；
+- 新增跳转到指定行的功能和对话框；
+- 新增ToC下拉菜单、自定义ToC容器的功能；
+- 新增跳转到行、搜索的工具栏按钮；
+- 新增支持插入和解析（打印）分页符；
+- 改进快捷键功能和自动高度模式等；
+- 改进：将锚点链接改名为引用链接；
+- 改进编辑器重建和重配置功能；
+- 修复多个Bug；
+
+具体更新：
+
+- 新增延迟解析预览的机制，解决输入太多太快出现的 “延迟卡顿” 问题；
+    - 新增配置项`delay`，默认值为 `300`；
+    - 修复当输入速度太快时，解析Flowchart会抛出错误的问题；
+- 修改iPad等移动终端的浏览器无法上传图片的问题[#48](https://github.com/pandao/editor.md/issues/48)；
+- 修复单独引用`editormd.preview.css`时无法显示Font Awesome和Editor.md logo字体的问题；
+- 更新和修改Gulp构建；
+    - 修改了`Gulpfile.js`，并且`gulp-ruby-sass`升级到最新版本`1.0.0-alpha.3`; 
+    - 编辑SCSS时，不再生成CSS的Source map文件；
+- 执行jshint和更正一些JS写法的不规范，精简了代码；
+- 新增配置项`appendMarkdown`和`appendMarkdown()`方法，用于(初始化前后)追加Markdown到Textarea；
+- 改进部分预设快捷键功能，包括F9(watch)、F10(preview)、F11(fullscreen)等;
+- 修复自动高度模式下出现的几个问题；
+    - 全屏退出时高度不正确的问题：修改了`fullscreenExit()`方法的内部实现；
+    - 当解析预览后的HTML内容高度高于Markdown源码编辑器高度时，无法正确预览的问题[#49](https://github.com/pandao/editor.md/issues/49)；
+- 修改`onscroll`和`onpreviewscroll`无法访问`this`的问题；
+- 修改`init()`方法，可以只设置一个参数；
+- 新增插入TeX(KaTeX)公式的快捷键`Ctrl + Shift + K`和插入方法`tex()`；
+- 将锚点链接改为引用链接，引用的链接改为插入到页尾；
+    - 工具栏的名称`anchor`改为`reference-link`；
+    - 工具栏的名称`htmlEntities`改名为`html-entities`；
+- 改进编辑器重建和重配置功能；
+    - 修改了`loadedDisplay()`方法；
+    - 修改了`config()`和`recreate()`方法；
+- 新增跳转到指定行的功能；
+    - 新增方法`gotoLine()`；
+    - 新增跳转到行对话框插件`goto-line-dialog`；
+    - 新增快捷键`Ctrl + Alt + G`；
+    - 改进`executePlugin()`方法；
+    - 修改了`help-dialog/help.md`；
+- 新增搜索工具栏按钮；
+    - 新增方法`search()`、`searchReplace()`和`searchReplaceAll()`；
+    - 原全屏预览HTML按钮的图标改为`fa-desktop`；
+    - 改为默认开启搜索替换功能；
+- 更换了关于Editor.md的标语（slogan）；
+- 标题按钮`h`改为大写的`H`；
+- `saveToTextareas()`方法更名为`save()`；
+- 新增ToC下拉菜单、自定义ToC容器的功能；
+    - 新增Markdown扩展语法`[TOCM]`，自动生成ToC下拉菜单；
+    - 新增配置项`tocm`，默认为`true`，即可以使用`[TOCM]`；
+    - 新增配置项`tocDropdown`和`tocTitle`；
+    - 新增方法`editormd.tocDropdownMenu()`；
+    - 新增配置项`tocContainer`，值为jQuery选择器，默认为空；
+- 修改了配置项`placeholder`的默认值；
+- 改进对IE8的兼容支持；
+- 修复Firefox下因为`Object.watch()`而出现的问题；
+- 新增支持插入和解析（打印）分页符；
+    - 新增配置项`pageBreak`，默认值为`true`；
+    - 新增语法`[========]`，即括号内至少8个等号；
+    - 新增插入分页符的工具栏图标和方法`pagebreak()`；
+    - 新增插入分页符的快捷键`Shift + Alt + P`；
+- 修复一些Bug，包括[#51](https://github.com/pandao/editor.md/issues/51)等；
+- 新增和修改以上更新的相关示例；

Gulpfile.js

@@ -41,24 +41,23 @@ var scssTask = function(fileName, path) {
     
     var distPath = "css";
     
-    return gulp.src(path + fileName + ".scss")
-               .pipe(sass({ style: "expanded" }))   //nested,compact,expanded,compressed
-               .pipe(gulp.dest(distPath)) 
-                .pipe(header(headerComment, {pkg : pkg, fileName : function(file) { 
-                    var name = file.path.split(file.base);
-                    return name[1].replace("\\", "");
-                }}))
-               .pipe(gulp.dest(distPath)) 
-               .pipe(rename({ suffix: ".min" }))
-               .pipe(gulp.dest(distPath))
-               .pipe(minifycss())
-               .pipe(gulp.dest(distPath)) 
-                .pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { 
-                    var name = file.path.split(file.base);
-                    return name[1].replace("\\", "");
-                }}))
-               .pipe(gulp.dest(distPath)) 
-               .pipe(notify({ message: fileName + ".scss task completed!" }));
+    return sass(path + fileName + ".scss", { style: "expanded", sourcemap: false, noCache : true })
+        .pipe(gulp.dest(distPath))
+        .pipe(header(headerComment, {pkg : pkg, fileName : function(file) { 
+            var name = file.path.split(file.base);
+            return name[1].replace("\\", "");
+        }}))
+       .pipe(gulp.dest(distPath)) 
+       .pipe(rename({ suffix: ".min" }))
+       .pipe(gulp.dest(distPath))
+       .pipe(minifycss())
+       .pipe(gulp.dest(distPath)) 
+        .pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) { 
+            var name = file.path.split(file.base);
+            return name[1].replace("\\", "");
+        }}))
+       .pipe(gulp.dest(distPath)) 
+       .pipe(notify({ message: fileName + ".scss task completed!" }));
 };
 
 gulp.task("scss", function() { 
@@ -83,7 +82,7 @@ gulp.task("js", function() {
             }}))
             .pipe(gulp.dest("./"))
             .pipe(rename({ suffix: ".min" }))
-            .pipe(uglify({outSourceMap: true, sourceRoot: './'}))
+            .pipe(uglify())  // {outSourceMap: true, sourceRoot: './'}
             .pipe(gulp.dest("./"))	
             .pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
                 var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") );
@@ -185,7 +184,7 @@ gulp.task("amd", function() {
         .pipe(replace("/* Require.js assignment replace */", replaceText2))
         .pipe(gulp.dest('./'))
         .pipe(rename({ suffix: ".min" }))
-        .pipe(uglify({outSourceMap: true, sourceRoot: './'}))
+        .pipe(uglify()) //{outSourceMap: true, sourceRoot: './'}
         .pipe(gulp.dest("./"))
         .pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
             var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") );
@@ -275,11 +274,11 @@ gulp.task("cm-mode", function() {
     return gulp.src(modes)
                 .pipe(concat("modes.min.js"))
                 .pipe(gulp.dest(codeMirror.path.dist))
-                .pipe(uglify({outSourceMap: true, sourceRoot: codeMirror.path.dist}))
+                .pipe(uglify()) // {outSourceMap: true, sourceRoot: codeMirror.path.dist}
                 .pipe(gulp.dest(codeMirror.path.dist))	
                 .pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
-                    var name = file.path.split(file.base + "\\");
-                    return name[1].replace("\\", "");
+                    var name = file.path.split(file.base + "\\"); 
+                    return (name[1]?name[1]:name[0]).replace(/\\/g, "");
                 }}))
                 .pipe(gulp.dest(codeMirror.path.dist))
                 .pipe(notify({ message: "codemirror-mode task complete!" }));
@@ -297,11 +296,11 @@ gulp.task("cm-addon", function() {
     return gulp.src(addons)
                 .pipe(concat("addons.min.js"))
                 .pipe(gulp.dest(codeMirror.path.dist))
-                .pipe(uglify({outSourceMap: true, sourceRoot: codeMirror.path.dist}))
+                .pipe(uglify()) //{outSourceMap: true, sourceRoot: codeMirror.path.dist}
                 .pipe(gulp.dest(codeMirror.path.dist))	
                 .pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
                     var name = file.path.split(file.base + "\\");
-                    return name[1].replace("\\", "");
+                    return (name[1]?name[1]:name[0]).replace(/\\/g, "");
                 }}))
                 .pipe(gulp.dest(codeMirror.path.dist))
                 .pipe(notify({ message: "codemirror-addon.js task complete" }));

README.md

@@ -9,9 +9,9 @@
 ![](https://img.shields.io/github/issues/pandao/editor.md.svg)
 ![](https://img.shields.io/bower/v/editor.md.svg)
 
-**Editor.md** is an online markdown editor, based on CodeMirror & jQuery & Marked.
+**Editor.md** is the open source online markdown editor, based on CodeMirror & jQuery & Marked.
 
-###Features
+### Features
 
 - Support Standard Markdown and GFM(GitHub Flavored Markdown);
 - Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting...;
@@ -22,14 +22,16 @@
 - Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;
 
 [README & Examples (English)](https://pandao.github.io/editor.md/en.html)
+  
 
 --------
+  
 
 **Editor.md** 是一个基于CodeMirror、jQuery 和 Marked 构建的 Markdown 在线编辑器。
 
 ![editormd-screenshot](https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png "editormd-screenshot")
 
-####主要特性
+#### 主要特性
 
 - 支持“标准”Markdown和Github风格的语法，也可[变身为代码编辑器](https://pandao.github.io/editor.md/examples/change-mode.html)；
 - 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
@@ -39,36 +41,44 @@
 - 支持 AMD / CMD 模块化加载（支持 [Require.js](https://pandao.github.io/editor.md/examples/use-requirejs.html) & [Sea.js](https://pandao.github.io/editor.md/examples/use-seajs.html)），并且支持[自定义扩展插件](https://pandao.github.io/editor.md/examples/define-plugin.html)；
 - 兼容主流的浏览器（IE8+）和[Zepto.js](https://pandao.github.io/editor.md/examples/use-zepto.html)，且支持iPad等平板设备；
 
-####在线演示 (Examples)
+#### 在线演示 (Examples)
 
 [https://pandao.github.io/editor.md/examples/index.html](https://pandao.github.io/editor.md/examples/index.html)
 
-####下载和安装 (Download & install)
+#### 下载和安装 (Download & install)
 
 通过 [Github下载安装](https://github.com/pandao/editor.md/archive/master.zip)，或者通过 Bower 安装：
 
 	bower install editor.md
 
-####使用方法 (Usage)
+#### 使用方法 (Usage)
 
 HTML：
 
-    <link rel="stylesheet" href="../dist/css/editormd.css" />
-    <div id="test-editormd">
-        <textarea style="display:none;">###Hello world!</textarea>
+    <link rel="stylesheet" href="editormd.min.css" />
+    <div id="editormd">
+        <textarea style="display:none;">### Hello world!</textarea>
     </div>
 
 > 提示1：如果没有Markdown源内容或者通过Ajax异步加载Markdown源文档等，可以不添加`<textarea>`，会自动添加；
 
 javascript:
 
-    <script src="../lib/jquery.min.js"></script>
-    <script src="../src/js/editormd.js"></script>
+    <script src="jquery.min.js"></script>
+    <script src="editormd.min.js"></script>
     <script type="text/javascript">
         $(function() {
-            var testEditor = editormd("test-editormd", {
-                path : '../lib/' // codemirror、marked等依赖的库的路径
+            var editor = editormd("editormd", {
+                path : "../lib/" // codemirror, marked等依赖的库的路径
             });
+
+            /*
+            // or             
+            var editor = editormd({
+                id   : "editormd",
+                path : "../lib/"
+            });
+            */
         });
     </script>
 
@@ -76,7 +86,7 @@ javascript:
 
 > Sea.js的使用方法：[https://github.com/pandao/editor.md/tree/master/examples/use-seajs.html](https://github.com/pandao/editor.md/tree/master/examples/use-seajs.html)
 
-####依赖项目及感谢 (Dependents)
+#### 依赖项目及感谢 (Dependents)
 
 - [CodeMirror](http://codemirror.net/ "CodeMirror")
 - [marked](https://github.com/chjj/marked "marked")
@@ -90,11 +100,11 @@ javascript:
 - [sequence-diagram.js](http://bramp.github.io/js-sequence-diagrams/ "sequence-diagram.js")
 - [Prefixes.scss](https://github.com/pandao/prefixes.scss "Prefixes.scss")
 
-####Changes
+#### Changes
 
 [更新日志 Change logs](https://github.com/pandao/editor.md/blob/master/CHANGE.md)
 
-####License
+#### License
 
 The MIT License.
 

bower.json

@@ -1,11 +1,11 @@
 {
   "name": "editor.md",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "homepage": "https://github.com/pandao/editor.md",
   "authors": [
     "Pandao <pandao@vip.qq.com>"
   ],
-  "description": "A simple online markdown editor.",
+  "description": "Open source online markdown editor.",
   "keywords": [
     "editor.md",
     "markdown",

css/editormd.logo.css

@@ -1,107 +1,98 @@
 /*
  * Editor.md
  *
- * @file        editormd.logo.css 
- * @version     v1.3.0 
- * @description A simple online markdown editor.
+ * @file        /editormd.logo.css 
+ * @version     v1.4.0 
+ * @description Open source online markdown editor.
  * @license     MIT License
  * @author      Pandao
  * {@link       https://github.com/pandao/editor.md}
- * @updateTime  2015-03-12
+ * @updateTime  2015-03-23
  */
 
-/*!
- * prefixes.scss
- * @author    Pandao
- * @version   0.1.0
- * @homePage  https://github.com/pandao/prefixes.scss
- * @license   MIT
- * @copyright Copyright (c) 2015
- */
-@font-face {
-  font-family: 'editormd-logo';
-  src: url("../fonts/editormd-logo.eot?-5y8q6h");
-  src: url(".../fonts/editormd-logo.eot?#iefix-5y8q6h") format("embedded-opentype"), url("../fonts/editormd-logo.woff?-5y8q6h") format("woff"), url("../fonts/editormd-logo.ttf?-5y8q6h") format("truetype"), url("../fonts/editormd-logo.svg?-5y8q6h#icomoon") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-.editormd-logo,
-.editormd-logo-1x,
-.editormd-logo-2x,
-.editormd-logo-3x,
-.editormd-logo-4x,
-.editormd-logo-5x,
-.editormd-logo-6x,
-.editormd-logo-7x,
-.editormd-logo-8x {
-  font-family: 'editormd-logo';
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  font-size: inherit;
-  line-height: 1;
-  display: inline-block;
-  text-rendering: auto;
-  vertical-align: inherit;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.editormd-logo:before,
-.editormd-logo-1x:before,
-.editormd-logo-2x:before,
-.editormd-logo-3x:before,
-.editormd-logo-4x:before,
-.editormd-logo-5x:before,
-.editormd-logo-6x:before,
-.editormd-logo-7x:before,
-.editormd-logo-8x:before {
-  content: "\e1987";
-  /* 
-  HTML Entity 󡦇 
-  example: <span class="editormd-logo">&#xe1987;</span>
-  */
-}
-
-.editormd-logo-1x {
-  font-size: 1em;
-}
-
-.editormd-logo-lg {
-  font-size: 1.2em;
-}
-
-.editormd-logo-2x {
-  font-size: 2em;
-}
-
-.editormd-logo-3x {
-  font-size: 3em;
-}
-
-.editormd-logo-4x {
-  font-size: 4em;
-}
-
-.editormd-logo-5x {
-  font-size: 5em;
-}
-
-.editormd-logo-6x {
-  font-size: 6em;
-}
-
-.editormd-logo-7x {
-  font-size: 7em;
-}
-
-.editormd-logo-8x {
-  font-size: 8em;
-}
-
-.editormd-logo-color {
-  color: #2196F3;
-}
-
-/*# sourceMappingURL=editormd.logo.css.map */
+/*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */
+@font-face {
+  font-family: 'editormd-logo';
+  src: url("../fonts/editormd-logo.eot?-5y8q6h");
+  src: url(".../fonts/editormd-logo.eot?#iefix-5y8q6h") format("embedded-opentype"), url("../fonts/editormd-logo.woff?-5y8q6h") format("woff"), url("../fonts/editormd-logo.ttf?-5y8q6h") format("truetype"), url("../fonts/editormd-logo.svg?-5y8q6h#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+.editormd-logo,
+.editormd-logo-1x,
+.editormd-logo-2x,
+.editormd-logo-3x,
+.editormd-logo-4x,
+.editormd-logo-5x,
+.editormd-logo-6x,
+.editormd-logo-7x,
+.editormd-logo-8x {
+  font-family: 'editormd-logo';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  font-size: inherit;
+  line-height: 1;
+  display: inline-block;
+  text-rendering: auto;
+  vertical-align: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.editormd-logo:before,
+.editormd-logo-1x:before,
+.editormd-logo-2x:before,
+.editormd-logo-3x:before,
+.editormd-logo-4x:before,
+.editormd-logo-5x:before,
+.editormd-logo-6x:before,
+.editormd-logo-7x:before,
+.editormd-logo-8x:before {
+  content: "\e1987";
+  /* 
+  HTML Entity &#xe1987; 
+  example: <span class="editormd-logo">&#xe1987;</span>
+  */
+}
+
+.editormd-logo-1x {
+  font-size: 1em;
+}
+
+.editormd-logo-lg {
+  font-size: 1.2em;
+}
+
+.editormd-logo-2x {
+  font-size: 2em;
+}
+
+.editormd-logo-3x {
+  font-size: 3em;
+}
+
+.editormd-logo-4x {
+  font-size: 4em;
+}
+
+.editormd-logo-5x {
+  font-size: 5em;
+}
+
+.editormd-logo-6x {
+  font-size: 6em;
+}
+
+.editormd-logo-7x {
+  font-size: 7em;
+}
+
+.editormd-logo-8x {
+  font-size: 8em;
+}
+
+.editormd-logo-color {
+  color: #2196F3;
+}

css/editormd.logo.min.css

@@ -1,9 +1,2 @@
-/*! Editor.md v1.3.0 | editormd.logo.min.css | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-12 */
-/*!
- * prefixes.scss
- * @author    Pandao
- * @version   0.1.0
- * @homePage  https://github.com/pandao/prefixes.scss
- * @license   MIT
- * @copyright Copyright (c) 2015
- */@font-face{font-family:editormd-logo;src:url(../fonts/editormd-logo.eot?-5y8q6h);src:url(.../fonts/editormd-logo.eot?#iefix-5y8q6h) format("embedded-opentype"),url(../fonts/editormd-logo.woff?-5y8q6h) format("woff"),url(../fonts/editormd-logo.ttf?-5y8q6h) format("truetype"),url(../fonts/editormd-logo.svg?-5y8q6h#icomoon) format("svg");font-weight:400;font-style:normal}.editormd-logo,.editormd-logo-1x,.editormd-logo-2x,.editormd-logo-3x,.editormd-logo-4x,.editormd-logo-5x,.editormd-logo-6x,.editormd-logo-7x,.editormd-logo-8x{font-family:editormd-logo;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:inherit;line-height:1;display:inline-block;text-rendering:auto;vertical-align:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.editormd-logo-1x:before,.editormd-logo-2x:before,.editormd-logo-3x:before,.editormd-logo-4x:before,.editormd-logo-5x:before,.editormd-logo-6x:before,.editormd-logo-7x:before,.editormd-logo-8x:before,.editormd-logo:before{content:"\e1987"}.editormd-logo-1x{font-size:1em}.editormd-logo-lg{font-size:1.2em}.editormd-logo-2x{font-size:2em}.editormd-logo-3x{font-size:3em}.editormd-logo-4x{font-size:4em}.editormd-logo-5x{font-size:5em}.editormd-logo-6x{font-size:6em}.editormd-logo-7x{font-size:7em}.editormd-logo-8x{font-size:8em}.editormd-logo-color{color:#2196F3}
+/*! Editor.md v1.4.0 | /editormd.logo.min.css | Open source online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-23 */
+/*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */@font-face{font-family:editormd-logo;src:url(../fonts/editormd-logo.eot?-5y8q6h);src:url(.../fonts/editormd-logo.eot?#iefix-5y8q6h)format("embedded-opentype"),url(../fonts/editormd-logo.woff?-5y8q6h)format("woff"),url(../fonts/editormd-logo.ttf?-5y8q6h)format("truetype"),url(../fonts/editormd-logo.svg?-5y8q6h#icomoon)format("svg");font-weight:400;font-style:normal}.editormd-logo,.editormd-logo-1x,.editormd-logo-2x,.editormd-logo-3x,.editormd-logo-4x,.editormd-logo-5x,.editormd-logo-6x,.editormd-logo-7x,.editormd-logo-8x{font-family:editormd-logo;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:inherit;line-height:1;display:inline-block;text-rendering:auto;vertical-align:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.editormd-logo-1x:before,.editormd-logo-2x:before,.editormd-logo-3x:before,.editormd-logo-4x:before,.editormd-logo-5x:before,.editormd-logo-6x:before,.editormd-logo-7x:before,.editormd-logo-8x:before,.editormd-logo:before{content:"\e1987"}.editormd-logo-1x{font-size:1em}.editormd-logo-lg{font-size:1.2em}.editormd-logo-2x{font-size:2em}.editormd-logo-3x{font-size:3em}.editormd-logo-4x{font-size:4em}.editormd-logo-5x{font-size:5em}.editormd-logo-6x{font-size:6em}.editormd-logo-7x{font-size:7em}.editormd-logo-8x{font-size:8em}.editormd-logo-color{color:#2196F3}

examples/@links.html

@@ -94,6 +94,20 @@ This is an H1 @pandao
 
 This @pandao an H2 @pandao
 -------------
+
+http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png
+
+http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png
+
+http://socialpro.demo.ipandao.com/app/images/welcom-logo@4x.png
+
+[![http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
+
+
+[http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
+[http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png)
+
+![http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
 </textarea>
             </div>
         </div>        

examples/auto-height.html

@@ -10,16 +10,17 @@
     <body>
         <div id="layout">
             <header>
-                <h1>Auto height</h1>
+                <h1>Auto height test</h1>
             </header>
+            <div class="btns">
+                <button id="append-btn">Append markdown</button>
+            </div>
             <div id="test-editormd">
                 <textarea style="display:none;">### Settings
 
 ```javascript
 var testEditor = editormd("test-editormd", {
-    width      : "90%",
-    autoHeight : true,
-    path       : '../lib/'
+    autoHeight : true
 });
 ```
 </textarea>
@@ -32,9 +33,21 @@ var testEditor = editormd("test-editormd", {
 
             $(function() {
                 testEditor = editormd("test-editormd", {
-                    width      : "90%",
-                    autoHeight : true,
-                    path       : '../lib/'
+                    width           : "90%",
+                    autoHeight      : true,
+                    path            : "../lib/",
+                    htmlDecode      : "style,script,iframe", 
+                    tex             : true,
+                    emoji           : true,
+                    taskList        : true,
+                    flowChart       : true, 
+                    sequenceDiagram : true
+                });
+                
+                $("#append-btn").click(function(){
+                    $.get("./test.md", function(md){
+                        testEditor.appendMarkdown(md);
+                    });
                 });
             });
         </script>

examples/delay-renderer-preview.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh">
+    <head>
+        <meta charset="utf-8" />
+        <title>Delay Rerender & Preview - Editor.md examples</title>
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel="stylesheet" href="../css/editormd.css" />
+        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
+    </head>
+    <body>
+        <div id="layout">
+            <header>
+                <h1>Delay Rerender & Preview</h1>
+                <p>P.S. If you input the content too much and too fast, You can setting the delay value. </p>
+                <p>P.S. 适用于输入内容太多太快的情形，但要是一个合理的值，不然会显得预览太慢。打字慢会相对显得慢，打字快时则相对显得快。</p>
+            </header>
+            <div id="test-editormd">
+                <textarea style="display:none;">#### Setting
+
+    {
+        delay : 300 // Uint : ms, default value is 300, and this example is set value 1000
+    }
+
+
+</textarea>
+            </div>
+        </div>
+        <script src="js/jquery.min.js"></script>
+        <script src="../editormd.js"></script>
+        <script type="text/javascript">
+			var testEditor;
+
+            $(function() {
+                
+                $.get("test.md", function(md) {
+                    testEditor = editormd("test-editormd", {
+                        width              : "90%",
+                        height             : 640,
+                        path               : "../lib/",
+                        delay              : 1000,
+                        appendMarkdown     : md,
+                        codeFold           : true,
+                        saveHTMLToTextarea : true,
+                        searchReplace      : true,
+                        htmlDecode         : "style,script,iframe",
+                        emoji              : true,
+                        taskList           : true,
+                        tex                : true,
+                        flowChart          : true,
+                        sequenceDiagram    : true
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>

examples/form-get-value.html

@@ -15,7 +15,7 @@
             </header>
             <form method="post" action="http://editormd.ipandao.com/php/post.php">
                 <div id="test-editormd">
-                    <textarea style="display:none;">####表单取值
+                    <textarea style="display:none;">#### Get value
 
 每个Editor.md的ID元素下都包含两个Textarea，一个保存Markdown源码，一个保存HTML源码，可以按需要获取相应的值，如下：
 
@@ -28,14 +28,14 @@
 &lt;/div&gt;
 ```
 
-####JS取值
+#### Example
 
 ```javascript
 var testEditor = editormd("test-editormd", {
     width  : "90%",
     height : 640,
-    saveHTMLToTextarea : true,
-    path   : '../lib/'
+    path   : "../lib/",
+    saveHTMLToTextarea : true
 });
 
 testEditor.getMarkdown();       // 获取Markdown源码
@@ -43,7 +43,7 @@ testEditor.getHTML();           // 获取Textarea保存的HTML源码
 testEditor.getPreviewedHTML();  // 获取预览窗口里的HTML，在开启watch且没有开启saveHTMLToTextarea时使用
 ```
 
-####后台取值
+#### Backend get form value
 
 假设编辑器ID为`test-editormd`，以PHP为例：
 
@@ -59,7 +59,9 @@ testEditor.getPreviewedHTML();  // 获取预览窗口里的HTML，在开启watch
         echo "</pre>";
     }
 ?>
-```</textarea>
+```
+
+</textarea>
                 </div>
                 <div style="width:90%;margin: 10px auto;">
                     <input type="submit" name="submit" value="提交表单 Submit" style="padding: 5px;" /> 
@@ -70,11 +72,14 @@ testEditor.getPreviewedHTML();  // 获取预览窗口里的HTML，在开启watch
         <script src="../editormd.js"></script>   
         <script type="text/javascript">
             $(function() {
-                var testEditor = editormd("test-editormd", {
-                    width  : "90%",
-                    height : 640,
-                    saveHTMLToTextarea : true,
-                    path   : '../lib/'
+                $.get("./test.md", function(md) {
+                    var testEditor = editormd("test-editormd", {
+                        width  : "90%",
+                        height : 640,
+                        path   : "../lib/",
+                        appendMarkdown : md,
+                        saveHTMLToTextarea : true
+                    });
                 });
 
                 //testEditor.getMarkdown();       // 获取Markdown源码

examples/full.html

@@ -16,19 +16,23 @@
                     <li>Enable HTML tags decode</li>
                     <li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
                     <li>Enable Image upload</li>
+                    <li>Enable [TOCM], Search Replace, Code fold</li>
                 </ul>            
             </header>
             <div class="btns">
+                <button id="goto-line-btn">Goto line 90</button>
                 <button id="show-btn">Show editor</button>
                 <button id="hide-btn">Hide editor</button>
                 <button id="get-md-btn">Get Markdown</button>
                 <button id="get-html-btn">Get HTML</button>
                 <button id="watch-btn">Watch</button>
                 <button id="unwatch-btn">Unwatch</button>
-                <button id="preview-btn">Preview HTML(Press ESC cancel)</button>
+                <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
                 <button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
                 <button id="show-toolbar-btn">Show toolbar</button>
                 <button id="close-toolbar-btn">Hide toolbar</button>
+                <button id="toc-menu-btn">ToC Dropdown menu</button>
+                <button id="toc-default-btn">ToC default</button>
             </div>
             <div id="test-editormd"></div>
         </div>
@@ -49,11 +53,12 @@
                         saveHTMLToTextarea : true,    // 保存HTML到Textarea
                         searchReplace : true,
                         //watch : false,                // 关闭实时预览
-                        htmlDecode : true,            // 开启HTML标签解析，为了安全性，默认不开启    
+                        htmlDecode : "style,script,iframe",            // 开启HTML标签解析，为了安全性，默认不开启    
                         //toolbar  : false,             //关闭工具栏
                         //previewCodeHighlight : false, // 关闭预览HTML的代码块高亮，默认开启
                         emoji : true,
                         taskList : true,
+                        tocm            : true,         // Using [TOCM]
                         tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                         flowChart : true,             // 开启流程图支持，默认关闭
                         sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
@@ -79,6 +84,10 @@
                     });
                 });
                 
+                $("#goto-line-btn").bind("click", function(){
+                    testEditor.gotoLine(90);
+                });
+                
                 $("#show-btn").bind('click', function(){
                     testEditor.show();
                 });
@@ -118,6 +127,17 @@
                 $("#close-toolbar-btn").bind('click', function() {
                     testEditor.hideToolbar();
                 });
+                
+                $("#toc-menu-btn").click(function(){
+                    testEditor.config({
+                        tocDropdown   : true,
+                        tocTitle      : "目录 Table of Contents",
+                    });
+                });
+                
+                $("#toc-default-btn").click(function() {
+                    testEditor.config("tocDropdown", false);
+                });
             });
         </script>
     </body>

examples/goto-line.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh">
+    <head>
+        <meta charset="utf-8" />
+        <title>Goto line - Editor.md examples</title>
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel="stylesheet" href="../css/editormd.css" />   
+        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />     
+    </head>
+    <body>
+        <div id="layout">
+            <header>
+                <h1>Goto line</h1>   
+            </header>
+            <div class="btns">
+                <button id="goto-line-btn">Goto line 90</button>
+                <button id="goto-line-150-btn">Goto line 150</button>
+                <button id="goto-line-240-btn">Goto line 240</button>
+                <button id="goto-line-300-btn">Goto line 300</button>
+                <button id="goto-line-400-btn">Goto line 400</button>
+                <button id="goto-first-line-btn">Goto first line</button>
+                <button id="goto-last-line-btn">Goto last line</button>
+            </div>
+            <div id="test-editormd"></div>
+        </div>
+        <script src="js/jquery.min.js"></script>
+        <script src="../editormd.js"></script>
+        <script type="text/javascript">
+            var testEditor;
+            
+            $(function() {
+                
+                $.get("test.md", function(md){
+                    testEditor = editormd("test-editormd", {
+                        width           : "90%",
+                        height          : 740,
+                        path            : "../lib/",
+                        markdown        : md,
+                        codeFold        : true,
+                        htmlDecode      : "style,script,iframe",
+                        tex             : true,
+                        emoji           : true,
+                        taskList        : true,
+                        flowChart       : true,
+                        sequenceDiagram : true,
+                        //gotoLine        : false  // disabled
+                    });
+                });
+                
+                $("#goto-line-btn").bind("click", function(){
+                    testEditor.gotoLine(90);
+                });
+                
+                $("#goto-line-150-btn").bind("click", function(){
+                    testEditor.gotoLine(150);
+                });
+                
+                $("#goto-line-240-btn").bind("click", function(){
+                    testEditor.gotoLine(240);
+                });
+                
+                $("#goto-line-300-btn").bind("click", function(){
+                    testEditor.gotoLine(300);
+                });
+                
+                $("#goto-line-400-btn").bind("click", function(){
+                    testEditor.gotoLine(400);
+                });
+                
+                $("#goto-first-line-btn").bind("click", function(){
+                    testEditor.gotoLine("first");
+                    // or
+                    //testEditor.gotoLine(1);
+                });
+                
+                $("#goto-last-line-btn").bind("click", function(){
+                    testEditor.gotoLine("last");
+                    // or
+                    //testEditor.gotoLine(testEditor.cm.lineCount());
+                });
+            });
+        </script>
+    </body>
+</html>

examples/html-preview-markdown-to-html.html

@@ -21,11 +21,11 @@
                 <p>HTML Preview(markdown to html)</p>       
             </header>
             <div id="test-editormd-view">
-               <textarea style="display:none;">###Hello world!</textarea>               
+               <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>               
             </div>
             <div id="test-editormd-view2">
                 <textarea id="append-test" style="display:none;">
-            
+
 ###科学公式 TeX(KaTeX)
                     
 $$E=mc^2$$
@@ -84,30 +84,34 @@ alert("script");
             $(function() {
                 $.get("test.md", function(markdown) {
 				    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
-                        markdown : markdown + $("#append-test").val(),
-                        //htmlDecode : true,       // 开启HTML标签解析，为了安全性，默认不开启
-                        htmlDecode : "style,script,iframe",  // you can filter tags decode
-                        //toc : false,
-                        //gfm : false,
-                        emoji : true,
-                        taskList : true,
-                        tex : true,              // 默认不解析
-                        flowChart: true,         // 默认不解析
+                        markdown        : markdown + "\r\n" + $("#append-test").val(),
+                        //htmlDecode      : true,       // 开启HTML标签解析，为了安全性，默认不开启
+                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
+                        //toc             : false,
+                        tocm            : true,    // Using [TOCM]
+                        //gfm             : false,
+                        //tocDropdown     : true,
+                        emoji           : true,
+                        taskList        : true,
+                        tex             : true,              // 默认不解析
+                        flowChart       : true,         // 默认不解析
                         sequenceDiagram : true,  // 默认不解析
                     });
                     
                     //console.log("返回一个jQuery实例 =>", testEditormdView);
                     
                     // 获取Markdown源码
-                    //console.log(testEditormdView.getMarkdown());
+                    console.log(testEditormdView.getMarkdown());
+                    
+                    //alert(testEditormdView.getMarkdown());
                 });
                     
                 testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
-                    htmlDecode : "style,script,iframe",  // you can filter tags decode
-                    emoji : true,
-                    taskList : true,
-                    tex : true,              // 默认不解析
-                    flowChart: true,         // 默认不解析
+                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
+                    emoji           : true,
+                    taskList        : true,
+                    tex             : true,              // 默认不解析
+                    flowChart       : true,         // 默认不解析
                     sequenceDiagram : true,  // 默认不解析
                 });
             });

examples/index.html

@@ -7,29 +7,38 @@
         <link rel="stylesheet" href="../css/editormd.css" />
         <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
 		<style>
+            #layout {
+                padding-bottom: 100px;
+            }
+            
             #header {
                 width: 100%;
                 color: #fff;
                 background: #2196F3;
-                padding: 80px 0;
+                padding: 60px 0;
                 text-align: center;
                 margin-bottom: 30px;
             }
             
+            a {
+                color: #2196F3;
+                text-decoration: none;
+            }
+            
             #header h1 {
-                font-size: 48px; 
+                font-size: 45px; 
                 font-weight: normal;
             }
             
 			ul { 
 				width: 90%;
-                padding-bottom: 50px;
+                padding-bottom:30px;
 				margin: 0 auto;
 				list-style: none;
 			}
             
             ul li {
-                width: 33%;
+                width: 24%;
                 margin-bottom: 4px;
                 display: inline-block;
             }
@@ -61,14 +70,74 @@
             ul li a:hover span {
                 color: #fff;
             }
+            
+            .category, .footer {
+				width: 90%;
+                padding: 15px;
+                font-size: 18px;
+				margin: 15px auto 20px;
+                border-bottom: 1px solid #eee;
+            }
+            
+            .footer {
+                border: none;
+                border-top: 1px solid #eee;
+                font-size: 12px;
+                margin-top: 30px;
+                padding-top: 35px;
+                text-align: right;                
+            }
+            
+            .menu {
+                margin-top: 20px;
+                text-align: center;
+            }
+            
+            .menu a {
+                color: #fff;
+                display: inline-block;
+                text-decoration: none;
+                padding: 8px 15px;
+                border-radius: 5px;
+                -webkit-transition: background-color 300ms ease-out;
+                transition: background-color 300ms ease-out;
+            }
+            .menu a:hover {
+                background-color: #1A8BE8;
+            }
+            
+            [href="#top"] {
+                color: #999;
+                float: right;
+                padding-top: 10px;
+                display: block;
+                text-decoration: none;
+                font-size: 12px;
+                font-weight: normal;
+            }
+            
+            [href="#top"] .fa {
+                margin-left: 8px;
+                font-size: 1.4em;
+            }
 		</style>
     </head>
     <body>
+        <a name="top"></a>
         <div id="layout">
             <div id="header">
-                <h1><i class="editormd-logo editormd-logo-4x"></i></h1>
-                <h1>Editor.md examples</h1> 
+                <h1><i class="editormd-logo editormd-logo-3x"></i></h1>
+                <h1>Editor.md Examples</h1>
+                <p>Open source online markdown editor.</p>
+                <div class="menu">
+                    <a href="#basic">Basic</a>
+                    <a href="#customs">自定义 Customs</a>
+                    <a href="#markdown-extras">Markdown Extras</a>
+                    <a href="#image-upload">Image Upload</a>
+                    <a href="#events">事件处理 Events handle</a>
+                </div>
             </div>
+			<h1 class="category"><a name="basic"></a>Basic</h1>
 			<ul>
 				<li>
 					<a href="./simple.html">简单示例 <span>Simple example</span></a>
@@ -77,37 +146,31 @@
 					<a href="./full.html">完整示例 <span>Full example</span></a>
 				</li>
 				<li>
-					<a href="./use-requirejs.html">使用Require.js <span>Using Require.js example</span></a>
+					<a href="./use-requirejs.html">使用Require.js <span>Using Require.js</span></a>
 				</li>
 				<li>
-					<a href="./use-seajs.html">使用Sea.js <span>Using Seajs example</span></a>
+					<a href="./use-seajs.html">使用Sea.js <span>Using Seajs</span></a>
 				</li>
 				<li>
 					<a href="./use-zepto.html">使用Zepto.js <span>Using Zepto.js</span></a>
 				</li>
-				<li>
-					<a href="./toc.html">自动生成目录 ToC <span>Table of Contents example</span></a>
-				</li>
 				<li>
 					<a href="./form-get-value.html">表单取值 <span>Get textarea value in form</span></a>
 				</li>
 				<li>
-					<a href="./html-tags-decode.html">识别和解析HTML标签 <span>HTML tags decode</span></a>
-				</li>
-				<li>
-					<a href="./html-preview-markdown-to-html.html">Markdown转HTML的显示处理 <span>Markdown to HTML for preview</span></a>
-				</li>
-				<li>
-					<a href="./image-upload.html">图片上传 <span>Image upload</span></a>
-				</li>
-				<li>
-					<a href="./image-cross-domain-upload.html">图片跨域上传 <span>Image cross-domain upload</span></a>
+					<a href="./html-preview-markdown-to-html.html">非编辑时Markdown转HTML的显示处理 <span>Markdown to HTML for preview</span></a>
 				</li>
+			</ul>
+			<h1 class="category">
+			    <a href="#top">TOP<i class="fa fa-angle-up"></i></a>
+			    <a name="customs"></a>自定义 Customs
+			</h1>
+			<ul>
 				<li>
 					<a href="./custom-toolbar.html">自定义工具栏 <span>Custom toolbar</span></a>
 				</li>
 				<li>
-					<a href="./multi-languages.html">多语言支持 <span>Multi-languages for l18n</span></a>
+					<a href="./multi-languages.html">多语言 <span>Multi-languages for l18n</span></a>
 				</li>
 				<li>
 					<a href="./auto-height.html">自动高度 <span>Auto height</span></a>
@@ -118,11 +181,17 @@
 				<li>
 					<a href="./dynamic-create-editormd.html">动态创建Editor.md <span>Dynamic create Editor.md</span></a>
 				</li>
+				<li>
+					<a href="./delay-renderer-preview.html">延迟解析和预览 <span>Delay Rerender & Preview</span></a>
+				</li>
 				<li>
 					<a href="./multi-editormd.html">多个Editor.md并存 <span>Multi Editor.md</span></a>
 				</li>
 				<li>
-					<a href="./readonly.html">只读模式 <span>Editor.md read only</span></a>
+					<a href="./goto-line.html">跳转到指定的行 <span>Jump/goto line</span></a>
+				</li>
+				<li>
+					<a href="./readonly.html">只读模式 <span>Read only mode</span></a>
 				</li>
 				<li>
 					<a href="./themes.html">自定义编辑器样式主题 <span>Setting/change editor style theme</span></a>
@@ -136,71 +205,149 @@
 				<li>
 					<a href="./custom-keyboard-shortcuts.html">自定义键盘快捷键 <span>Custom keyboard shortcuts</span></a>
 				</li>
+				<li>
+				    <a href="./define-plugin.html">自定义插件 <span>Define extention plugins for Editor.md</span></a>
+				</li>
+				<li>
+				    <a href="./manually-load-modules.html">手动加载依赖模块文件 <span>Manually loading dependent module files.</span></a>
+				</li>
+				<li>
+				    <a href="./external-use.html">外部使用工具栏的操作方法和对话框 <span>External use of toolbar handlers / modal dialog</span></a>
+				</li>
+				<li>
+				    <a href="./resettings.html">加载完成且创建成功之后的重配置 <span>loaded resettings</span></a>
+				</li>
+				<li>
+					<a href="./change-mode.html">变身为代码编辑器 <span>Change mode become to the code editor</span></a>
+				</li>
 				<li>
 					<a href="./set-get-replace-selection.html">插入字符/设置和获取光标位置/设置、获取和替换选中的文本 <span>Insert value & Set/Get cursor & Set/Get/Replace selection</span></a>
 				</li>
 				<li>
 				    <a href="./extends.html">扩展成员方法和属性 <span>Expanded of member methods and properties</span></a>
 				</li>
+            </ul>
+			<h1 class="category">
+			    <a href="#top">TOP<i class="fa fa-angle-up"></i></a>
+			    <a name="markdown-extras"></a>Markdown Extras
+			</h1>
+			<ul>
 				<li>
-				    <a href="./define-plugin.html">自定义插件 <span>Define extention plugins for Editor.md</span></a>
+					<a href="./html-tags-decode.html">识别和（过滤）解析HTML标签 <span>HTML tags (fliter) decode</span></a>
 				</li>
 				<li>
-				    <a href="./manually-load-modules.html">手动加载依赖模块文件 <span>Manually loading dependent module files.</span></a>
+					<a href="./toc.html">自动生成目录(下拉菜单) ToC/ToCM <span>Table of Contents (ToC)</span></a>
 				</li>
 				<li>
-				    <a href="./external-use.html">外部使用工具栏的操作方法和对话框 <span>External use of toolbar handlers / modal dialog</span></a>
+					<a href="./task-lists.html">GFM 任务列表 <span>Github Flavored Markdown (GFM) Task Lists</span></a>
 				</li>
 				<li>
-				    <a href="./resettings.html">加载完成且创建成功之后的重配置 <span>loaded resettings</span></a>
+					<a href="./@links.html">@链接 <span>@links</span></a>
 				</li>
 				<li>
-					<a href="./change-mode.html">变身为代码编辑器 <span>Change mode become to the code editor</span></a>
+					<a href="./emoji.html">Emoji / Twemoji 表情 / Font Awesome 图标 <span>Emoji / Twemoji / Font Awesome icons</span></a>
 				</li>
 				<li>
-				    <a href="./on-off.html">事件注册和解除方法 <span>On / Off (bind/unbind) event handle</span></a>
+					<a href="./katex.html">科学公式 TeX <span>TeX/LaTeX (Based on KaTeX)</span> </a>
 				</li>
 				<li>
-					<a href="./onload.html">加载完成事件处理 <span>Onload event handle example</span></a>
+					<a href="./flowchart.html">流程图 <span>FlowChart example</span></a>
 				</li>
 				<li>
-					<a href="./onchange.html">变化监听处理 <span>Onchange event handle example</span></a>
+					<a href="./sequence-diagram.html">时序/序列图 <span>Sequence Diagram example</span></a>
 				</li>
 				<li>
-					<a href="./onfullscreen.html">全屏事件处理 <span>Onfullscreen / onfullscreenExit event handle example</span></a>
+					<a href="./page-break.html">分页符 <span>Page break</span></a>
 				</li>
+            </ul>
+			<h1 class="category">
+			    <a href="#top">TOP<i class="fa fa-angle-up"></i></a>
+			    <a name="image-upload"></a>Image Upload
+			</h1>
+			<ul>
 				<li>
-				    <a href="./onresize.html">Onresize<span>onresize event handle</span></a>
+					<a href="./image-upload.html">图片上传 <span>Image upload</span></a>
 				</li>
 				<li>
-				    <a href="./onpreviewing-onpreviewed.html">Onpreviewing / Onpreviewed<span>Onpreviewing / Onpreviewed event handle</span></a>
+					<a href="./image-cross-domain-upload.html">图片跨域上传 <span>Image cross-domain upload</span></a>
 				</li>
+            </ul>
+			<h1 class="category">
+			    <a href="#top">TOP<i class="fa fa-angle-up"></i></a>
+			    <a name="events"></a>事件处理 Events handle
+			</h1>
+			<ul>
 				<li>
-				    <a href="./onwatch-onunwatch.html">Onwatch / Onunwatch<span>Onwatch / Onunwatch event handle</span></a>
+				    <a href="./on-off.html">事件注册和解除方法 <span>On / Off (bind/unbind) event handle</span></a>
 				</li>
 				<li>
-				    <a href="./onscroll-onpreviewscroll.html">Onscroll / Onpreviewscroll<span>Onscroll / Onpreviewscroll event handle</span></a>
+					<a href="./onload.html">加载完成事件处理 <span>Onload event handle example</span></a>
 				</li>
 				<li>
-					<a href="./task-lists.html">Github Flavored Markdown任务列表 <span>Github Flavored Markdown (GFM) Task Lists</span></a>
+					<a href="./onchange.html">变化监听处理 <span>Onchange event handle example</span></a>
 				</li>
 				<li>
-					<a href="./@links.html">@链接 <span>@links</span></a>
+					<a href="./onfullscreen.html">全屏事件处理 <span>Onfullscreen / onfullscreenExit event handle example</span></a>
 				</li>
 				<li>
-					<a href="./emoji.html">Emoji表情 <span>Emoji</span></a>
+				    <a href="./onresize.html">Onresize<span>Onresize event handle</span></a>
 				</li>
 				<li>
-					<a href="./katex.html">科学公式 TeX <span>Based on KaTeX</span> </a>
+				    <a href="./onpreviewing-onpreviewed.html">Onpreviewing / Onpreviewed<span>Onpreviewing / Onpreviewed event handle</span></a>
 				</li>
 				<li>
-					<a href="./flowchart.html">流程图 <span>FlowChart example</span></a>
+				    <a href="./onwatch-onunwatch.html">Onwatch / Onunwatch<span>Onwatch / Onunwatch event handle</span></a>
 				</li>
 				<li>
-					<a href="./sequence-diagram.html">时序/序列图 <span>Sequence Diagram example</span></a>
+				    <a href="./onscroll-onpreviewscroll.html">Onscroll / Onpreviewscroll<span>Onscroll / Onpreviewscroll event handle</span></a>
 				</li>
 			</ul>
             <div class="clear"></div>
+            <div class="footer">
+                <p>
+                    <a href="https://pandao.github.io/editor.md/" target="_blank" title="Editor.md">
+                        <img src="https://pandao.github.io/editor.md/images/logos/editormd-logo-64x64.png"/>
+                    </a>
+                </p>
+                <p>Copyright &copy; 2015 <a href="https://pandao.github.io/editor.md/" target="_blank" title="Editor.md">Editor.md</a></p>
+                <p>Open source online markdown editor. <a href="https://github.com/pandao/editor.md" class="fa fa-github fa-lg" target="_blank" title="Editor.md in Github"></a></p>
+                <p>The <a href="https://github.com/pandao/editor.md/blob/master/LICENSE" target="_blank">MIT</a> license</p>
+            </div>
         </div>
+        <script src="js/jquery.min.js"></script>
+        <script>
+            var clickOrTouch = function(touchType) {
+                touchType = touchType || "touchend";
+                var eventType = "click";
+
+                try {
+                    document.createEvent("TouchEvent");
+                    eventType = touchType;
+                } catch(e) {}
+
+                return eventType;
+            };
+            
+            $(function() {
+        
+                $("a[href*=#]").bind(clickOrTouch(), function() {
+                    if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) 
+                    {
+                        var hash   = this.hash;
+                        var target = $(hash);
+                        target     = target.length && target || $("[name=" + hash.slice(1) + "]");
+
+                        if (target.length) 
+                        {                            
+                            $("html, body").animate({
+                                scrollTop: target.offset().top
+                            }, 800);
+
+                            return false;
+                        }
+                    }
+                });
+            });
+        </script>
     </body>
 </html>

examples/on-off.html

@@ -14,7 +14,45 @@
                 <p>Plaese press F12, open the develop tools.</p>     
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">## Onscroll / Onpreviewscroll</textarea>
+                <textarea style="display:none;">#### Example
+```javascript
+{
+    onscroll : function(event) {
+        console.clear();
+        console.log("onscroll =>", this, this.id, this.settings, event);
+    },
+
+    onpreviewscroll : function(event) {
+        console.clear();
+        console.log("onpreviewscroll =>", this, this.id, this.settings, event);
+    },
+
+    onload : function() {
+        this.off("previewscroll"); // unbind before handle
+
+        // Override settings.onpreviewscroll
+        this.on("previewscroll", function(){
+            console.clear();
+            console.log("on() => Override settings.onpreviewscroll =>", this, this.id, event, (new Date).getTime());
+        });
+
+        // defined event bind
+        this.on("resize", function(){
+            console.clear();
+            console.log("onresize =>", this, this.id, event, (new Date).getTime());
+        });
+    }
+}
+
+// Or
+editor.on("resize", function(){
+    // ...
+});
+
+editor.off("resize");
+```
+
+</textarea>
             </div>
         </div>        
         <script src="js/jquery.min.js"></script>
@@ -27,7 +65,7 @@
                     testEditor = editormd("test-editormd", {
                         width    : "90%",
                         height   : 720,
-                        markdown : md,
+                        appendMarkdown : md,
                         path     : '../lib/',
                         onscroll : function(event) {
                             console.clear();
@@ -46,6 +84,7 @@
                                 console.log("on() => Override settings.onpreviewscroll =>", this, this.id, event, (new Date).getTime());
                             });
                             
+                            // defined event bind
                             this.on("resize", function(){
                                 console.clear();
                                 console.log("onresize =>", this, this.id, event, (new Date).getTime());

examples/onchange.html

@@ -11,10 +11,21 @@
         <div id="layout">
             <header>
                 <h1>Onchange event</h1>   
-                <p>Plaese press F12, open the develop tools.</p>     
+                <p>Plaese press F12, open the develop tools.</p> 
+                <p id="output"></p>    
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">###Hello world!</textarea>
+                <textarea style="display:none;">#### Settings
+
+```javascript
+{
+    onchange : function() {
+        console.log("onchange =>", this, this.id, this.settings, this.state);
+        // ....
+    }
+}
+```
+</textarea>
             </div>
         </div>        
         <script src="js/jquery.min.js"></script>
@@ -28,6 +39,7 @@
                     height : 720,
                     path   : '../lib/',
                     onchange : function() {
+                        $("#output").html("onchange : this.id =>" + this.id + ", markdown =>" + this.getValue());
                         console.log("onchange =>", this, this.id, this.settings, this.state);
                     }
                 });

examples/onfullscreen.html

@@ -14,14 +14,29 @@
                 <p>Plaese press F12, open the develop tools.</p>     
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">###Hello world!</textarea>
+                <textarea style="display:none;">#### Setting
+
+```javascript
+{
+    onfullscreen : function() {
+        // alert("onfullscreen");
+        // console.log("onfullscreen =>", this, this.id, this.settings);
+    },
+
+    onfullscreenExit : function() {
+        // alert("onfullscreenExit");
+        // console.log("onfullscreenExit =>", this, this.id, this.settings);
+    }
+}
+```
+</textarea>
             </div>
         </div>        
         <script src="js/jquery.min.js"></script>
         <script src="../editormd.js"></script>   
         <script type="text/javascript">
             $(function() {
-                var testEditor = editormd("test-editormd", {
+                var editor = editormd("test-editormd", {
                     width  : "90%",
                     height : 720,
                     path   : '../lib/',

examples/onload.html

@@ -14,7 +14,18 @@
                 <p>Plaese press F12, open the develop tools.</p>     
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">###Hello world!</textarea>
+                <textarea style="display:none;">#### Setting
+
+```javascript
+{
+    onload : function() {
+        // alert("onload");
+        // this.setMarkdown("### onloaded");
+        // console.log("onload =>", this, this.id, this.settings);
+    }
+}
+```
+</textarea>
             </div>
         </div>        
         <script src="js/jquery.min.js"></script>
@@ -30,7 +41,7 @@
                     onload : function() {
                         //this.watch();
                         //this.setMarkdown("###test onloaded");
-                        testEditor.setMarkdown("###Test onloaded");
+                        //testEditor.setMarkdown("###Test onloaded");
                         alert("onloaded");
                         console.log("onloaded =>", this, this.id, this.settings);
                     }

examples/onpreviewing-onpreviewed.html

@@ -14,7 +14,20 @@
                 <p>Plaese press F12, open the develop tools.</p>     
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">##Onpreviewing / Onpreviewed</textarea>
+                <textarea style="display:none;">#### Settings
+
+```javascript
+{
+    onpreviewing : function() {
+        // console.log("onpreviewing =>", this, this.id, this.settings);
+    },
+
+    onpreviewed : function() {
+        // console.log("onpreviewed =>", this, this.id, this.settings);
+    }
+}
+```
+</textarea>
             </div>
         </div>        
         <script src="js/jquery.min.js"></script>

examples/onresize.html

@@ -14,7 +14,16 @@
                 <p>Plaese press F12, open the develop tools.</p>     
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">
+                <textarea style="display:none;">#### Settings
+
+```javascript
+{
+    onresize : function() {
+        // console.log("onresize =>", this, this.id, this.settings);
+    }
+}
+```
+
     state.loaded
            > bind onresize event
                > window.onresize, editormd watch/unwatch/fullscreen/fullscreenExit/toolbar show|hide

examples/onscroll-onpreviewscroll.html

@@ -14,7 +14,25 @@
                 <p>Plaese press F12, open the develop tools.</p>     
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">## Onscroll / Onpreviewscroll</textarea>
+                <textarea style="display:none;">#### Settings
+
+```javascript
+{
+    onscroll : function(event) {
+        // console.clear();
+        // console.log("onscroll =>", this, this.id, this.settings, event);
+        // ...
+    },
+
+    onpreviewscroll : function(event) {
+        // console.clear();
+        // console.log("onpreviewscroll =>", this, this.id, this.settings, event);
+        // ...
+    }
+}
+```
+
+</textarea>
             </div>
         </div>        
         <script src="js/jquery.min.js"></script>
@@ -27,7 +45,7 @@
                     testEditor = editormd("test-editormd", {
                         width  : "90%",
                         height : 720,
-                        markdown : md,
+                        appendMarkdown : md,
                         path   : '../lib/',
                         onscroll : function(event) {
                             console.clear();

examples/onwatch-onunwatch.html

@@ -14,11 +14,19 @@
                 <p>Plaese press F12, open the develop tools.</p>     
             </header>
             <div id="test-editormd">                
-                <textarea style="display:none;">## Onwatch / Onunwatch
+                <textarea style="display:none;">#### Settings
 
-    testEditor.toolbarIcons['watch'] click > 
-        trigger > testEditor.watch() / testEditor.unwatch() > 
-            trigger > onwatch() / onunwatch()
+```javascript
+{
+    onwatch : function() {
+        // console.log("onwatch =>", this, this.id, this.settings);
+    },
+
+    onunwatch : function() {
+        // console.log("onunwatch =>", this, this.id, this.settings);
+    }
+}
+```
 </textarea>
             </div>
         </div>        

examples/page-break.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="zh">
+    <head>
+        <meta charset="utf-8" />
+        <title>Page break - Editor.md examples</title>
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel="stylesheet" href="../css/editormd.css" />
+        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
+    </head>
+    <body>
+        <div id="layout">
+            <header>
+                <h1>Page break</h1>
+            </header>
+            <div class="btns">
+                <button id="print-btn">Print Test</button>
+                <button id="disabled-btn">Disabled</button>
+                <button id="enabled-btn">Enabled</button>
+            </div>
+            <div id="test-editormd">
+                <textarea style="display:none;">#### Syntax
+
+    [At least 8 equals]
+
+    [========]
+
+#### Disabled
+
+    {
+        pageBreak : false
+    }
+
+#### Examples
+
+[========]
+
+> page start
+
+#### Editor.md directory
+
+    editor.md/
+            lib/
+            css/
+            scss/
+            tests/
+            fonts/
+            images/
+            plugins/
+            examples/
+            languages/
+            editormd.js
+            ...
+
+> page end
+</textarea>
+            </div>
+        </div>
+        <script src="js/jquery.min.js"></script>
+        <script src="../editormd.js"></script>
+        <script type="text/javascript">
+			var testEditor;
+
+            $(function() {
+                testEditor = editormd("test-editormd", {
+                    width   : "90%",
+                    height  : 720,
+                    path    : "../lib/"
+                });
+                
+                $("#print-btn").click(function(){
+                    var html = testEditor.preview.html();
+                    
+                    document.write('<link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="../css/editormd.css" />' + html);
+                    window.print();
+                });
+                
+                $("#disabled-btn").click(function(){
+                    testEditor.config("pageBreak", false);
+                });
+                
+                $("#enabled-btn").click(function(){
+                    testEditor.config("pageBreak", true);
+                });
+            });
+        </script>
+    </body>
+</html>

examples/readonly.html

@@ -2,7 +2,7 @@
 <html lang="zh">
     <head>
         <meta charset="utf-8" />
-        <title>只读模式 - Editor.md examples</title>
+        <title>Read only mode - Editor.md examples</title>
         <link rel="stylesheet" href="css/style.css" />
         <link rel="stylesheet" href="../css/editormd.css" />
         <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
@@ -11,25 +11,22 @@
         <div id="layout">
             <header>
                 <h1>只读模式</h1> 
-                <p>Editor.md read only</p> 
+                <p>Read only mode</p> 
             </header>
+            <div class="btns">
+                <button id="watch-btn">Enable watch</button>
+                <button id="unwatch-btn">Disable watch</button>
+            </div>
             <div id="test-editormd" class="editormd-onlyread">   
-                <textarea style="display:none;">###设置只读模式
+                <textarea style="display:none;">#### Setting
 
 ```javascript
-var testEditor;
-
-$(function() {
-    testEditor = editormd("test-editormd", {
-        width: "90%",
-        height: 540,
-        path : '../lib/',
-        //watch : false,           // 禁用实时预览
-        readOnly : true,
-        styleActiveLine : false, // 禁止高亮显示当前行
-        //lineNumbers : false      // 隐藏行号
-    });
-});
+{
+    readOnly        : true,
+    //styleActiveLine : false,       // disable active line
+    //watch           : false,       // disable watch
+    //lineNumbers     : false        // hide line numbers
+}
 ```
 </textarea>
             </div>
@@ -41,13 +38,21 @@ $(function() {
 
             $(function() {
                 testEditor = editormd("test-editormd", {
-                    width: "90%",
-                    height: 540,
-                    path : '../lib/',
-                    //watch : false,           // 禁用实时预览
-                    readOnly : true,
-                    styleActiveLine : false, // 禁止高亮显示当前行
-                    //lineNumbers : false      // 隐藏行号
+                    width           : "90%",
+                    height          : 540,
+                    path            : "../lib/",
+                    //watch           : false,           // disable watch
+                    readOnly        : true,
+                    styleActiveLine : false,   // disable active line
+                    //lineNumbers     : false      // hide line numbers
+                });
+                
+                $("#watch-btn").click(function(){
+                    testEditor.watch();
+                });
+                
+                $("#unwatch-btn").click(function(){
+                    testEditor.unwatch();
                 });
             });
         </script>

examples/resettings.html

@@ -26,28 +26,28 @@
                 <button id="show-toolbar-btn">Show toolbar</button>
                 <button id="close-toolbar-btn">Hide toolbar</button>
             </div>
-            <div id="test-editormd"></div>
-            <pre id="append-code" style="display:none;">####Resettings
+            <div id="test-editormd">
+                <textarea style="display:none;">#### Resetting examples
 
 ```javascript
 this.config("lineNumbers", false);
 
 this.config({
-    toc : false,
-    tex : false,
-    previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and line numbers.
-    flowChart : false,
-    sequenceDiagram : false,
-    dialogLockScreen : false,
-    dialogDraggable : false,
-    dialogMaskBgColor : "teal",
-    toolbar : true
+    toc                  : false,
+    tex                  : false,
+    previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
+    flowChart            : false,
+    sequenceDiagram      : false,
+    dialogLockScreen     : false,
+    dialogDraggable      : false,
+    dialogMaskBgColor    : "teal",
+    toolbar              : true
 });
 
 this.config("onresize", function(){
-    console.log("onresize =>", this);
+    console.log("onresize =&gt;", this);
 });
-```</pre>
+```</textarea></div>
         </div>
         <script src="js/jquery.min.js"></script>
         <script src="../editormd.js"></script>   
@@ -56,42 +56,38 @@ this.config("onresize", function(){
             
             $(function() {
                 
-                $.get('test.md', function(md){
+                $.get("test.md", function(md) {
                     testEditor = editormd("test-editormd", {
-                        width: "90%",
-                        height: 740,
-                        path : '../lib/',
-                        markdown : $("#append-code").html() +"\n"+ md,
-                        saveHTMLToTextarea : true,    // 保存HTML到Textarea
-                        watch : false,                // 关闭实时预览
-                        htmlDecode : true,            // 开启HTML标签解析，为了安全性，默认不开启    
-                        toolbar  : false,             //关闭工具栏
-                        previewCodeHighlight : false, // 关闭预览HTML的代码块高亮，默认开启
-                        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
-                        flowChart : true,             // 开启流程图支持，默认关闭
-                        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
-                        emoji : true,
-                        taskList : true,
-                        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
-                        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
-                        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
-                        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
-                        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
-                        onload : function() {
+                        width                : "90%",
+                        height               : 740,
+                        path                 : "../lib/",
+                        appendMarkdown       : "\n" + md,
+                        saveHTMLToTextarea   : true,
+                        watch                : false,
+                        htmlDecode           : true,  
+                        toolbar              : false,
+                        previewCodeHighlight : false,
+                        tex                  : true,
+                        flowChart            : true,
+                        sequenceDiagram      : true,
+                        emoji                : true,
+                        taskList             : true,
+                        onload               : function() {
                             console.log('onload', this);
                             
                             this.config("lineNumbers", false);
                             
                             this.config({
-                                toc : false,
-                                tex : false,
-                                previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and line numbers.
-                                flowChart : false,
-                                sequenceDiagram : false,
-                                dialogLockScreen : false,
-                                dialogDraggable : false,
-                                dialogMaskBgColor : "teal",
-                                toolbar : true
+                                toc                  : false,
+                                tex                  : false,
+                                toolbar              : true,
+                                previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
+                                flowChart            : false,
+                                sequenceDiagram      : false,
+                                dialogLockScreen     : false,
+                                dialogMaskOpacity    : 0.5,       // 设置透明遮罩层的透明度，全局通用，默认值为0.1
+                                dialogDraggable      : false,
+                                dialogMaskBgColor    : "#000"
                             });
                 
                             this.config("onresize", function(){
@@ -103,43 +99,43 @@ this.config("onresize", function(){
                     });
                 });
                 
-                $("#show-btn").bind('click', function(){
+                $("#show-btn").click(function(){
                     testEditor.show();
                 });
                 
-                $("#hide-btn").bind('click', function(){
+                $("#hide-btn").click(function(){
                     testEditor.hide();
                 });
                 
-                $("#get-md-btn").bind('click', function(){
+                $("#get-md-btn").click(function(){
                     alert(testEditor.getMarkdown());
                 });
                 
-                $("#get-html-btn").bind('click', function() {
+                $("#get-html-btn").click(function() {
                     alert(testEditor.getHTML());
                 });                
                 
-                $("#watch-btn").bind('click', function() {
+                $("#watch-btn").click(function() {
                     testEditor.watch();
                 });                 
                 
-                $("#unwatch-btn").bind('click', function() {
+                $("#unwatch-btn").click(function() {
                     testEditor.unwatch();
                 });              
                 
-                $("#preview-btn").bind('click', function() {
+                $("#preview-btn").click(function() {
                     testEditor.previewing();
                 });
                 
-                $("#fullscreen-btn").bind('click', function() {
+                $("#fullscreen-btn").click(function() {
                     testEditor.fullscreen();
                 });
                 
-                $("#show-toolbar-btn").bind('click', function() {
+                $("#show-toolbar-btn").click(function() {
                     testEditor.showToolbar();
                 });
                 
-                $("#close-toolbar-btn").bind('click', function() {
+                $("#close-toolbar-btn").click(function() {
                     testEditor.hideToolbar();
                 });
             });          

examples/search-replace.html

@@ -29,8 +29,8 @@
                     testEditor = editormd("test-editormd", {
                         width  : "90%",
                         height : 720,
-                        markdown : "#### Setting\r\n\r\n    {\n        searchReplace : true\n    }\r\n\r\n" + md,
-                        searchReplace : true,
+                        markdown : "#### Setting\r\n\r\n    {\n        searchReplace : true // default true\n    }\r\n\r\n" + md,
+                        searchReplace : true, // default true
                         htmlDecode : true,
                         tex : true,
                         taskList : true,

examples/sequence-diagram.html

@@ -22,13 +22,27 @@ setting:
         sequenceDiagram : true
     }
 
+#### Syntax
+
+    ```seq
+    .........
+    ```
+
+    # or
+
+    ```sequence
+    .........
+    ```
+
 #### Example
 
 ```seq
 A->B: Message
+B->C: Message
+C->A: Message
 ```
 
-```seq
+```sequence
 Andrew->China: Says Hello 
 Note right of China: China thinks\nabout it 
 China-->Andrew: How are you? 

examples/simple.html

@@ -2,7 +2,7 @@
 <html lang="zh">
     <head>
         <meta charset="utf-8" />
-        <title>Simple - Editor.md examples</title>
+        <title>Simple example - Editor.md examples</title>
         <link rel="stylesheet" href="css/style.css" />
         <link rel="stylesheet" href="../css/editormd.css" />
         <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
@@ -10,31 +10,34 @@
     <body>
         <div id="layout">
             <header>
-                <h1>简单示例</h1>
+                <h1>Simple example</h1>
             </header>
             <div id="test-editormd">
-                <textarea style="display:none;">###Hello world!
+                <textarea style="display:none;">[TOC]
 
-本示例未开启：
+#### Disabled options
 
-- TeX(基于KaTeX)；
-- 智能识别和解析HTML标签；
-- 流程图和时序/序列图支持;
+- TeX (Based on KaTeX);
+- Emoji;
+- Task lists;
+- HTML tags decode;
+- Flowchart and Sequence Diagram;
 
-###Editor.md目录结构
+#### Editor.md directory
 
     editor.md/
+            lib/
             css/
+            scss/
+            tests/
             fonts/
-            docs/
             images/
             plugins/
-            scss/
-            lib/
-            tests/
             examples/
+            languages/
             editormd.js
             ...
+
 </textarea>
             </div>
         </div>
@@ -45,10 +48,20 @@
 
             $(function() {
                 testEditor = editormd("test-editormd", {
-                    width: "90%",
-                    height: 640,
-                    path : '../lib/'
+                    width   : "90%",
+                    height  : 640,
+                    path    : "../lib/"
+                });
+                
+                /*
+                // or
+                testEditor = editormd({
+                    id      : "test-editormd",
+                    width   : "90%",
+                    height  : 640,
+                    path    : "../lib/"
                 });
+                */
             });
         </script>
     </body>

examples/test.md

@@ -6,6 +6,8 @@
 
 **目录 (Table of Contents)**
 
+[TOCM]
+
 [TOC]
 
 #Heading 1
@@ -261,6 +263,8 @@ X² Y³ ¾ ¼  ×  ÷   »
 
 18ºC  "  '
 
+[========]
+
 ###Emoji表情 :smiley:
 
 > Blockquotes :star:
@@ -278,9 +282,11 @@ X² Y³ ¾ ¼  ×  ÷   »
 ####反斜杠 Escape
 
 \*literal asterisks\*
+
+[========]
             
 ###科学公式 TeX(KaTeX)
-                    
+
 $$E=mc^2$$
 
 行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
@@ -288,7 +294,13 @@ $$E=mc^2$$
 $$\(\sqrt{3x-1}+(1+x)^2\)$$
                     
 $$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
-                
+
+### 分页符 Page break
+
+> Print Test: Ctrl + P
+
+[========]
+
 ###绘制流程图 Flowchart
 
 ```flow
@@ -301,6 +313,8 @@ st->op->cond
 cond(yes)->e
 cond(no)->op
 ```
+
+[========]
                     
 ###绘制序列图 Sequence Diagram
                     

examples/toc.html

@@ -6,16 +6,37 @@
         <link rel="stylesheet" href="css/style.css" />
         <link rel="stylesheet" href="../css/editormd.css" />
         <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
+        <style>
+            
+            #custom-toc-container {
+                border: 1px solid #ddd;
+                width: 87%;
+                margin: 15px auto;
+                overflow: visible;
+            }
+            
+            #custom-toc-container > .markdown-toc {
+                padding: 10px;
+            }
+        </style>
     </head>
     <body>
         <div id="layout">
             <header>
-                <h1>TOC(Table of Contents)示例</h1>            
+                <h1>TOC(Table of Contents) example</h1>
             </header>
+            <div class="btns">
+                <button id="insert-btn">ToC insert to custom container</button>
+                <button id="menu-btn">ToC Dropdown menu</button>
+                <button id="menu2-btn">ToC Dropdown menu insert to custom container</button>
+                <button id="default-btn">Default</button>
+                <button id="tocm-btn">Enable [TOCM]</button>
+            </div>
+            <div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
             <div id="test-editormd">                
                 <textarea style="display:none;">#支撑起整个互联网时代的 7 款开源软件
 
-**目录：**
+[TOCM]
 
 [TOC]
 
@@ -85,6 +106,23 @@ Hadoop 是一个能够对大量数据进行分布式处理的软件框架，由A
 
 在“大数据”已经成为潮流的当下，Hadoop已经成为最主要的一项技术。可以毫不夸张的说，没有Hadoop，就没有大多数的大数据应用。可以说对一个不知道Hadoop的程序员而言，你已经out了。
 
+
+#### Test link heading [linux B](https://github.com/pandao/editor.md)  Test link heading
+
+#### Test link heading [linux B](https://github.com/pandao/editor.md)   Test link heading [linux B](https://github.com/pandao/editor.md)  Test link heading, Test link heading, [linux B](https://github.com/pandao/editor.md)  Test link heading
+
+#####linux B-1
+
+######linux B-1-1
+
+######linux B-1-2
+
+#####linux B-2
+
+######linux B-2-1
+
+######linux B-2-2
+
 ###互联网的“排版引擎”WebKit
 
 说是浏览器内核，其实“排版引擎”更容易理解一些。通过服务器传输给浏览器的信息只是一串乱糟糟的文本。要看到我们平时看到精美的网友，需要浏览器内核对这些文本进行解析，将枯燥的描述“画”成美丽的浏览界面。
@@ -104,14 +142,57 @@ WebKit 是一个开源的浏览器引擎，与之相应的引擎有Gecko（Mozil
         
         <script src="js/jquery.min.js"></script>
         <script src="../editormd.js"></script>   
-        <script type="text/javascript">
+        <script type="text/javascript">            
+            var testEditor;
+                
             $(function() {
-                var testEditor = editormd("test-editormd", {
-                    width  : "90%",
-                    height : 720,
-                    //toc    : false,   // diable ToC
-                    tocStartLevel : 2,  // 表示从H2开始解析，默认值为1
-                    path   : '../lib/'
+                testEditor = editormd("test-editormd", {
+                    width         : "90%",
+                    height        : 720,
+                    path          : "../lib/",
+                    //toc           : false,         // diable ToC
+                    tocStartLevel : 2      // Parse beginning of H2, Default value 1
+                });
+                
+                $("#insert-btn").click(function() {
+                    testEditor.config({
+                        tocContainer : "#custom-toc-container",
+                        tocDropdown   : false
+                    });
+                });
+                
+                $("#menu-btn").click(function(){
+                    testEditor.config({
+                        tocContainer  : "",
+                        tocDropdown   : true,
+                        tocTitle      : "目录 Table of Contents dsfsadfsfdsdf",
+                    });
+                });
+                
+                $("#menu2-btn").click(function(){
+                    testEditor.config({
+                        tocContainer  : "#custom-toc-container",
+                        tocDropdown   : true,
+                        tocTitle      : "目录 Table of Contents dsfsadfsfdsdf",
+                    });
+                });
+                
+                $("#default-btn").click(function() {
+                    $("#custom-toc-container").html("#custom-toc-container");
+                    testEditor.config({
+                        tocContainer : "",
+                        tocm : false,
+                        tocDropdown  : false
+                    });
+                });
+                
+                $("#tocm-btn").click(function() {
+                    $("#custom-toc-container").html("#custom-toc-container");
+                    testEditor.config({
+                        tocm : true,
+                        tocContainer : "",
+                        tocDropdown   : false
+                    });
                 });
             });
         </script>

examples/use-requirejs.html

@@ -17,6 +17,7 @@
                     <li>Enable HTML tags decode</li>
                     <li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
                     <li>Enable Image upload</li>
+                    <li>Enable [TOCM], Search Replace, Code fold</li>
                 </ul>        
             </header>
             <div class="btns">
@@ -26,10 +27,12 @@
                 <button id="get-html-btn">Get HTML</button>
                 <button id="watch-btn">Watch</button>
                 <button id="unwatch-btn">Unwatch</button>
-                <button id="preview-btn">Preview HTML(Press ESC cancel)</button>
+                <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
                 <button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
                 <button id="show-toolbar-btn">Show toolbar</button>
                 <button id="close-toolbar-btn">Hide toolbar</button>
+                <button id="toc-menu-btn">ToC Dropdown menu</button>
+                <button id="toc-default-btn">ToC default</button>
             </div>
             <div id="test-editormd"></div>
         </div>   
@@ -56,11 +59,12 @@
                 "editormd", 
                 "../languages/en", 
                 "../plugins/link-dialog/link-dialog",
-                "../plugins/anchor-link-dialog/anchor-link-dialog",
+                "../plugins/reference-link-dialog/reference-link-dialog",
                 "../plugins/image-dialog/image-dialog",
                 "../plugins/code-block-dialog/code-block-dialog",
                 "../plugins/table-dialog/table-dialog",
                 "../plugins/emoji-dialog/emoji-dialog",
+                "../plugins/goto-line-dialog/goto-line-dialog",
                 "../plugins/help-dialog/help-dialog",
                 "../plugins/html-entities-dialog/html-entities-dialog", 
                 "../plugins/preformatted-text-dialog/preformatted-text-dialog"
@@ -82,11 +86,12 @@
                         markdown : md,
                         codeFold : true,
                         searchReplace : true,
-                        saveHTMLToTextarea : true,    // 保存HTML到Textarea
-                        htmlDecode : true,            // 开启HTML标签解析，为了安全性，默认不开启    
+                        saveHTMLToTextarea : true,                // 保存HTML到Textarea
+                        htmlDecode : "style,script,iframe",       // 开启HTML标签解析，为了安全性，默认不开启    
                         emoji : true,
                         taskList : true,
                         tex : true,
+                        tocm            : true,         // Using [TOCM]
                         autoLoadModules : false,
                         previewCodeHighlight : true,
                         flowChart : true,
@@ -152,6 +157,17 @@
                 $("#close-toolbar-btn").bind('click', function() {
                     testEditor.hideToolbar();
                 });
+                
+                $("#toc-menu-btn").click(function(){
+                    testEditor.config({
+                        tocDropdown   : true,
+                        tocTitle      : "目录 Table of Contents",
+                    });
+                });
+                
+                $("#toc-default-btn").click(function() {
+                    testEditor.config("tocDropdown", false);
+                });
             });
         </script>
     </body>

examples/use-seajs.html

@@ -24,6 +24,12 @@
                 <p>说明：</p>
                 <p>1、由于Editor.md是依赖jQuery的，所以在使用Sea.js加载Editor.md时，要在jQuery.js文件尾部加上 <code>if(typeof define === "function") { define(function () { return $.noConflict(); }); }</code>，使jQuery支持Sea.js；</p>  
                 <p>2、flowChart（流程图）和sequenceDiagram（时序图）基于Raphael.js，由于疑似Sea.js与Raphael.js有冲突，所以必须先加载Raphael.js再加载Sea.js，Editor.md才能在Sea.js下正常进行；</p>      
+                <ul style="margin: 10px 0 0 18px;">
+                    <li>Enable HTML tags decode</li>
+                    <li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
+                    <li>Enable Image upload</li>
+                    <li>Enable [TOCM], Search Replace, Code fold</li>
+                </ul>  
             </header>
             <div class="btns">
                 <button id="show-btn">Show editor</button>
@@ -32,10 +38,12 @@
                 <button id="get-html-btn">Get HTML</button>
                 <button id="watch-btn">Watch</button>
                 <button id="unwatch-btn">Unwatch</button>
-                <button id="preview-btn">Preview HTML(Press ESC cancel)</button>
+                <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
                 <button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
                 <button id="show-toolbar-btn">Show toolbar</button>
                 <button id="close-toolbar-btn">Hide toolbar</button>
+                <button id="toc-menu-btn">ToC Dropdown menu</button>
+                <button id="toc-default-btn">ToC default</button>
             </div>
             <div id="test-editormd"></div>
         </div>   
@@ -58,11 +66,12 @@
                 "editormd", 
                 "../languages/en", 
                 "../plugins/link-dialog/link-dialog",
-                "../plugins/anchor-link-dialog/anchor-link-dialog",
+                "../plugins/reference-link-dialog/reference-link-dialog",
                 "../plugins/image-dialog/image-dialog",
                 "../plugins/code-block-dialog/code-block-dialog",
                 "../plugins/table-dialog/table-dialog",
                 "../plugins/emoji-dialog/emoji-dialog",
+                "../plugins/goto-line-dialog/goto-line-dialog",
                 "../plugins/help-dialog/help-dialog",
                 "../plugins/html-entities-dialog/html-entities-dialog", 
                 "../plugins/preformatted-text-dialog/preformatted-text-dialog"
@@ -81,9 +90,10 @@
                         codeFold : true,
                         searchReplace : true,
                         saveHTMLToTextarea : true,    // 保存HTML到Textarea
-                        htmlDecode : true,            // 开启HTML标签解析，为了安全性，默认不开启
+                        htmlDecode : "style,script,iframe",            // 开启HTML标签解析，为了安全性，默认不开启
                         emoji : true,
                         taskList : true,
+                        tocm            : true,         // Using [TOCM]
                         tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                         //previewCodeHighlight : false,  // 关闭预览窗口的代码高亮，默认开启
                         flowChart : true,              // 疑似Sea.js与Raphael.js有冲突，必须先加载Raphael.js，Editor.md才能在Sea.js下正常进行；
@@ -149,6 +159,17 @@
                 $("#close-toolbar-btn").bind('click', function() {
                     testEditor.hideToolbar();
                 });
+                
+                $("#toc-menu-btn").click(function(){
+                    testEditor.config({
+                        tocDropdown   : true,
+                        tocTitle      : "目录 Table of Contents",
+                    });
+                });
+                
+                $("#toc-default-btn").click(function() {
+                    testEditor.config("tocDropdown", false);
+                });
             });
         </script>
     </body>

examples/use-zepto.html

@@ -15,6 +15,7 @@
                     <li>Enable HTML tags decode</li>
                     <li>Enable TeX, Flowchart, Sequence Diagram, Emoji, FontAwesome, Task lists</li>
                     <li>Enable Image upload</li>
+                    <li>Enable [TOCM], Search Replace, Code fold</li>
                 </ul>  
             </header>
             <div class="btns">
@@ -24,10 +25,12 @@
                 <button id="get-html-btn">Get HTML</button>
                 <button id="watch-btn">Watch</button>
                 <button id="unwatch-btn">Unwatch</button>
-                <button id="preview-btn">Preview HTML(Press ESC cancel)</button>
+                <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
                 <button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
                 <button id="show-toolbar-btn">Show toolbar</button>
                 <button id="close-toolbar-btn">Hide toolbar</button>
+                <button id="toc-menu-btn">ToC Dropdown menu</button>
+                <button id="toc-default-btn">ToC default</button>
             </div>
             <form action="http://editormd.ipandao.com/php/post.php" method="post">
                 <div class="editormd" id="test-editormd">                
@@ -53,12 +56,13 @@
                         searchReplace : true,
                         saveHTMLToTextarea : true,    // 保存HTML到Textarea
                         //watch : false,
-                        htmlDecode : true,            // 开启HTML标签解析，为了安全性，默认不开启
+                        htmlDecode : "style,script,iframe",            // 开启HTML标签解析，为了安全性，默认不开启
                         emoji : true,
                         taskList : true,
+                        tocm            : true,         // Using [TOCM]
                         tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                         //previewCodeHighlight : false,  // 关闭预览窗口的代码高亮，默认开启
-                        flowChart : true,              // 疑似Sea.js与Raphael.js有冲突，必须先加载Raphael.js，Editor.md才能在Sea.js下正常进行；
+                        flowChart : true,  
                         sequenceDiagram : true,        // 同上
 						onload : function() {
 							console.log("onload =>", this, this.id, this.settings);
@@ -105,6 +109,17 @@
                 $("#close-toolbar-btn").bind('click', function() {
                     testEditor.hideToolbar();
                 });
+                
+                $("#toc-menu-btn").click(function(){
+                    testEditor.config({
+                        tocDropdown   : true,
+                        tocTitle      : "目录 Table of Contents",
+                    });
+                });
+                
+                $("#toc-default-btn").click(function() {
+                    testEditor.config("tocDropdown", false);
+                });
             });
         </script>
     </body>

languages/en.js

@@ -2,7 +2,8 @@
     var factory = function (exports) {
         var lang = {
             name : "en",
-            description : "A simple markdown doucment online editor.",
+            description : "Open source online Markdown editor.",
+            tocTitle    : "Table of Contents",
             toolbar : {
                 undo             : "Undo(Ctrl+Z)",
                 redo             : "Redo(Ctrl+Y)",
@@ -23,7 +24,7 @@
                 "list-ol"        : "Ordered list",
                 hr               : "Horizontal rule",
                 link             : "Link",
-                anchor           : "Anchor",
+                "reference-link" : "Reference link",
                 image            : "Image",
                 code             : "Code inline",
                 "preformatted-text" : "Preformatted text / Code block (Tab indent)",
@@ -31,12 +32,14 @@
                 table            : "Tables",
                 datetime         : "Datetime",
                 emoji            : "Emoji",
-                htmlEntities     : "HTML Entities",
+                "html-entities"  : "HTML Entities",
+                pagebreak        : "Page break",
                 watch            : "Unwatch",
                 unwatch          : "Watch",
                 preview          : "HTML Preview (Press Shift + ESC exit)",
                 fullscreen       : "Fullscreen (Press ESC exit)",
                 clear            : "Clear",
+                search           : "Search",
                 help             : "Help",
                 info             : "About " + exports.title
             },
@@ -52,14 +55,15 @@
                     urlTitle : "Title",
                     urlEmpty : "Error: Please fill in the link address."
                 },
-                anchor : {
-                    title    : "Anchor link",
+                referenceLink : {
+                    title    : "Reference link",
                     name     : "Name",
                     url      : "Address",
+                    urlId    : "ID",
                     urlTitle : "Title",
-                    nameEmpty: "Error: anchor name can't be empty.",
-                    titleEmpty : "Error: Please fill in anchor link title.",
-                    urlEmpty : "Error: Please fill in anchor link."
+                    nameEmpty: "Error: Reference name can't be empty.",
+                    idEmpty  : "Error: Please fill in reference link id.",
+                    urlEmpty : "Error: Please fill in reference link url address."
                 },
                 image : {
                     title    : "Image",

languages/zh-tw.js

@@ -2,7 +2,8 @@
     var factory = function (exports) {
         var lang = {
             name : "zh-tw",
-            description : "開源在線Markdown編輯器<br/>A simple markdown doucment online editor.",
+            description : "開源在線Markdown編輯器<br/>Open source online Markdown editor.",
+            tocTitle    : "目錄",
             toolbar     : {
                 undo             : "撤銷（Ctrl+Z）",
                 redo             : "重做（Ctrl+Y）",
@@ -23,7 +24,7 @@
                 "list-ol"        : "有序列表",
                 hr               : "横线",
                 link             : "链接",
-                anchor           : "錨點",
+                "reference-link" : "引用鏈接",
                 image            : "圖片",
                 code             : "行內代碼",
                 "preformatted-text" : "預格式文本 / 代碼塊（縮進風格）",
@@ -31,12 +32,14 @@
                 table            : "添加表格",
                 datetime         : "日期時間",
                 emoji            : "Emoji 表情",
-                htmlEntities     : "HTML 實體字符",
+                "html-entities"  : "HTML 實體字符",
+                pagebreak        : "插入分頁符",
                 watch            : "關閉實時預覽",
                 unwatch          : "開啟實時預覽",
-                preview          : "全窗口預覽HTML（可按Shift + ESC退出）",
-                fullscreen       : "全屏（可按ESC退出）",
+                preview          : "全窗口預覽HTML（按 Shift + ESC 退出）",
+                fullscreen       : "全屏（按 ESC 退出）",
                 clear            : "清空",
+                search           : "搜尋",
                 help             : "使用幫助",
                 info             : "關於" + exports.title
             },
@@ -52,14 +55,15 @@
                     urlTitle : "鏈接標題",
                     urlEmpty : "錯誤：請填寫鏈接地址。"
                 },
-                anchor : {
-                    title    : "添加錨點鏈接",
-                    name     : "錨點名稱",
+                referenceLink : {
+                    title    : "添加引用鏈接",
+                    name     : "引用名稱",
                     url      : "鏈接地址",
+                    urlId    : "鏈接ID",
                     urlTitle : "鏈接標題",
-                    nameEmpty: "錯誤：錨點名稱不能為空。",
-                    titleEmpty : "錯誤：請填寫錨點鏈接標題。",
-                    urlEmpty : "錯誤：請填寫錨點鏈接地址。"
+                    nameEmpty: "錯誤：引用鏈接的名稱不能為空。",
+                    idEmpty  : "錯誤：請填寫引用鏈接的ID。",
+                    urlEmpty : "錯誤：請填寫引用鏈接的URL地址。"
                 },
                 image  : {
                     title    : "添加圖片",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "editor.md",
-  "version": "1.3.0",
-  "description": "A simple online markdown editor.",
+  "version": "1.4.0",
+  "description": "Open source online markdown editor.",
   "directories": {
     "doc": "docs",
     "example": "examples",
@@ -37,7 +37,7 @@
     "gulp-notify": "^2.1.0",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.5.3",
-    "gulp-ruby-sass": "^0.7.1",
+    "gulp-ruby-sass": "^1.0.1",
     "gulp-uglifyjs": "^0.6.1",
     "gulp-util": "^3.0.1"
   }

plugins/goto-line-dialog/goto-line-dialog.js

@@ -0,0 +1,157 @@
+/*!
+ * Goto line dialog plugin for Editor.md
+ *
+ * @file        goto-line-dialog.js
+ * @author      pandao
+ * @version     1.2.0
+ * @updateTime  2015-03-14
+ * {@link       https://github.com/pandao/editor.md}
+ * @license     MIT
+ */
+
+(function() {
+
+	var factory = function (exports) {
+
+		var $            = jQuery;
+		var pluginName   = "goto-line-dialog";
+
+		var langs = {
+			"zh-cn" : {
+				toolbar : {
+					"goto-line" : "跳转到行"
+				},
+				dialog : {
+					"goto-line" : {
+						title  : "跳转到行",
+						label  : "请输入行号",
+						error  : "错误："
+					}
+				}
+			},
+			"zh-tw" : {
+				toolbar : {
+					"goto-line" : "跳轉到行"
+				},
+				dialog : {
+					"goto-line" : {
+						title  : "跳轉到行",
+						label  : "請輸入行號",
+						error  : "錯誤："
+					}
+				}
+			},
+			"en" : {
+				toolbar : {
+					"goto-line" : "Goto line"
+				},
+				dialog : {
+					"goto-line" : {
+						title  : "Goto line",
+						label  : "Enter a line number, range ",
+						error  : "Error: "
+					}
+				}
+			}
+		};
+
+		exports.fn.gotoLineDialog = function() {
+			var _this       = this;
+			var cm          = this.cm;
+			var editor      = this.editor;
+			var settings    = this.settings;
+			var path        = settings.pluginPath + pluginName +"/";
+			var classPrefix = this.classPrefix;
+			var dialogName  = classPrefix + pluginName, dialog;
+
+			$.extend(true, this.lang, langs[this.lang.name]);
+			this.setToolbar();
+
+			var lang        = this.lang;
+			var dialogLang  = lang.dialog["goto-line"];
+			var lineCount   = cm.lineCount();
+
+			dialogLang.error += dialogLang.label + " 1-" + lineCount;
+
+			if (editor.find("." + dialogName).length < 1) 
+			{			
+				var dialogContent = [
+					"<div class=\"editormd-form\" style=\"padding: 15px 0;\">",
+					"<p>" + dialogLang.label + " 1-" + lineCount +"&nbsp;&nbsp;&nbsp;<input type=\"number\" class=\"number-input\" style=\"width: 60px;\" value=\"1\" max=\"" + lineCount + "\" min=\"1\" data-line-number /></p>",
+					"</div>"
+				].join("\n");
+
+				dialog = this.createDialog({
+					name       : dialogName,
+					title      : dialogLang.title,
+					width      : 400,
+					height     : 180,
+					mask       : settings.dialogShowMask,
+					drag       : settings.dialogDraggable,
+					content    : dialogContent,
+					lockScreen : settings.dialogLockScreen,
+					maskStyle  : {
+						opacity         : settings.dialogMaskOpacity,
+						backgroundColor : settings.dialogMaskBgColor
+					},
+					buttons    : {
+                        enter : [lang.buttons.enter, function() {
+							var line   = parseInt(this.find("[data-line-number]").val());
+
+							if (line < 1 || line > lineCount) {
+								alert(dialogLang.error);
+
+								return false;
+							}
+
+							_this.gotoLine(line);
+
+                            this.hide().lockScreen(false).hideMask();
+
+                            return false;
+                        }],
+
+                        cancel : [lang.buttons.cancel, function() {                                   
+                            this.hide().lockScreen(false).hideMask();
+
+                            return false;
+                        }]
+					}
+				});
+			}
+
+			dialog = editor.find("." + dialogName);
+
+			this.dialogShowMask(dialog);
+			this.dialogLockScreen();
+			dialog.show();
+		};
+
+	};
+    
+	// CommonJS/Node.js
+	if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
+    { 
+        module.exports = factory;
+    }
+	else if (typeof define === "function")  // AMD/CMD/Sea.js
+    {
+		if (define.amd) { // for Require.js
+
+			define(["editormd"], function(editormd) {
+                factory(editormd);
+            });
+
+		} else { // for Sea.js
+			define(function(require) {
+                var editormd = require("./../../editormd");
+                factory(editormd);
+            });
+		}
+	} 
+	else
+	{
+        factory(window.editormd);
+	}
+
+})();

plugins/help-dialog/help-dialog.js

@@ -25,19 +25,11 @@
 			var classPrefix = this.classPrefix;
 			var dialogName  = classPrefix + pluginName, dialog;
 			var dialogLang  = lang.dialog.help;
-			
-			var dialogContent = "<div class=\"markdown-body\" style=\"font-family:微软雅黑, Helvetica, Tahoma, STXihei,Arial;height:390px;overflow:auto;font-size:14px;border-bottom:1px solid #ddd;padding:0 20px 20px 0;\"></div>";
 
-			if (editor.find("." + dialogName).length > 0) 
-			{
-                dialog = editor.find("." + dialogName);
+			if (editor.find("." + dialogName).length < 1)
+			{			
+				var dialogContent = "<div class=\"markdown-body\" style=\"font-family:微软雅黑, Helvetica, Tahoma, STXihei,Arial;height:390px;overflow:auto;font-size:14px;border-bottom:1px solid #ddd;padding:0 20px 20px 0;\"></div>";
 
-				this.dialogShowMask(dialog);
-				this.dialogLockScreen();
-				dialog.show();
-			} 
-			else
-			{
 				dialog = this.createDialog({
 					name       : dialogName,
 					title      : dialogLang.title,
@@ -61,6 +53,12 @@
 				});
 			}
 
+			dialog = editor.find("." + dialogName);
+
+			this.dialogShowMask(dialog);
+			this.dialogLockScreen();
+			dialog.show();
+
 			var helpContent = dialog.find(".markdown-body");
 
 			if (helpContent.html() === "") 

plugins/help-dialog/help.md

@@ -38,6 +38,7 @@
 | Ctrl + Shift + G / Shift + Command + G          | 切换到上一个搜索结果项            | Find previous search results                       |
 | Ctrl + Shift + H                                | 打开HTML实体字符对话框            | Open HTML Entities dialog                          |
 | Ctrl + Shift + I                                | 插入图片                          | Insert image ![]()                     |
+| Ctrl + Shift + K                                | 插入TeX(KaTeX)公式符号            | Insert TeX(KaTeX) symbol $$TeX$$   |
 | Ctrl + Shift + L                                | 打开插入链接对话框                | Open link dialog                                   |
 | Ctrl + Shift + O                                | 插入有序列表                      | Insert ordered list                                |
 | Ctrl + Shift + P                                | 打开插入PRE对话框                 | Open Preformatted text dialog                      |
@@ -49,10 +50,13 @@
 | Shift + Alt + C                                 | 插入```代码                       | Insert code blocks (```)                           |
 | Shift + Alt + H                                 | 打开使用帮助对话框                | Open help dialog                                   |
 | Shift + Alt + L                                 | 将所选文本转成小写                | Selection text convert to lowercase                |
+| Shift + Alt + P                                 | 插入分页符                        | Insert page break                                  |
+| Alt + L                                         | 将所选文本转成小写                | Selection text convert to lowercase                |
 | Shift + Alt + U                                 | 将所选的每个单词的首字母转成大写  | Selection words first letter convert to Uppercase  |
 | Ctrl + Shift + Alt + C                          | 打开插入代码块对话框层            | Open code blocks dialog                            |
 | Ctrl + Shift + Alt + I                          | 打开插入图片对话框层              | Open image dialog                                  |
 | Ctrl + Shift + Alt + U                          | 将所选文本的第一个首字母转成大写  | Selection text first letter convert to uppercase   |
+| Ctrl + Alt + G                                  | 跳转到指定的行                    | Goto line                                          |
 
 ##### Emoji表情参考 (Emoji reference)
 

plugins/image-dialog/image-dialog.js

@@ -31,18 +31,7 @@
 
 			cm.focus();
 
-            if (editor.find("." + dialogName).length > 0) 
-            {
-                dialog = editor.find("." + dialogName);
-                dialog.find("[type=\"text\"]").val("");
-                dialog.find("[type=\"file\"]").val("");
-                dialog.find("[data-link]").val("http://");
-
-                this.dialogShowMask(dialog);
-                this.dialogLockScreen();
-                dialog.show();
-            } 
-            else 
+            if (editor.find("." + dialogName).length < 1)
             {    
                 var guid   = (new Date).getTime();
                 var action = settings.imageUploadURL + "?guid=" + guid;
@@ -170,7 +159,7 @@
 							};
 						};
 
-						dialog.find("[type=\"submit\"]").bind(exports.mouseOrTouch("click", "touchend"), submitHandler).trigger("click");
+						dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
 
 					}        
 
@@ -178,6 +167,15 @@
 				});
             }
 
+			dialog = editor.find("." + dialogName);
+			dialog.find("[type=\"text\"]").val("");
+			dialog.find("[type=\"file\"]").val("");
+			dialog.find("[data-link]").val("http://");
+
+			this.dialogShowMask(dialog);
+			this.dialogLockScreen();
+			dialog.show();
+
 		};
 
 	};

plugins/anchor-link-dialog/anchor-link-dialog.js → plugins/reference-link-dialog/reference-link-dialog.js

@@ -1,10 +1,10 @@
 /*!
- * Anchor link dialog plugin for Editor.md
+ * Reference link dialog plugin for Editor.md
  *
- * @file        anchor-link-dialog.js
+ * @file        reference-link-dialog.js
  * @author      pandao
  * @version     1.2.0
- * @updateTime  2015-03-07
+ * @updateTime  2015-03-13
  * {@link       https://github.com/pandao/editor.md}
  * @license     MIT
  */
@@ -13,9 +13,10 @@
 
     var factory = function (exports) {
 
-		var pluginName   = "anchor-link-dialog";
+		var pluginName   = "reference-link-dialog";
+		var ReLinkId     = 1;
 
-		exports.fn.anchorLinkDialog = function() {
+		exports.fn.referenceLinkDialog = function() {
 
             var _this       = this;
             var cm          = this.cm;
@@ -24,45 +25,37 @@
             var settings    = this.settings;
             var cursor      = cm.getCursor();
             var selection   = cm.getSelection();
-            var anchorLang  = lang.dialog.anchor;
+            var dialogLang  = lang.dialog.referenceLink;
             var classPrefix = this.classPrefix;
 			var dialogName  = classPrefix + pluginName, dialog;
 
 			cm.focus();
 
-            if (editor.find("." + dialogName).length > 0)
-            {
-                dialog = editor.find("." + dialogName);
-                dialog.find("[data-name]").val("");
-                dialog.find("[data-url]").val("http://");
-                dialog.find("[data-title]").val(selection);
-
-                this.dialogShowMask(dialog);
-                this.dialogLockScreen();
-                dialog.show();
-            }
-            else 
+            if (editor.find("." + dialogName).length < 1)
             {      
                 var dialogHTML = "<div class=\"" + classPrefix + "form\">" +
-                                        "<label>" + anchorLang.name + "</label>" +
-                                        "<input type=\"text\" data-name />" +  
+                                        "<label>" + dialogLang.name + "</label>" +
+                                        "<input type=\"text\" value=\"[" + ReLinkId + "]\" data-name />" +  
+                                        "<br/>" +
+                                        "<label>" + dialogLang.urlId + "</label>" +
+                                        "<input type=\"text\" data-url-id />" +
                                         "<br/>" +
-                                        "<label>" + anchorLang.url + "</label>" +
+                                        "<label>" + dialogLang.url + "</label>" +
                                         "<input type=\"text\" value=\"http://\" data-url />" + 
                                         "<br/>" +
-                                        "<label>" + anchorLang.urlTitle + "</label>" +
+                                        "<label>" + dialogLang.urlTitle + "</label>" +
                                         "<input type=\"text\" value=\"" + selection + "\" data-title />" +
                                         "<br/>" +
                                     "</div>";
 
                 dialog = this.createDialog({   
-                    name   : dialogName,
-                    title  : anchorLang.title,
-                    width  : 380,
-                    height : 250,
-                    content : dialogHTML,
-                    mask   : settings.dialogShowMask,
-                    drag   : settings.dialogDraggable,
+                    name       : dialogName,
+                    title      : dialogLang.title,
+                    width      : 380,
+                    height     : 290,
+                    content    : dialogHTML,
+                    mask       : settings.dialogShowMask,
+                    drag       : settings.dialogDraggable,
                     lockScreen : settings.dialogLockScreen,
                     maskStyle  : {
                         opacity         : settings.dialogMaskOpacity,
@@ -72,32 +65,38 @@
                         enter  : [lang.buttons.enter, function() {
                             var name  = this.find("[data-name]").val();
                             var url   = this.find("[data-url]").val();
+                            var rid   = this.find("[data-url-id]").val();
                             var title = this.find("[data-title]").val();
 
                             if (name === "")
                             {
-                                alert(anchorLang.nameEmpty);
+                                alert(dialogLang.nameEmpty);
                                 return false;
                             }
 
-                            if (url === "http://" || url === "")
+                            if (rid === "")
                             {
-                                alert(anchorLang.urlEmpty);
+                                alert(dialogLang.idEmpty);
                                 return false;
                             }
 
-                            if (title === "")
+                            if (url === "http://" || url === "")
                             {
-                                alert(anchorLang.titleEmpty);
+                                alert(dialogLang.urlEmpty);
                                 return false;
                             }
 
-                            cm.replaceSelection("[" + title + "][" + name + "]\n[" + name + "]: " + url + "");
+                            //cm.replaceSelection("[" + title + "][" + name + "]\n[" + name + "]: " + url + "");
+                            cm.replaceSelection("[" + name + "][" + rid + "]");
 
                             if (selection === "") {
                                 cm.setCursor(cursor.line, cursor.ch + 1);
                             }
 
+							title = (title === "") ? "" : " \"" + title + "\"";
+
+							cm.setValue(cm.getValue() + "\n[" + rid + "]: " + url + title + "");
+
                             this.hide().lockScreen(false).hideMask();
 
                             return false;
@@ -110,6 +109,18 @@
                     }
                 });
             }
+
+			dialog = editor.find("." + dialogName);
+			dialog.find("[data-name]").val("[" + ReLinkId + "]");
+			dialog.find("[data-url-id]").val("");
+			dialog.find("[data-url]").val("http://");
+			dialog.find("[data-title]").val(selection);
+
+			this.dialogShowMask(dialog);
+			this.dialogLockScreen();
+			dialog.show();
+
+			ReLinkId++;
 		};
 
 	};

plugins/table-dialog/table-dialog.js

@@ -82,8 +82,8 @@
 			var dialogContent = [
 				"<div class=\"editormd-form\" style=\"padding: 15px 0;\">",
 				"<label>" + dialogLang.cellsLabel + "</label>",
-				dialogLang.rows + " <input type=\"number\" value=\"3\" max=\"100\" min=\"2\" data-rows />&nbsp;&nbsp;",
-				dialogLang.cols + " <input type=\"number\" value=\"2\" max=\"100\" min=\"1\" data-cols /><br/>",
+				dialogLang.rows + " <input type=\"number\" value=\"3\" class=\"number-input\" style=\"width:40px;\" max=\"100\" min=\"2\" data-rows />&nbsp;&nbsp;",
+				dialogLang.cols + " <input type=\"number\" value=\"2\" class=\"number-input\" style=\"width:40px;\" max=\"100\" min=\"1\" data-cols /><br/>",
 				"<label>" + dialogLang.alignLabel + "</label>",
 				"<div class=\"fa-btns\"></div>",
 				"</div>"

scss/editormd.dialog.scss

@@ -88,6 +88,28 @@
         top: 10px;
         right: 10px;
     } 
+    
+    p > a, .hover-link:hover {   
+        color: #2196F3;
+    }
+    
+    .hover-link {
+        color: #666;
+    }
+    
+    a {
+        .fa-external-link {
+            display: none;
+        }
+
+        &:hover {    
+            color: #2196F3;
+            
+            .fa-external-link {
+                display: inline-block;
+            }
+        }
+    }
 }
 
 #{$prefix}mask,

scss/editormd.preview.scss

@@ -2,6 +2,9 @@
 
 @import "lib/variables";
 @import "lib/prefixes";
+@import "font-awesome";
+
+@import "editormd.logo";
 
 // github-markdown.css
 @import "github-markdown";  
@@ -115,8 +118,160 @@
     }
 }    
 
+#{$prefix}preview-container, #{$prefix}html-preview {
+
+    #{$prefix}toc-menu {
+        margin: 8px 0 12px 0;
+        display: inline-block;
+
+        > .markdown-toc {
+            position: relative;
+            @include border-radius(4px);
+            border: 1px solid #ddd;
+            display: inline-block;
+            font-size: 1em;
+
+            > ul {
+                width : 160%;
+                min-width: 180px;
+                position: absolute;
+                left: -1px;
+                top: -2px;
+                z-index: 100;
+                padding: 0 10px 10px;    
+                display: none;
+                background: #fff;
+                border: 1px solid #ddd;
+                @include border-radius(4px);
+                @include box-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
+
+                > li ul {
+                    width: 100%;
+                    min-width: 180px;
+                    border: 1px solid #ddd;
+                    display: none;
+                    background: #fff;
+                    @include border-radius(4px);
+                }
+
+                > li a {
+                    color: #666;
+                    padding: 6px 10px;
+                    display: block;
+                    @include transition(background-color 500ms ease-out);  
+
+                    &:hover {
+                        background-color: #f6f6f6;
+                    }       
+                }
+            }
+
+            li {
+                position: relative;
+
+                > ul {
+                    position: absolute;
+                    top: 32px;
+                    left: 10%;
+                    display: none;
+                    @include box-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
+
+                    &:before, &:after {
+                        pointer-events: pointer-events;
+                        position: absolute;
+                        left: 15px;
+                        top: -6px;
+                        display: block;
+                        content: "";
+                        width: 0;
+                        height: 0;
+                        border: 6px solid transparent;
+                        border-width: 0 6px 6px; 
+                        z-index: 10; 
+                    }
+
+                    &:before {
+                        border-bottom-color: #ccc; 
+                    }
+
+                    &:after {
+                        border-bottom-color: #ffffff;  
+                        top: -5px;
+                    }
+                }
+            }
+        }
+
+        ul {
+            list-style: none;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        h1 {
+            font-size: 16px;
+            padding: 5px 0 10px 10px;
+            line-height: 1;
+            border-bottom: 1px solid #eee;
+
+            .fa {
+                padding-left: 10px;
+            }
+        }
+
+        .toc-menu-btn {
+            color: #666;
+            min-width: 180px;
+            padding: 5px 10px;
+            border-radius: 4px;
+            display: inline-block;
+            @include transition(background-color 500ms ease-out);
+
+            &:hover {
+                background-color: #f6f6f6;
+            }
+
+            .fa {
+                float: right;
+                padding: 3px 0 0 10px;
+                font-size: 1.3em;
+            }
+        }
+    }
+}
+
+.markdown-body {
+    #{$prefix}toc-menu {
+        ul {
+            padding-left: 0; 
+        }
+    }
+}
+
+hr.editormd-page-break {
+    border: 1px dotted #ccc;
+    font-size: 0;
+    height: 2px;
+}
+
+@media only print {
+    hr.editormd-page-break {
+        background: none;
+        border: none;
+        height: 0;
+    }
+}
+
 #{$prefix}html-preview {
     textarea {
         display : none;
     }
+
+    hr.editormd-page-break {
+        background: none;
+        border: none;
+        height: 0;
+    }
 }

scss/editormd.scss

@@ -2,7 +2,6 @@
 
 @import "lib/variables";
 @import "lib/prefixes";
-@import "font-awesome";
         
 .editormd {
     width: 90%;
@@ -33,6 +32,11 @@
         outline: 0;
         resize:none;
     }
+    
+    #{$prefix}html-textarea,
+    #{$prefix}markdown-textarea {
+        display : none;
+    }
 
     input[type="text"], 
     input[type="button"], 
@@ -41,8 +45,6 @@
         @include appearance(none);
     }
 }
-
-@import "editormd.logo";
             
 #{$prefix}user-unselect { 
     @include user-select(none); 

scss/lib/prefixes.scss

@@ -1,13 +1,6 @@
 @charset "UTF-8";
 
-/*!
- * prefixes.scss
- * @author    Pandao
- * @version   0.1.0
- * @homePage  https://github.com/pandao/prefixes.scss
- * @license   MIT
- * @copyright Copyright (c) 2015
- */
+/*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */
 
 // appearance