momo
/
editor.md
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Releases v1.2.0

master
Pandao 10 years ago
parent
b6d6cbf9b8
commit
75c95d7f01
204 changed files with 16208 additions and 4553 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      BUGS.md
  2. 100
      CHANGE.md
  3. 255
      Gulpfile.js
  4. 51
      README.md
  5. 2
      bower.json
  6. 218
      css/editormd.css
  7. 19
      css/editormd.css.map
  8. 2
      css/editormd.css.min.map
  9. 33
      css/editormd.logo.css
  10. 19
      css/editormd.logo.css.map
  11. 2
      css/editormd.logo.css.min.map
  12. 9
      css/editormd.logo.min.css
  13. 26
      css/editormd.min.css
  14. 17
      css/editormd.preview.css
  15. 19
      css/editormd.preview.css.map
  16. 2
      css/editormd.preview.css.min.map
  17. 9
      css/editormd.preview.min.css
  18. 18
      dist/css/editormd.css.map
  19. 2
      dist/css/editormd.css.min.map
  20. 18
      dist/css/editormd.logo.css.map
  21. 2
      dist/css/editormd.logo.css.min.map
  22. 2
      dist/css/editormd.logo.min.css
  23. 5
      dist/css/editormd.min.css
  24. 18
      dist/css/editormd.preview.css.map
  25. 2
      dist/css/editormd.preview.css.min.map
  26. 2
      dist/css/editormd.preview.min.css
  27. 3
      dist/js/editormd.min.js
  28. 121
      dist/js/languages/en.js
  29. 2
      dist/js/languages/en.min.js
  30. 121
      dist/js/languages/zh-tw.js
  31. 2
      dist/js/languages/zh-tw.min.js
  32. 149
      docs/html/index.html
  33. 25
      docs/html/scripts/linenumber.js
  34. 202
      docs/html/scripts/prettify/Apache-License-2.0.txt
  35. 2
      docs/html/scripts/prettify/lang-css.js
  36. 28
      docs/html/scripts/prettify/prettify.js
  37. 334
      docs/html/styles/jsdoc-default.css
  38. 111
      docs/html/styles/prettify-jsdoc.css
  39. 132
      docs/html/styles/prettify-tomorrow.css
  40. 3422
      editormd.amd.js
  41. 3
      editormd.amd.min.js
  42. 2823
      editormd.js
  43. 3
      editormd.min.js
  44. 2
      examples/127.0.0.1-8888.url
  45. 97
      examples/@links.html
  46. 508
      examples/change-mode.html
  47. 44
      examples/code-fold.html
  48. 88
      examples/custom-keyboard-shortcuts.html
  49. 52
      examples/custom-toolbar.html
  50. 153
      examples/define-plugin.html
  51. 9
      examples/dynamic-create-editormd.html
  52. 225
      examples/emoji.html
  53. 153
      examples/extends.html
  54. 119
      examples/external-use.html
  55. 21
      examples/flowchart.html
  56. 5
      examples/form-get-value.html
  57. 84
      examples/full.html
  58. 46
      examples/html-preview-markdown-to-html.html
  59. 48
      examples/html-tags-decode.html
  60. 5
      examples/image-cross-domain-upload.html
  61. 39
      examples/image-upload.html
  62. BIN
      examples/images/1.jpg
  63. BIN
      examples/images/10.jpg
  64. BIN
      examples/images/2.jpg
  65. BIN
      examples/images/3.jpg
  66. BIN
      examples/images/5.jpg
  67. BIN
      examples/images/6.jpg
  68. BIN
      examples/images/7.jpg
  69. BIN
      examples/images/9.jpg
  70. BIN
      examples/images/X7t2gyC.png
  71. 57
      examples/index.html
  72. 47
      examples/katex.html
  73. 92
      examples/manually-load-modules.html
  74. 5
      examples/multi-editormd.html
  75. 22
      examples/multi-languages.html
  76. 59
      examples/on-off.html
  77. 7
      examples/onchange.html
  78. 7
      examples/onfullscreen.html
  79. 7
      examples/onload.html
  80. 38
      examples/onpreviewing-onpreviewed.html
  81. 40
      examples/onresize.html
  82. 45
      examples/onscroll-onpreviewscroll.html
  83. 43
      examples/onwatch-onunwatch.html
  84. 5
      examples/readonly.html
  85. 148
      examples/resettings.html
  86. 46
      examples/search-replace.html
  87. 13
      examples/sequence-diagram.html
  88. 5
      examples/set-get-replace-selection.html
  89. 22
      examples/simple.html
  90. 47
      examples/task-lists.html
  91. 96
      examples/test.md
  92. 119
      examples/themes.html
  93. 5
      examples/toc.html
  94. 165
      examples/use-requirejs.html
  95. 53
      examples/use-seajs.html
  96. 36
      examples/use-zepto.html
  97. 0
      fonts/FontAwesome.otf
  98. 0
      fonts/editormd-logo.eot
  99. 0
      fonts/editormd-logo.svg
  100. 0
      fonts/editormd-logo.ttf

4
BUGS.md
View File

@ -18,5 +18,5 @@
####Require.js
- CodeMirror编辑器的代码无法高亮；
- ~~CodeMirror编辑器的代码无法高亮；~~
- ~~sequenceDiagram不支持: `Uncaught TypeError: Cannot call method 'isArray' of undefined.`~~

100
CHANGE.md
View File

@ -1,4 +1,6 @@
####更新日志
##更新日志
###v1.0.x
#####v1.0.0 beta
@ -34,6 +36,8 @@
- 解决Sea.js环境下Raphael.js无法运行导致不支持流程图和时序图的问题，即必须先加载Raphael.js，后加载Sea.js；
###v1.1.x
#####v1.1.0
主要更新：
@ -206,4 +210,96 @@
- 新增了`editormd.trim()`，用于清除字符串两边的空格；
- 修改了所有相关的示例文件和测试用例`marked-heading-link-test.html`；
- 修改了`README.md`，添加了`Shields.io`图标；
- 修改了`README.md`，添加了`Shields.io`图标；
###v1.2
#####v1.2.0
v1.2.0 主要更新：
- 新增代码折叠、搜索替换、自定义样式主题和自定义快捷键等功能；
- 新增Emoji表情、@Link、GFM Task Lists支持；
- 新增表格插入、Emoji表情插入、HTML实体字符插入、使用帮助等对话框；
- 新增插件扩展机制；
- 新增手动加载依赖模块方式；
- 改用`Prefixes.css`作CSS前缀预处理；
- 改进和增强工具栏自定义功能，完善事件监听和处理方法；
- 部分功能改进（更加方便的预格式文本/代码插入、自动闭合标签等）、新增多个方法、改进Require.js支持和修复多个Bug等等；
**具体更新如下：**
- 新建v1.1.x分支；
- v1.2文件结构变动较大；
- 新增代码折叠、自动闭合标签和搜索替换功能；
- 搜索快捷键`Ctrl + F / Command + F`；
- 替换快捷键`Ctrl + Shift + F / Command + Option + F`；
- 折叠快捷键`Ctrl + Q / Command + Q`
- 新增自定义主题支持；
- 新增3个成员方法`setTheme()`、`setCodeMirrorOption()`和`getCodeMirrorOption()`；
- 新增@Link支持；
- 新增GFM Task Lists支持；
- 新增Emoji表情支持；
- 支持Github emoji`:emoji-name:`、FontAwesome icons（`:fa-xxx:`）、Twitter emoji(twemoji) （`:tw-xxxx:`）、Editor.md logo icons（`:editormd-logo:`）形式的Emoji；
- 新增属性`editormd.emoji`、`editormd.twemoji`、`editormd.urls`和`editormd.regex`；
- 新增HTML实体字符插入、插入表格和使用帮助对话框；
- 修改了`createDialog()`等方法；
- 新增`mask`成员属性和锁屏方法`editormd.lockScreen()`、`editormd.fn.lockScreen()`；
- 改进插入预格式文本和代码对话框；
- 将`<textarea>`改为`CodeMirror`，输入更加方便和直观；
- 新增自定义键盘快捷键功能；
- 新增2个方法：`addKeyMap()`和`removeKayMap()`；
- 改用`Prefixes.css`作CSS前缀预处理；
- SCSS前缀预处理mixins改用 [Prefixes.scss](https://github.com/pandao/prefixes.scss "Prefixes.scss")；
- 改进和增强工具栏自定义功能；
- 新增配置项`toolbarCustomIcons`，用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标；
- 新增工具栏列表预设值属性`editormd.toolbarModes`；
- 移除成员属性`toolbarIconHandlers`；
- 完善和新增事件处理方法；
- 新增事件回调注册方法`on()`；
- 新增事件回调移除方法`off()`；
- 新增事件回调处理配置项：`onresize`、`onscroll`、`onpreviewscroll`、`onpreviewing`、`onpreviewed`、`onwatch`和`onunwatch`；
- 新增手动加载依赖模块方式，以便可同步使用成员方法；
- 新增属性`autoLoadModules`，默认值为`true`；
- 新增插件及扩展机制；
- 新增插件自定义机制，改变整体结构(包括文件结构)，以便更加方便地实现插件扩展；
- 新增对象扩展方法`extends()`、`set()`；
- 新增成员方法和属性：
- 新增两个方法：`setValue()`、`getValue()`；
- 新增`config()` 方法，用于加载后重新配置；
- 增加两个属性`cm`，是`codeEditor`的简写，`cmElement`，是`codeMirror`的别名;
- 成员方法的改进：
- 改进：`showToolbar()`和`hideToolbar()`方法增加一个`callback`函数，用于直接回调操作；
- 改进：修改了`previewCodeHighlight()`方法；
- 更名：`recreateEditor()`更名为`recreate()`；
- 移除`setMarked()`方法；
- 新增HTML标签解析过滤机制；
- 通过设置`settings.htmlDecode = "style,script,iframe"`来实现过滤指定标签的解析；
- 改进Require.js支持；
- 修复Require.js下CodeMirror编辑器的代码无法高亮的问题；
- 更新`underscore`版本至`1.8.2`；
- 移除`editormd.requirejsInit()`和`editormd.requireModules()`方法；
- 新增`Require.js/AMD`专用版本文件`editormd.amd.js`；
- 新建Gulp任务`amd`；
- 修改和新增以上改进等相关示例；

255
Gulpfile.js
View File

@ -1,27 +1,28 @@
'use strict';
"use strict";
var os = require("os");
var gulp = require('gulp');
var gulp = require("gulp");
var gutil = require("gulp-util");
var sass = require('gulp-ruby-sass');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var header = require('gulp-header');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require("gulp-ruby-sass");
var jshint = require("gulp-jshint");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var concat = require("gulp-concat");
var notify = require("gulp-notify");
var header = require("gulp-header");
var minifycss = require("gulp-minify-css");
var jsdoc = require("gulp-jsdoc");
var jsdoc2md = require("gulp-jsdoc-to-markdown");
var pkg = require('./package.json');
var dateFormat = require('dateformatter').format;
var pkg = require("./package.json");
var dateFormat = require("dateformatter").format;
var replace = require('gulp-replace');
pkg.name = "Editor.md";
pkg.today = dateFormat;
var headerComment = ["/*",
" * <%= pkg.name %>",
" *",
" * @file <%= fileName(file) %> ",
" * @version v<%= pkg.version %> ",
" * @description <%= pkg.description %>",
@ -36,60 +37,177 @@ var headerMiniComment = "/*! <%= pkg.name %> v<%= pkg.version %> | <%= fileName(
var scssTask = function(fileName, path) {
path = path || 'src/scss/';
path = path || "scss/";
var distPath = "css";
return gulp.src(path + fileName + ".scss")
.pipe(sass({ style: 'expanded' })) //nested,compact,expanded,compressed
.pipe(gulp.dest('dist/css'))
.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('\\', '');
return name[1].replace("\\", "");
}}))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('dist/css'))
.pipe(gulp.dest(distPath))
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'))
.pipe(gulp.dest(distPath))
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base);
return name[1].replace('\\', '');
return name[1].replace("\\", "");
}}))
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: fileName + '.scss task completed!' }));
.pipe(gulp.dest(distPath))
.pipe(notify({ message: fileName + ".scss task completed!" }));
};
gulp.task('scss', function() {
return scssTask('editormd');
gulp.task("scss", function() {
return scssTask("editormd");
});
gulp.task('scss2', function() {
return scssTask('editormd.preview');
gulp.task("scss2", function() {
return scssTask("editormd.preview");
});
gulp.task('scss3', function() {
return scssTask('editormd.logo');
gulp.task("scss3", function() {
return scssTask("editormd.logo");
});
gulp.task('js', function() {
return gulp.src('src/js/**/*.js')
.pipe(jshint('./.jshintrc'))
.pipe(jshint.reporter('default'))
gulp.task("js", function() {
return gulp.src("./src/editormd.js")
.pipe(jshint("./.jshintrc"))
.pipe(jshint.reporter("default"))
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base);
return name[1].replace(/[\\\/]?/, '');
return name[1].replace(/[\\\/]?/, "");
}}))
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest("./"))
.pipe(rename({ suffix: ".min" }))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(gulp.dest("./"))
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") );
return name[1].replace(/[\\\/]?/, '');
return name[1].replace(/[\\\/]?/, "");
}}))
.pipe(gulp.dest('dist/js'))
.pipe(notify({ message: 'js task complete' }));
.pipe(gulp.dest("./"))
.pipe(notify({ message: "editormd.js task complete" }));
});
gulp.task("plugins", function() {
var path = "plugins/test-plugin";
//return gulp.src([path + "/*.js", "!plugins/plugin-template.js", "!plugins/test-plugin/*.js"])
return gulp.src("plugins/test-plugin/test-plugin.js")
.pipe(gulp.dest(path))
.pipe(rename({ suffix: ".min" }))
.pipe(uglify())
.pipe(gulp.dest(path))
.pipe(notify({ message: "plugins task complete"}));
});
gulp.task("amd", function() {
var replaceText1 = [
'var cmModePath = "codemirror/mode/";',
' var cmAddonPath = "codemirror/addon/";',
'',
' var codeMirrorModules = [',
' "jquery", "marked", "prettify",',
' "katex", "raphael", "underscore", "flowchart", "jqueryflowchart", "sequenceDiagram",',
'',
' "codemirror/lib/codemirror",',
' cmModePath + "css/css",',
' cmModePath + "sass/sass",',
' cmModePath + "shell/shell",',
' cmModePath + "sql/sql",',
' cmModePath + "clike/clike",',
' cmModePath + "php/php",',
' cmModePath + "xml/xml",',
' cmModePath + "markdown/markdown",',
' cmModePath + "javascript/javascript",',
' cmModePath + "htmlmixed/htmlmixed",',
' cmModePath + "gfm/gfm",',
' cmModePath + "http/http",',
' cmModePath + "go/go",',
' cmModePath + "dart/dart",',
' cmModePath + "coffeescript/coffeescript",',
' cmModePath + "nginx/nginx",',
' cmModePath + "python/python",',
' cmModePath + "perl/perl",',
' cmModePath + "lua/lua",',
' cmModePath + "r/r", ',
' cmModePath + "ruby/ruby", ',
' cmModePath + "rst/rst",',
' cmModePath + "smartymixed/smartymixed",',
' cmModePath + "vb/vb",',
' cmModePath + "vbscript/vbscript",',
' cmModePath + "velocity/velocity",',
' cmModePath + "xquery/xquery",',
' cmModePath + "yaml/yaml",',
' cmModePath + "erlang/erlang",',
' cmModePath + "jade/jade",',
'',
' cmAddonPath + "edit/trailingspace", ',
' cmAddonPath + "dialog/dialog", ',
' cmAddonPath + "search/searchcursor", ',
' cmAddonPath + "search/search", ',
' cmAddonPath + "scroll/annotatescrollbar", ',
' cmAddonPath + "search/matchesonscrollbar", ',
' cmAddonPath + "display/placeholder", ',
' cmAddonPath + "edit/closetag", ',
' cmAddonPath + "fold/foldcode",',
' cmAddonPath + "fold/foldgutter",',
' cmAddonPath + "fold/indent-fold",',
' cmAddonPath + "fold/brace-fold",',
' cmAddonPath + "fold/xml-fold", ',
' cmAddonPath + "fold/markdown-fold",',
' cmAddonPath + "fold/comment-fold", ',
' cmAddonPath + "mode/overlay", ',
' cmAddonPath + "selection/active-line", ',
' cmAddonPath + "edit/closebrackets", ',
' cmAddonPath + "display/fullscreen",',
' cmAddonPath + "search/match-highlighter"',
' ];',
'',
' define(codeMirrorModules, factory);'
].join("\r\n");
var replaceText2 = [
"if (typeof define == \"function\" && define.amd) {",
" $ = arguments[0];",
" marked = arguments[1];",
" prettify = arguments[2];",
" katex = arguments[3];",
" Raphael = arguments[4];",
" _ = arguments[5];",
" flowchart = arguments[6];",
" CodeMirror = arguments[9];",
" }"
].join("\r\n");
gulp.src("src/editormd.js")
.pipe(rename({ suffix: ".amd" }))
.pipe(gulp.dest('./'))
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base);
return name[1].replace(/[\\\/]?/, "");
}}))
.pipe(gulp.dest("./"))
.pipe(replace("/* Require.js define replace */", replaceText1))
.pipe(gulp.dest('./'))
.pipe(replace("/* Require.js assignment replace */", replaceText2))
.pipe(gulp.dest('./'))
.pipe(rename({ suffix: ".min" }))
.pipe(uglify())
.pipe(gulp.dest("./"))
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") );
return name[1].replace(/[\\\/]?/, "");
}}))
.pipe(gulp.dest("./"))
.pipe(notify({ message: "amd version task complete"}));
});
var codeMirror = {
path : {
src : {
@ -135,22 +253,27 @@ var codeMirror = {
"edit/trailingspace",
"dialog/dialog",
"search/searchcursor",
"search/search",
"search/search",
"scroll/annotatescrollbar",
"search/matchesonscrollbar",
"display/placeholder",
"edit/closetag",
"fold/foldcode",
"fold/foldgutter",
"fold/indent-fold",
"fold/brace-fold",
"fold/xml-fold",
"fold/markdown-fold",
"fold/comment-fold",
"mode/overlay",
"selection/active-line",
"edit/closebrackets",
"display/fullscreen",
"search/searchcursor",
"search/match-highlighter"
]
};
gulp.task('codemirror-mode', function() {
gulp.task("cm-mode", function() {
var modes = [
codeMirror.path.src.mode + "/meta.js"
@ -162,19 +285,19 @@ gulp.task('codemirror-mode', function() {
}
return gulp.src(modes)
.pipe(concat('modes.min.js'))
.pipe(concat("modes.min.js"))
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(uglify())
.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].replace("\\", "");
}}))
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(notify({ message: 'codemirror-mode task complete' }));
.pipe(notify({ message: "codemirror-mode task complete!" }));
});
gulp.task('codemirror-addon', function() {
gulp.task("cm-addon", function() {
var addons = [];
@ -184,29 +307,29 @@ gulp.task('codemirror-addon', function() {
}
return gulp.src(addons)
.pipe(concat('addons.min.js'))
.pipe(concat("addons.min.js"))
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(uglify())
.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].replace("\\", "");
}}))
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(notify({ message: 'codemirror-addon task complete' }));
.pipe(notify({ message: "codemirror-addon.js task complete" }));
});
gulp.task("jsdoc", function(){
return gulp.src(["./src/editormd.js", "README.md"])
.pipe(jsdoc.parser())
.pipe(jsdoc.generator('./docs/html'));
.pipe(jsdoc.generator("./docs/html"));
});
gulp.task("jsdoc2md", function() {
return gulp.src("src/js/editormd.js")
.pipe(jsdoc2md())
.on("error", function(err){
gutil.log(gutil.colors.red("jsdoc2md failed"), err.message)
gutil.log(gutil.colors.red("jsdoc2md failed"), err.message);
})
.pipe(rename(function(path) {
path.extname = ".md";
@ -214,19 +337,19 @@ gulp.task("jsdoc2md", function() {
.pipe(gulp.dest("docs/markdown"));
});
gulp.task('watch', function() {
gulp.watch('src/scss/editormd.scss', ['scss']);
gulp.watch('src/scss/editormd.preview.scss', ['scss2']);
gulp.watch('src/scss/editormd.logo.scss', ['scss3']);
gulp.watch('src/js/**/*.js', ['js']);
gulp.task("watch", function() {
gulp.watch("src/scss/editormd.scss", ["scss"]);
gulp.watch("src/scss/editormd.preview.scss", ["scss", "scss2"]);
gulp.watch("src/scss/editormd.logo.scss", ["scss", "scss3"]);
gulp.watch("src/editormd.js", ["js", "amd"]);
});
gulp.task('default', function() {
gulp.run('scss');
gulp.run('scss2');
gulp.run('scss3');
gulp.run('js');
gulp.run("codemirror-addon");
gulp.run("codemirror-mode");
gulp.run('jsdoc');
gulp.task("default", function() {
gulp.run("scss");
gulp.run("scss2");
gulp.run("scss3");
gulp.run("js");
gulp.run("amd");
gulp.run("cm-addon");
gulp.run("cm-mode");
});

51
README.md
View File

@ -9,62 +9,56 @@
![](https://img.shields.io/github/issues/pandao/editor.md.svg)
![](https://img.shields.io/bower/v/editor.md.svg)
**Editor.md** is an online(In-browser) markdown editor, based on CodeMirror & jQuery.
**Editor.md** is an online markdown editor, based on CodeMirror & jQuery & Marked.
###Features
- Support Standard Markdown and GFM(GitHub Flavored Markdown);
- Full-featured: Real-time Preview, Image (cross-domain) upload, Multi-languages, L18n, Syntax highlighting...;
- Support ToC (Table of Contents);
- 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...;
- Markdown Extras : Support [ToC (Table of Contents)](https://pandao.github.io/editor.md/examples/toc.html), [Emoji](https://pandao.github.io/editor.md/examples/emoji.html), [Task lists](https://pandao.github.io/editor.md/examples/task-lists.html), [@Links](https://pandao.github.io/editor.md/examples/@links.html)...;
- Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;
- Support identification and interpretation of the HTML tags;
- Support TeX (LaTeX expressions, Based on KaTeX);
- Support Flowchart and Sequence Diagram of Markdown extended syntax;
- Support AMD/CMD (Require.js & Sea.js) Module Loader;
- Support identification, interpretation, fliter of the [HTML tags](https://pandao.github.io/editor.md/examples/html-tags-decode.html);
- Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;
- 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构建的Markdown在线编辑器。
**Editor.md** 是一个基于CodeMirror、jQuery 和 Marked 构建的 Markdown 在线编辑器。
![editormd-screenshot](https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png "editormd-screenshot")
####主要特性
- 支持Markdown标准和Github风格；
- 支持实时预览、图片（跨域）上传和多语言语法高亮；
- 兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；
- 支持[ToC（Table of Contents）](https://pandao.github.io/editor.md/examples/toc.html)；
- 支持识别和解析HTML标签，具有几乎无限的扩展性；
- 支持TeX科学公式（基于[KaTeX](https://pandao.github.io/editor.md/examples/katex.html)）；
- 支持流程图 `flowchart` 和时序图 `sequenceDiagram`;
- 支持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)）；
- 支持“标准”Markdown和Github风格的语法，也可[变身为代码编辑器](https://pandao.github.io/editor.md/examples/change-mode.html)；
- 支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
- 支持[ToC（Table of Contents）](https://pandao.github.io/editor.md/examples/toc.html)、[Emoji表情](https://pandao.github.io/editor.md/examples/emoji.html)、[Task lists](https://pandao.github.io/editor.md/examples/task-lists.html)、[@链接](https://pandao.github.io/editor.md/examples/@links.html)等Markdown扩展语法；
- 支持TeX科学公式（基于[KaTeX](https://pandao.github.io/editor.md/examples/katex.html)）、流程图 [Flowchart](https://pandao.github.io/editor.md/examples/flowchart.html) 和 [时序图 Sequence Diagram](https://pandao.github.io/editor.md/examples/sequence-diagram.html);
- 支持[识别和解析HTML标签，并且支持自定义过滤标签解析](https://pandao.github.io/editor.md/examples/html-tags-decode.html)，具有可靠的安全性和几乎无限的扩展性；
- 支持 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)
[https://pandao.github.io/editor.md/examples/index.html](https://pandao.github.io/editor.md/examples/index.html)
####下载和安装
####下载和安装 (Download & install)
通过Github下载安装，或者通过bower安装：
通过 [Github下载安装](https://github.com/pandao/editor.md/archive/master.zip)，或者通过 Bower 安装：
bower install editor.md
####使用方法
####使用方法 (Usage)
HTML：
<link rel="stylesheet" href="../dist/css/editormd.css" />
<div id="test-editormd">
<textarea>###Hello world!</textarea>
<textarea style="display:none;">###Hello world!</textarea>
</div>
> 提示1：如果没有Markdown源内容或者通过Ajax异步加载Markdown源文档等，可以不添加`<textarea>`，会自动添加；
> 提示2：如果不想出现textarea闪现，则在textarea加上 style="display:none;"；
javascript:
@ -82,7 +76,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)
- [CodeMirror](http://codemirror.net/ "CodeMirror")
- [marked](https://github.com/chjj/marked "marked")
@ -94,10 +88,11 @@ javascript:
- [Rephael.js](http://raphaeljs.com/ "Rephael.js")
- [flowchart.js](http://adrai.github.io/flowchart.js/ "flowchart.js")
- [sequence-diagram.js](http://bramp.github.io/js-sequence-diagrams/ "sequence-diagram.js")
- [Prefixes.scss](https://github.com/pandao/prefixes.scss "Prefixes.scss")
####更新日志
####Changes
[查看更新日志](https://github.com/pandao/editor.md/blob/master/CHANGE.md)
[更新日志 Change logs](https://github.com/pandao/editor.md/blob/master/CHANGE.md)
####License

2
bower.json
View File

@ -1,6 +1,6 @@
{
"name": "editor.md",
"version": "1.1.9",
"version": "1.2.0",
"homepage": "https://github.com/pandao/editor.md",
"authors": [
"Pandao <pandao@vip.qq.com>"

218
dist/css/editormd.css → css/editormd.css
View File

@ -1,15 +1,24 @@
/*
* Editor.md
*
* @file editormd.css
* @version v1.1.9
* @version v1.2.0
* @description A simple online markdown editor.
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-03-04
* @updateTime 2015-03-10
*/
@charset "UTF-8";
/*!
* prefixes.scss
* @author Pandao
* @version 0.1.0
* @homePage https://github.com/pandao/prefixes.scss
* @license MIT
* @copyright Copyright (c) 2015
*/
/*!
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
@ -2369,7 +2378,6 @@
border: 1px solid #ddd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
}
@ -2394,9 +2402,18 @@
.editormd select, .editormd textarea, .editormd button {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
}
/*!
* 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");
@ -2404,7 +2421,15 @@
font-weight: normal;
font-style: normal;
}
.editormd-logo {
.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;
@ -2419,7 +2444,15 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.editormd-logo:before {
.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;
@ -2534,7 +2567,11 @@
border: 1px solid #ddd;
background: #eee;
-webkit-transition: all 300ms ease-out;
/* Safari, Chrome */
-moz-transition: all 300ms ease-out;
/* Firefox 4.0~16.0 */
transition: all 300ms ease-out;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-menu > li > a > .fa {
text-align: center;
@ -2564,10 +2601,15 @@
left: 0;
z-index: 100;
-webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
/* Webkit browsers */
-moz-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
/* Firefox */
-ms-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
/* IE9 */
-o-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
/* Opera(Old) */
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.15);
/* IE9+, News */
}
.editormd-dropdown-menu:before, .editormd-dropdown-menu:after {
width: 0;
@ -2595,7 +2637,11 @@
.editormd-dropdown-menu > li > a:hover {
background: #f6f6f6;
-webkit-transition: all 300ms ease-out;
/* Safari, Chrome */
-moz-transition: all 300ms ease-out;
/* Firefox 4.0~16.0 */
transition: all 300ms ease-out;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-dropdown-menu > li + li {
border-top: 1px solid #ddd;
@ -2611,7 +2657,6 @@
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
@ -2626,10 +2671,15 @@
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
/* Webkit browsers */
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
/* Firefox */
-ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
/* IE9 */
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
/* Opera(Old) */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
/* IE9+, News */
background: #fff;
font-size: 14px;
}
@ -2666,7 +2716,11 @@
font-size: 18px;
color: #ccc;
-webkit-transition: color 300ms ease-out;
/* Safari, Chrome */
-moz-transition: color 300ms ease-out;
/* Firefox 4.0~16.0 */
transition: color 300ms ease-out;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-dialog-close:hover {
color: #999;
@ -2676,7 +2730,11 @@
padding: 11px 20px;
border-bottom: 1px solid #eee;
-webkit-transition: background 300ms ease-out;
/* Safari, Chrome */
-moz-transition: background 300ms ease-out;
/* Firefox 4.0~16.0 */
transition: background 300ms ease-out;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-dialog-header:hover {
background: #f6f6f6;
@ -2727,7 +2785,9 @@
position: fixed;
background: #000;
opacity: 0.2;
/* W3C */
filter: alpha(opacity=20);
/* IE */
z-index: 99998;
}
@ -2735,7 +2795,13 @@
.editormd-dialog-mask-con {
background: url(../images/loading.gif) no-repeat center center;
-webkit-background-size: 32px 32px;
/* Chrome, iOS, Safari */
-moz-background-size: 32px 32px;
/* Firefox 3.6~4.0 */
-o-background-size: 32px 32px;
/* Opera 9.5 */
background-size: 32px 32px;
/* IE9+, New */
}
.editormd-container-mask {
@ -2756,8 +2822,8 @@
background-image: url(../images/loading@3x.gif);
}
}
.editormd-dialog-code-block textarea,
.editormd-dialog-tab-code-block textarea {
.editormd-code-block-dialog textarea,
.editormd-preformatted-text-dialog textarea {
width: 100%;
height: 400px;
margin-bottom: 6px;
@ -2774,6 +2840,93 @@
margin: -5px 0 12px;
}
.editormd-grid-table {
width: 99%;
display: table;
border: 1px solid #ddd;
border-collapse: collapse;
}
.editormd-grid-table-row {
width: 100%;
display: table-row;
}
.editormd-grid-table-row a {
font-size: 1.4em;
width: 5%;
height: 36px;
color: #999;
text-align: center;
display: table-cell;
vertical-align: middle;
border: 1px solid #ddd;
text-decoration: none;
-webkit-transition: background-color 300ms ease-out, color 100ms ease-in;
/* Safari, Chrome */
-moz-transition: background-color 300ms ease-out, color 100ms ease-in;
/* Firefox 4.0~16.0 */
transition: background-color 300ms ease-out, color 100ms ease-in;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-grid-table-row a.selected {
color: #666;
background-color: #eee;
}
.editormd-grid-table-row a:hover {
color: #777;
background-color: #f6f6f6;
}
.editormd-tab-head {
list-style: none;
border-bottom: 1px solid #ddd;
}
.editormd-tab-head li {
display: inline-block;
}
.editormd-tab-head li a {
color: #999;
display: block;
padding: 6px 12px 5px;
text-align: center;
text-decoration: none;
margin-bottom: -1px;
border: 1px solid #ddd;
-webkit-border-top-left-radius: 3px;
-moz-border-top-left-radius: 3px;
-ms-border-top-left-radius: 3px;
-o-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-top-right-radius: 3px;
-ms-border-top-right-radius: 3px;
-o-border-top-right-radius: 3px;
border-top-right-radius: 3px;
background: #f6f6f6;
-webkit-transition: all 300ms ease-out;
/* Safari, Chrome */
-moz-transition: all 300ms ease-out;
/* Firefox 4.0~16.0 */
transition: all 300ms ease-out;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-tab-head li a:hover {
color: #666;
background: #eee;
}
.editormd-tab-head li.active a {
color: #666;
background: #fff;
border-bottom-color: #fff;
}
.editormd-tab-head li + li {
margin-left: 3px;
}
.editormd-tab-box {
padding: 20px 0;
}
.editormd-form {
color: #666;
}
@ -2793,15 +2946,41 @@
.editormd-form input:focus {
outline: 0;
}
.editormd-form input[type="text"] {
.editormd-form input[type="text"], .editormd-form input[type="number"] {
color: #999;
padding: 7px 8px;
border: 1px solid #ddd;
}
.editormd-form input[type="number"] {
width: 40px;
display: inline-block;
padding: 5px 8px;
}
.editormd-form input[type="text"] {
display: inline-block;
width: 242px;
}
.editormd-form .fa-btns {
display: inline-block;
}
.editormd-form .fa-btns a {
color: #999;
padding: 7px 10px 0 0;
display: inline-block;
text-decoration: none;
text-align: center;
}
.editormd-form .fa-btns .fa {
font-size: 1.3em;
}
.editormd-form .fa-btns label {
float: none;
display: inline-block;
width: auto;
text-align: left;
padding: 0 0 0 5px;
cursor: pointer;
}
.editormd-form input[type="submit"], .editormd-form .editormd-btn, .editormd-form button,
.editormd-dialog-container input[type="submit"],
@ -2822,7 +3001,11 @@
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: background 300ms ease-out;
/* Safari, Chrome */
-moz-transition: background 300ms ease-out;
/* Firefox 4.0~16.0 */
transition: background 300ms ease-out;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-form input[type="submit"]:hover, .editormd-form .editormd-btn:hover, .editormd-form button:hover,
.editormd-dialog-container input[type="submit"]:hover,
@ -2876,7 +3059,6 @@
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
}
@ -2935,6 +3117,14 @@
background-repeat: no-repeat;
}
/*!
* prefixes.scss
* @author Pandao
* @version 0.1.0
* @homePage https://github.com/pandao/prefixes.scss
* @license MIT
* @copyright Copyright (c) 2015
*/
/*! github-markdown-css | The MIT License (MIT) | Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com) | https://github.com/sindresorhus/github-markdown-css */
@font-face {
font-family: octicons-anchor;
@ -3653,6 +3843,10 @@
.editormd-preview-container span.editormd-tex, .editormd-html-preview span.editormd-tex {
margin: 0 5px;
}
.editormd-preview-container .emoji, .editormd-html-preview .emoji {
width: 24px;
height: 24px;
}
.editormd-preview-container .sequence-diagram, .editormd-preview-container .flowchart, .editormd-html-preview .sequence-diagram, .editormd-html-preview .flowchart {
text-align: center;
}
@ -3837,7 +4031,11 @@ li.L9 {
right: 20px;
z-index: 19;
-webkit-transition: background-color 300ms ease-out;
/* Safari, Chrome */
-moz-transition: background-color 300ms ease-out;
/* Firefox 4.0~16.0 */
transition: background-color 300ms ease-out;
/* IE >9, FF >15, Opera >12.0 */
}
.editormd-preview-close-btn:hover {

19
css/editormd.css.map
View File

File diff suppressed because one or more lines are too long

2
css/editormd.css.min.map
View File

File diff suppressed because one or more lines are too long

33
dist/css/editormd.logo.css → css/editormd.logo.css
View File

@ -1,14 +1,23 @@
/*
* Editor.md
*
* @file editormd.logo.css
* @version v1.1.9
* @version v1.2.0
* @description A simple online markdown editor.
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-03-04
* @updateTime 2015-03-10
*/
/*!
* 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");
@ -16,7 +25,15 @@
font-weight: normal;
font-style: normal;
}
.editormd-logo {
.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;
@ -31,7 +48,15 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.editormd-logo:before {
.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;

19
css/editormd.logo.css.map
View File

@ -0,0 +1,19 @@
/*
* Editor.md
*
* @file editormd.logo.css.map
* @version v1.2.0
* @description A simple online markdown editor.
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-03-10
*/
{
"version": 3,
"mappings": ";;;;;;;;AAKA,UASC;EARA,WAAW,EAAE,eAAe;EAC5B,GAAG,EAAC,yCAAyC;EAC7C,GAAG,EAAC,sQAA4E;EAIhF,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGnB;;;;;;;;iBAQkB;EACjB,WAAW,EAAE,eAAe;EAC5B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,YAAY,EAAE,MAAM;EACpB,cAAc,EAAE,IAAI;EACjB,SAAS,EAAE,OAAO;EACrB,WAAW,EAAE,CAAC;EACX,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,IAAI;EACpB,cAAc,EAAE,OAAO;EAG1B,sBAAsB,EAAE,WAAW;EACnC,uBAAuB,EAAE,SAAS;;AAE/B;;;;;;;;wBAAS;EACL,OAAO,EAAE,QAAQ;;;;;;;AAQzB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,KAAK;;;AAGpB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,oBAAqB;EACjB,KAAK,EChFO,OAAU",
"sources": ["../editormd.logo.scss","file:///D:/APMServ/www/htdocs/editor.md/scss/lib/variables.scss"],
"names": [],
"file": "editormd.logo.css"
}

2
css/editormd.logo.css.min.map
View File

@ -0,0 +1,2 @@
/*! Editor.md v1.2.0 | editormd.logo.css.min.map | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-10 */
{"version":3,"mappings":";;;;;;;;AAKA,UASC;EARA,WAAW,EAAE,eAAe;EAC5B,GAAG,EAAC,yCAAyC;EAC7C,GAAG,EAAC,sQAA4E;EAIhF,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGnB;;;;;;;;iBAQkB;EACjB,WAAW,EAAE,eAAe;EAC5B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,YAAY,EAAE,MAAM;EACpB,cAAc,EAAE,IAAI;EACjB,SAAS,EAAE,OAAO;EACrB,WAAW,EAAE,CAAC;EACX,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,IAAI;EACpB,cAAc,EAAE,OAAO;EAG1B,sBAAsB,EAAE,WAAW;EACnC,uBAAuB,EAAE,SAAS;;AAE/B;;;;;;;;wBAAS;EACL,OAAO,EAAE,QAAQ;;;;;;;AAQzB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,KAAK;;;AAGpB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,oBAAqB;EACjB,KAAK,EChFO,OAAU","sources"["../editormd.logo.scss","file:///D:/APMServ/www/htdocs/editor.md/scss/lib/variables.scss"],"names"[],"file":"editormd.logo.css"}

9
css/editormd.logo.min.css
View File

@ -0,0 +1,9 @@
/*! Editor.md v1.2.0 | editormd.logo.min.css | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-10 */
/*!
* 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}

26
css/editormd.min.css
View File

File diff suppressed because one or more lines are too long

17
dist/css/editormd.preview.css → css/editormd.preview.css
View File

@ -1,14 +1,23 @@
/*
* Editor.md
*
* @file editormd.preview.css
* @version v1.1.9
* @version v1.2.0
* @description A simple online markdown editor.
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-03-04
* @updateTime 2015-03-10
*/
/*!
* prefixes.scss
* @author Pandao
* @version 0.1.0
* @homePage https://github.com/pandao/prefixes.scss
* @license MIT
* @copyright Copyright (c) 2015
*/
/*! github-markdown-css | The MIT License (MIT) | Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com) | https://github.com/sindresorhus/github-markdown-css */
@font-face {
font-family: octicons-anchor;
@ -727,6 +736,10 @@
.editormd-preview-container span.editormd-tex, .editormd-html-preview span.editormd-tex {
margin: 0 5px;
}
.editormd-preview-container .emoji, .editormd-html-preview .emoji {
width: 24px;
height: 24px;
}
.editormd-preview-container .sequence-diagram, .editormd-preview-container .flowchart, .editormd-html-preview .sequence-diagram, .editormd-html-preview .flowchart {
text-align: center;
}

19
css/editormd.preview.css.map
View File

File diff suppressed because one or more lines are too long

2
css/editormd.preview.css.min.map
View File

File diff suppressed because one or more lines are too long

9
css/editormd.preview.min.css
View File

File diff suppressed because one or more lines are too long

18
dist/css/editormd.css.map
View File

File diff suppressed because one or more lines are too long

2
dist/css/editormd.css.min.map
View File

File diff suppressed because one or more lines are too long

18
dist/css/editormd.logo.css.map
View File

@ -1,18 +0,0 @@
/*
* Editor.md
* @file editormd.logo.css.map
* @version v1.1.9
* @description A simple online markdown editor.
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-03-04
*/
{
"version": 3,
"mappings": "AAKA,UASC;EARA,WAAW,EAAE,eAAe;EAC5B,GAAG,EAAC,yCAAyC;EAC7C,GAAG,EAAC,sQAA4E;EAIhF,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGnB,cAAe;EACd,WAAW,EAAE,eAAe;EAC5B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,YAAY,EAAE,MAAM;EACpB,cAAc,EAAE,IAAI;EACjB,SAAS,EAAE,OAAO;EACrB,WAAW,EAAE,CAAC;EACX,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,IAAI;EACpB,cAAc,EAAE,OAAO;EAG1B,sBAAsB,EAAE,WAAW;EACnC,uBAAuB,EAAE,SAAS;;AAE/B,qBAAS;EACL,OAAO,EAAE,QAAQ;;;;;;;AAQzB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,KAAK;;;AAGpB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,oBAAqB;EACjB,KAAK,ECxEO,OAAU",
"sources": ["../editormd.logo.scss","file:///D:/APMServ/www/htdocs/editor.md/src/scss/lib/variables.scss"],
"names": [],
"file": "editormd.logo.css"
}

2
dist/css/editormd.logo.css.min.map
View File

@ -1,2 +0,0 @@
/*! Editor.md v1.1.9 | editormd.logo.css.min.map | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-04 */
{"version":3,"mappings":"AAKA,UASC;EARA,WAAW,EAAE,eAAe;EAC5B,GAAG,EAAC,yCAAyC;EAC7C,GAAG,EAAC,sQAA4E;EAIhF,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGnB,cAAe;EACd,WAAW,EAAE,eAAe;EAC5B,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,YAAY,EAAE,MAAM;EACpB,cAAc,EAAE,IAAI;EACjB,SAAS,EAAE,OAAO;EACrB,WAAW,EAAE,CAAC;EACX,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,IAAI;EACpB,cAAc,EAAE,OAAO;EAG1B,sBAAsB,EAAE,WAAW;EACnC,uBAAuB,EAAE,SAAS;;AAE/B,qBAAS;EACL,OAAO,EAAE,QAAQ;;;;;;;AAQzB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,KAAK;;;AAGpB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,iBAAkB;EACd,SAAS,EAAE,GAAG;;;AAGlB,oBAAqB;EACjB,KAAK,ECxEO,OAAU","sources"["../editormd.logo.scss","file:///D:/APMServ/www/htdocs/editor.md/src/scss/lib/variables.scss"],"names"[],"file":"editormd.logo.css"}

2
dist/css/editormd.logo.min.css
View File

@ -1,2 +0,0 @@
/*! Editor.md v1.1.9 | editormd.logo.min.css | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-04 */
@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{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: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}

5
dist/css/editormd.min.css
View File

File diff suppressed because one or more lines are too long

18
dist/css/editormd.preview.css.map
View File

File diff suppressed because one or more lines are too long

2
dist/css/editormd.preview.css.min.map
View File

File diff suppressed because one or more lines are too long

2
dist/css/editormd.preview.min.css
View File

File diff suppressed because one or more lines are too long

3
dist/js/editormd.min.js
View File

File diff suppressed because one or more lines are too long

121
dist/js/languages/en.js
View File

@ -1,121 +0,0 @@
/*
* Editor.md
* @file languages\en.js
* @version v1.1.9
* @description A simple online markdown editor.
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-03-04
*/
(function(){
var factory = function (exports) {
var lang = {
name : "en",
description : "A simple markdown doucment online editor.",
toolbar : {
undo : "Undo(Ctrl+Z)",
redo : "Redo(Ctrl+Y)",
bold : "Bold",
del : "Strikethrough",
italic : "Italic",
quote : "Block quote",
h1 : "Heading 1",
h2 : "Heading 2",
h3 : "Heading 3",
h4 : "Heading 4",
h5 : "Heading 5",
h6 : "Heading 6",
"list-ul" : "Unordered list",
"list-ol" : "Ordered list",
hr : "Horizontal line",
link : "Link",
anchor : "Anchor",
image : "Image",
code : "Code inline",
"code-block-tab" : "Preformatted text / Code block (Tab indent)",
"code-block" : "Code block (Multi-languages)",
datetime : "Datetime",
watch : "Unwatch",
unwatch : "Watch",
preview : "HTML Preview (Enter ESC exit)",
fullscreen : "Fullscreen (Enter ESC exit)",
clear : "Clear",
info : "About " + exports.title
},
buttons : {
enter : "Enter",
cancel : "Cancel"
},
dialog : {
link : {
title : "Link",
url : "Address",
urlTitle : "Title",
urlEmpty : "Error: Please fill in the link address.",
titleEmpty : "Error: Please fill in the link title."
},
anchor : {
title : "Anchor link",
name : "Name",
url : "Address",
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."
},
image : {
title : "Image",
url : "Address",
link : "Link",
alt : "Title",
uploadButton : "Upload",
imageURLEmpty : "Error: picture url address can't be empty.",
uploadFileEmpty : "Error: upload pictures cannot be empty!",
formatNotAllowed : "Error: only allows to upload pictures file, upload allowed image file format:"
},
tabCodeBlock : {
title : "Preformatted text / Codes",
codeEmptyAlert : "Error: Please fill in the Preformatted text or content of the codes."
},
codeBlock : {
title : "Code block",
selectLabel : "Languages: ",
selectDefaultText : "select a code language...",
otherLanguage : "Other languages",
unselectedLanguageAlert : "Error: Please select the code language.",
codeEmptyAlert : "Error: Please fill in the code content."
}
}
};
exports.defaults.lang = lang;
};
// 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);
}
})();

2
dist/js/languages/en.min.js
View File

@ -1,2 +0,0 @@
/*! Editor.md v1.1.9 | languages\en.min.js | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-04 */
!function(){var e=function(e){var t={name:"en",description:"A simple markdown doucment online editor.",toolbar:{undo:"Undo(Ctrl+Z)",redo:"Redo(Ctrl+Y)",bold:"Bold",del:"Strikethrough",italic:"Italic",quote:"Block quote",h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6","list-ul":"Unordered list","list-ol":"Ordered list",hr:"Horizontal line",link:"Link",anchor:"Anchor",image:"Image",code:"Code inline","code-block-tab":"Preformatted text / Code block (Tab indent)","code-block":"Code block (Multi-languages)",datetime:"Datetime",watch:"Unwatch",unwatch:"Watch",preview:"HTML Preview (Enter ESC exit)",fullscreen:"Fullscreen (Enter ESC exit)",clear:"Clear",info:"About "+e.title},buttons:{enter:"Enter",cancel:"Cancel"},dialog:{link:{title:"Link",url:"Address",urlTitle:"Title",urlEmpty:"Error: Please fill in the link address.",titleEmpty:"Error: Please fill in the link title."},anchor:{title:"Anchor link",name:"Name",url:"Address",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."},image:{title:"Image",url:"Address",link:"Link",alt:"Title",uploadButton:"Upload",imageURLEmpty:"Error: picture url address can't be empty.",uploadFileEmpty:"Error: upload pictures cannot be empty!",formatNotAllowed:"Error: only allows to upload pictures file, upload allowed image file format:"},tabCodeBlock:{title:"Preformatted text / Codes",codeEmptyAlert:"Error: Please fill in the Preformatted text or content of the codes."},codeBlock:{title:"Code block",selectLabel:"Languages: ",selectDefaultText:"select a code language...",otherLanguage:"Other languages",unselectedLanguageAlert:"Error: Please select the code language.",codeEmptyAlert:"Error: Please fill in the code content."}}};e.defaults.lang=t};"function"==typeof require&&"object"==typeof exports&&"object"==typeof module?module.exports=e:"function"==typeof define?define.amd?define(["editormd"],function(t){e(t)}):define(function(t){var l=t("../editormd");e(l)}):e(window.editormd)}();

121
dist/js/languages/zh-tw.js
View File

@ -1,121 +0,0 @@
/*
* Editor.md
* @file languages\zh-tw.js
* @version v1.1.9
* @description A simple online markdown editor.
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-03-04
*/
(function(){
var factory = function (exports) {
var lang = {
name : "zh-tw",
description : "開源在線Markdown編輯器<br/>A simple markdown doucment online editor.",
toolbar : {
undo : "撤銷（Ctrl+Z）",
redo : "重做（Ctrl+Y）",
bold : "粗體",
del : "刪除線",
italic : "斜體",
quote : "引用",
h1 : "標題1",
h2 : "標題2",
h3 : "標題3",
h4 : "標題4",
h5 : "標題5",
h6 : "標題6",
"list-ul" : "無序列表",
"list-ol" : "有序列表",
hr : "横线",
link : "链接",
anchor : "錨點",
image : "圖片",
code : "行內代碼",
"code-block-tab" : "預格式文本 / 代碼塊（縮進風格）",
"code-block" : "代碼塊（多語言風格）",
datetime : "日期時間",
watch : "關閉實時預覽",
unwatch : "開啟實時預覽",
preview : "全窗口預覽HTML（可按ESC還原）",
fullscreen : "全屏（可按ESC還原）",
clear : "清空",
info : "關於" + exports.title
},
buttons : {
enter : "確定",
cancel : "取消"
},
dialog : {
link : {
title : "添加鏈接",
url : "鏈接地址",
urlTitle : "鏈接標題",
urlEmpty : "錯誤：請填寫鏈接地址。",
titleEmpty : "錯誤：請填寫鏈接標題。"
},
anchor : {
title : "添加錨點鏈接",
name : "錨點名稱",
url : "鏈接地址",
urlTitle : "鏈接標題",
nameEmpty: "錯誤：錨點名稱不能為空。",
titleEmpty : "錯誤：請填寫錨點鏈接標題。",
urlEmpty : "錯誤：請填寫錨點鏈接地址。"
},
image : {
title : "添加圖片",
url : "圖片地址",
link : "圖片鏈接",
alt : "圖片描述",
uploadButton : "本地上傳",
imageURLEmpty : "錯誤：圖片地址不能為空。",
uploadFileEmpty : "錯誤：上傳的圖片不能為空！",
formatNotAllowed : "錯誤：只允許上傳圖片文件，允許上傳的圖片文件格式有："
},
tabCodeBlock : {
title : "添加預格式文本或代碼塊",
codeEmptyAlert : "錯誤：請填寫預格式文本或代碼的內容。"
},
codeBlock : {
title : "添加代碼塊",
selectLabel : "代碼語言：",
selectDefaultText : "請語言代碼語言",
otherLanguage : "其他語言",
unselectedLanguageAlert : "錯誤：請選擇代碼所屬的語言類型。",
codeEmptyAlert : "錯誤：請填寫代碼內容。"
}
}
};
exports.defaults.lang = lang;
};
// 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);
}
})();

2
dist/js/languages/zh-tw.min.js
View File

@ -1,2 +0,0 @@
/*! Editor.md v1.1.9 | languages\zh-tw.min.js | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-03-04 */
!function(){var e=function(e){var t={name:"zh-tw",description:"開源在線Markdown編輯器<br/>A simple markdown doucment online editor.",toolbar:{undo:"撤銷（Ctrl+Z）",redo:"重做（Ctrl+Y）",bold:"粗體",del:"刪除線",italic:"斜體",quote:"引用",h1:"標題1",h2:"標題2",h3:"標題3",h4:"標題4",h5:"標題5",h6:"標題6","list-ul":"無序列表","list-ol":"有序列表",hr:"横线",link:"链接",anchor:"錨點",image:"圖片",code:"行內代碼","code-block-tab":"預格式文本 / 代碼塊（縮進風格）","code-block":"代碼塊（多語言風格）",datetime:"日期時間",watch:"關閉實時預覽",unwatch:"開啟實時預覽",preview:"全窗口預覽HTML（可按ESC還原）",fullscreen:"全屏（可按ESC還原）",clear:"清空",info:"關於"+e.title},buttons:{enter:"確定",cancel:"取消"},dialog:{link:{title:"添加鏈接",url:"鏈接地址",urlTitle:"鏈接標題",urlEmpty:"錯誤：請填寫鏈接地址。",titleEmpty:"錯誤：請填寫鏈接標題。"},anchor:{title:"添加錨點鏈接",name:"錨點名稱",url:"鏈接地址",urlTitle:"鏈接標題",nameEmpty:"錯誤：錨點名稱不能為空。",titleEmpty:"錯誤：請填寫錨點鏈接標題。",urlEmpty:"錯誤：請填寫錨點鏈接地址。"},image:{title:"添加圖片",url:"圖片地址",link:"圖片鏈接",alt:"圖片描述",uploadButton:"本地上傳",imageURLEmpty:"錯誤：圖片地址不能為空。",uploadFileEmpty:"錯誤：上傳的圖片不能為空！",formatNotAllowed:"錯誤：只允許上傳圖片文件，允許上傳的圖片文件格式有："},tabCodeBlock:{title:"添加預格式文本或代碼塊",codeEmptyAlert:"錯誤：請填寫預格式文本或代碼的內容。"},codeBlock:{title:"添加代碼塊",selectLabel:"代碼語言：",selectDefaultText:"請語言代碼語言",otherLanguage:"其他語言",unselectedLanguageAlert:"錯誤：請選擇代碼所屬的語言類型。",codeEmptyAlert:"錯誤：請填寫代碼內容。"}}};e.defaults.lang=t};"function"==typeof require&&"object"==typeof exports&&"object"==typeof module?module.exports=e:"function"==typeof define?define.amd?define(["editormd"],function(t){e(t)}):define(function(t){var l=t("../editormd");e(l)}):e(window.editormd)}();

149
docs/html/index.html
View File

@ -1,149 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Index</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Index</h1>
<h3> </h3>
<section>
<article><h1 id="editor-md">Editor.md</h1>
<p><img src="https://pandao.github.io/editor.md/dist/images/logos/editormd-logo-180x180.png" alt=""></p>
<p><img src="https://img.shields.io/github/stars/pandao/editor.md.svg" alt="">
<img src="https://img.shields.io/github/forks/pandao/editor.md.svg" alt="">
<img src="https://img.shields.io/github/tag/pandao/editor.md.svg" alt="">
<img src="https://img.shields.io/github/release/pandao/editor.md.svg" alt="">
<img src="https://img.shields.io/github/issues/pandao/editor.md.svg" alt="">
<img src="https://img.shields.io/bower/v/editor.md.svg" alt=""></p>
<p><strong>Editor.md</strong> is an online(In-browser) markdown editor, based on CodeMirror &amp; jQuery.</p>
<h3 id="features">Features</h3>
<ul>
<li>Support Standard Markdown and GFM(GitHub Flavored Markdown);</li>
<li>Full-featured: Real-time Preview, Image (cross-domain) upload, Multi-languages, L18n, Syntax highlighting...;</li>
<li>Support ToC (Table of Contents);</li>
<li>Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;</li>
<li>Support identification and interpretation of the HTML tags;</li>
<li>Support TeX (LaTeX expressions, Based on KaTeX);</li>
<li>Support Flowchart and Sequence Diagram of Markdown extended syntax;</li>
<li>Support AMD/CMD (Require.js &amp; Sea.js) Module Loader;</li>
</ul>
<p><a href="https://pandao.github.io/editor.md/en.html">README &amp; Examples (English)</a></p>
<hr>
<p><strong>Editor.md</strong> 是一个基于CodeMirror和jQuery构建的Markdown在线编辑器。</p>
<p><img src="https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png" alt="editormd-screenshot" title="editormd-screenshot"></p>
<h4 id="-">主要特性</h4>
<ul>
<li>支持Markdown标准和Github风格；</li>
<li>支持实时预览、图片（跨域）上传和多语言语法高亮；</li>
<li>兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；</li>
<li>支持<a href="https://pandao.github.io/editor.md/examples/toc.html">ToC（Table of Contents）</a>；</li>
<li>支持识别和解析HTML标签，具有几乎无限的扩展性；</li>
<li>支持TeX科学公式（基于<a href="https://pandao.github.io/editor.md/examples/katex.html">KaTeX</a>）；</li>
<li>支持流程图 <code>flowchart</code> 和时序图 <code>sequenceDiagram</code>;</li>
<li>支持AMD/CMD模块化加载（支持 <a href="https://pandao.github.io/editor.md/examples/use-requirejs.html">Require.js</a> &amp; <a href="https://pandao.github.io/editor.md/examples/use-seajs.html">Sea.js</a>）；</li>
</ul>
<h4 id="-">在线演示</h4>
<p><a href="https://pandao.github.io/editor.md/examples/index.html">https://pandao.github.io/editor.md/examples/index.html</a></p>
<h4 id="-">下载和安装</h4>
<p>通过Github下载安装，或者通过bower安装：</p>
<pre><code>bower install editor.md
</code></pre><h4 id="-">使用方法</h4>
<p>HTML：</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../dist/css/editormd.css&quot; /&gt;
&lt;div id=&quot;test-editormd&quot;&gt;
&lt;textarea&gt;###Hello world!&lt;/textarea&gt;
&lt;/div&gt;
</code></pre><blockquote>
<p>提示1：如果没有Markdown源内容或者通过Ajax异步加载Markdown源文档等，可以不添加<code>&lt;textarea&gt;</code>，会自动添加；</p>
<p>提示2：如果不想出现textarea闪现，则在textarea加上 style=&quot;display:none;&quot;；</p>
</blockquote>
<p>javascript:</p>
<pre><code>&lt;script src=&quot;../lib/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../src/js/editormd.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function() {
var testEditor = editormd(&quot;test-editormd&quot;, {
path : &#39;../lib/&#39; // codemirror、marked等依赖的库的路径
});
});
&lt;/script&gt;
</code></pre><blockquote>
<p>Require.js的使用方法：<a href="https://github.com/pandao/editor.md/tree/master/examples/use-requirejs.html">https://github.com/pandao/editor.md/tree/master/examples/use-requirejs.html</a></p>
<p>Sea.js的使用方法：<a href="https://github.com/pandao/editor.md/tree/master/examples/use-seajs.html">https://github.com/pandao/editor.md/tree/master/examples/use-seajs.html</a></p>
</blockquote>
<h4 id="-">依赖项目及感谢</h4>
<ul>
<li><a href="http://codemirror.net/" title="CodeMirror">CodeMirror</a></li>
<li><a href="https://github.com/chjj/marked" title="marked">marked</a></li>
<li><a href="http://jquery.com/" title="jQuery">jQuery</a></li>
<li><a href="http://fontawesome.io/" title="FontAwesome">FontAwesome</a></li>
<li><a href="https://github.com/sindresorhus/github-markdown-css" title="github-markdown.css">github-markdown.css</a></li>
<li><a href="http://khan.github.io/KaTeX/" title="KaTeX">KaTeX</a></li>
<li><a href="http://code.google.com/p/google-code-prettify/" title="prettify.js">prettify.js</a></li>
<li><a href="http://raphaeljs.com/" title="Rephael.js">Rephael.js</a></li>
<li><a href="http://adrai.github.io/flowchart.js/" title="flowchart.js">flowchart.js</a></li>
<li><a href="http://bramp.github.io/js-sequence-diagrams/" title="sequence-diagram.js">sequence-diagram.js</a></li>
</ul>
<h4 id="-">更新日志</h4>
<p><a href="https://github.com/pandao/editor.md/blob/master/CHANGE.md">查看更新日志</a></p>
<h4 id="license">License</h4>
<p>The MIT License.</p>
<p>Copyright (c) 2015 Pandao</p>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Index</a></h2>
</nav>
<br clear="both">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha5</a> on Wed Mar 04 2015 17:12:36 GMT+0800 (中国标准时间)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>

25
docs/html/scripts/linenumber.js
View File

@ -1,25 +0,0 @@
/*global document */
(function() {
var source = document.getElementsByClassName('prettyprint source linenums');
var i = 0;
var lineNumber = 0;
var lineId;
var lines;
var totalLines;
var anchorHash;
if (source && source[0]) {
anchorHash = document.location.hash.substring(1);
lines = source[0].getElementsByTagName('li');
totalLines = lines.length;
for (; i < totalLines; i++) {
lineNumber++;
lineId = 'line' + lineNumber;
lines[i].id = lineId;
if (lineId === anchorHash) {
lines[i].className += ' selected';
}
}
}
})();

202
docs/html/scripts/prettify/Apache-License-2.0.txt
View File

@ -1,202 +0,0 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

2
docs/html/scripts/prettify/lang-css.js
View File

@ -1,2 +0,0 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com",
/^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);

28
docs/html/scripts/prettify/prettify.js
View File

@ -1,28 +0,0 @@
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();

334
docs/html/styles/jsdoc-default.css
View File

@ -1,334 +0,0 @@
html
{
overflow: auto;
background-color: #fff;
}
body
{
font: 14px "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 130%;
color: #000;
background-color: #fff;
}
a {
color: #444;
}
a:visited {
color: #444;
}
a:active {
color: #444;
}
header
{
display: block;
padding: 6px 4px;
}
.class-description {
font-style: italic;
font-family: Palatino, 'Palatino Linotype', serif;
font-size: 130%;
line-height: 140%;
margin-bottom: 1em;
margin-top: 1em;
}
#main {
float: left;
width: 100%;
}
section
{
display: block;
background-color: #fff;
padding: 12px 24px;
border-bottom: 1px solid #ccc;
margin-right: 240px;
}
.variation {
display: none;
}
.optional:after {
content: "opt";
font-size: 60%;
color: #aaa;
font-style: italic;
font-weight: lighter;
}
nav
{
display: block;
float: left;
margin-left: -230px;
margin-top: 28px;
width: 220px;
border-left: 1px solid #ccc;
padding-left: 9px;
}
nav ul {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
font-size: 100%;
line-height: 17px;
padding:0;
margin:0;
list-style-type:none;
}
nav h2 a, nav h2 a:visited {
color: #A35A00;
text-decoration: none;
}
nav h3 {
margin-top: 12px;
}
nav li {
margin-top: 6px;
}
nav a {
color: #5C5954;
}
nav a:visited {
color: #5C5954;
}
nav a:active {
color: #5C5954;
}
footer {
display: block;
padding: 6px;
margin-top: 12px;
font-style: italic;
font-size: 90%;
}
h1
{
font-size: 200%;
font-weight: bold;
letter-spacing: -0.01em;
margin: 6px 0 9px 0;
}
h2
{
font-size: 170%;
font-weight: bold;
letter-spacing: -0.01em;
margin: 6px 0 3px 0;
}
h3
{
font-size: 150%;
font-weight: bold;
letter-spacing: -0.01em;
margin-top: 16px;
margin: 6px 0 3px 0;
}
h4
{
font-size: 130%;
font-weight: bold;
letter-spacing: -0.01em;
margin-top: 16px;
margin: 18px 0 3px 0;
color: #A35A00;
}
h5, .container-overview .subsection-title
{
font-size: 120%;
font-weight: bold;
letter-spacing: -0.01em;
margin: 8px 0 3px -16px;
}
h6
{
font-size: 100%;
letter-spacing: -0.01em;
margin: 6px 0 3px 0;
font-style: italic;
}
.ancestors { color: #999; }
.ancestors a
{
color: #999 !important;
text-decoration: none;
}
.important
{
font-weight: bold;
color: #950B02;
}
.yes-def {
text-indent: -1000px;
}
.type-signature {
color: #aaa;
}
.name, .signature {
font-family: Consolas, "Lucida Console", Monaco, monospace;
}
.details { margin-top: 14px; border-left: 2px solid #DDD; }
.details dt { width:100px; float:left; padding-left: 10px; padding-top: 6px; }
.details dd { margin-left: 50px; }
.details ul { margin: 0; }
.details ul { list-style-type: none; }
.details li { margin-left: 30px; padding-top: 6px; }
.details pre.prettyprint { margin: 0 }
.details .object-value { padding-top: 0; }
.description {
margin-bottom: 1em;
margin-left: -16px;
margin-top: 1em;
}
.code-caption
{
font-style: italic;
font-family: Palatino, 'Palatino Linotype', serif;
font-size: 107%;
margin: 0;
}
.prettyprint
{
border: 1px solid #ddd;
width: 80%;
overflow: auto;
}
.prettyprint.source {
width: inherit;
}
.prettyprint code
{
font-family: Consolas, 'Lucida Console', Monaco, monospace;
font-size: 100%;
line-height: 18px;
display: block;
padding: 4px 12px;
margin: 0;
background-color: #fff;
color: #000;
}
.prettyprint code span.line
{
display: inline-block;
}
.prettyprint.linenums
{
padding-left: 70px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.prettyprint.linenums ol
{
padding-left: 0;
}
.prettyprint.linenums li
{
border-left: 3px #ddd solid;
}
.prettyprint.linenums li.selected,
.prettyprint.linenums li.selected *
{
background-color: lightyellow;
}
.prettyprint.linenums li *
{
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.params, .props
{
border-spacing: 0;
border: 0;
border-collapse: collapse;
}
.params .name, .props .name, .name code {
color: #A35A00;
font-family: Consolas, 'Lucida Console', Monaco, monospace;
font-size: 100%;
}
.params td, .params th, .props td, .props th
{
border: 1px solid #ddd;
margin: 0px;
text-align: left;
vertical-align: top;
padding: 4px 6px;
display: table-cell;
}
.params thead tr, .props thead tr
{
background-color: #ddd;
font-weight: bold;
}
.params .params thead tr, .props .props thead tr
{
background-color: #fff;
font-weight: bold;
}
.params th, .props th { border-right: 1px solid #aaa; }
.params thead .last, .props thead .last { border-right: 1px solid #ddd; }
.params td.description > p:first-child
{
margin-top: 0;
padding-top: 0;
}
.params td.description > p:last-child
{
margin-bottom: 0;
padding-bottom: 0;
}
.disabled {
color: #454545;
}

111
docs/html/styles/prettify-jsdoc.css
View File

@ -1,111 +0,0 @@
/* JSDoc prettify.js theme */
/* plain text */
.pln {
color: #000000;
font-weight: normal;
font-style: normal;
}
/* string content */
.str {
color: #006400;
font-weight: normal;
font-style: normal;
}
/* a keyword */
.kwd {
color: #000000;
font-weight: bold;
font-style: normal;
}
/* a comment */
.com {
font-weight: normal;
font-style: italic;
}
/* a type name */
.typ {
color: #000000;
font-weight: normal;
font-style: normal;
}
/* a literal value */
.lit {
color: #006400;
font-weight: normal;
font-style: normal;
}
/* punctuation */
.pun {
color: #000000;
font-weight: bold;
font-style: normal;
}
/* lisp open bracket */
.opn {
color: #000000;
font-weight: bold;
font-style: normal;
}
/* lisp close bracket */
.clo {
color: #000000;
font-weight: bold;
font-style: normal;
}
/* a markup tag name */
.tag {
color: #006400;
font-weight: normal;
font-style: normal;
}
/* a markup attribute name */
.atn {
color: #006400;
font-weight: normal;
font-style: normal;
}
/* a markup attribute value */
.atv {
color: #006400;
font-weight: normal;
font-style: normal;
}
/* a declaration */
.dec {
color: #000000;
font-weight: bold;
font-style: normal;
}
/* a variable name */
.var {
color: #000000;
font-weight: normal;
font-style: normal;
}
/* a function name */
.fun {
color: #000000;
font-weight: bold;
font-style: normal;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}

132
docs/html/styles/prettify-tomorrow.css
View File

@ -1,132 +0,0 @@
/* Tomorrow Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
/* plain text */
.pln {
color: #4d4d4c; }
@media screen {
/* string content */
.str {
color: #718c00; }
/* a keyword */
.kwd {
color: #8959a8; }
/* a comment */
.com {
color: #8e908c; }
/* a type name */
.typ {
color: #4271ae; }
/* a literal value */
.lit {
color: #f5871f; }
/* punctuation */
.pun {
color: #4d4d4c; }
/* lisp open bracket */
.opn {
color: #4d4d4c; }
/* lisp close bracket */
.clo {
color: #4d4d4c; }
/* a markup tag name */
.tag {
color: #c82829; }
/* a markup attribute name */
.atn {
color: #f5871f; }
/* a markup attribute value */
.atv {
color: #3e999f; }
/* a declaration */
.dec {
color: #f5871f; }
/* a variable name */
.var {
color: #c82829; }
/* a function name */
.fun {
color: #4271ae; } }
/* Use higher contrast and text-weight for printable form. */
@media print, projection {
.str {
color: #060; }
.kwd {
color: #006;
font-weight: bold; }
.com {
color: #600;
font-style: italic; }
.typ {
color: #404;
font-weight: bold; }
.lit {
color: #044; }
.pun, .opn, .clo {
color: #440; }
.tag {
color: #006;
font-weight: bold; }
.atn {
color: #404; }
.atv {
color: #060; } }
/* Style */
/*
pre.prettyprint {
background: white;
font-family: Menlo, Monaco, Consolas, monospace;
font-size: 12px;
line-height: 1.5;
border: 1px solid #ccc;
padding: 10px; }
*/
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0; }
/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
/* */ }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
/* */ }

3422
editormd.amd.js
View File

File diff suppressed because it is too large

3
editormd.amd.min.js
View File

File diff suppressed because one or more lines are too long

2823
dist/js/editormd.js → editormd.js
View File

File diff suppressed because it is too large

3
editormd.min.js
View File

File diff suppressed because one or more lines are too long

2
examples/127.0.0.1-8888.url
View File

@ -1,2 +0,0 @@
[InternetShortcut]
URL=http://127.0.0.1:8888/

97
examples/@links.html
View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>@links - 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>@links</h1>
<p>Github Flavored Markdown extended syntax</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###@links
[TOC]
~~@mentions~~, #refs @tylerlong `inline code @tylerlong`, [links](), **formatting**, and <del>tags</del> supported @pandao;
list syntax required (any unordered or ordered list supported) @pandao;
this is @pandao a complete item @pandao;
link [@pandao](https://github.com/pandao "@pandao") &#64;
link [&#64;pandao](https://github.com/pandao "&#64;pandao")
this is an incomplete item **@pandao**;
*@pandao* this is an incomplete item ___@pandao___;
# Github: @pandao
## Github: @pandao
### Github: @tylerlong
#### Github: @tylerlong
##### Github: @tylerlong
###### Github: @tylerlong
- dafssdfsdaf@chjj dfsdfsdf
- dafssdfsdaf@chjj dfsdfsdf
- dafssdfsdaf@chjj dfsdfsdf
- dafss@pandao dfsdaf@chjj dfsdfsdf
- dafssd: @pandao fsdaf@chjj dfsdfsdf @codemirror @pandao
+ dafssdfsdaf@chjj dfsdfsdf
+ dafss@pandaodfsdaf@chjj dfsdfsdf
1. @chjj 第一行@pandao fsdaf@chjj dfsdfsdf :fa-save:: @pandao
- dafssdfsdaf@chjj dfsdfsdf
- dafss@pandao dfsdaf@chjj dfsdfsdf
2. @chjj 第二行@pandao fsdaf@chjj dfsdfsdf @codemirror @pandao
3. 第三行@pandao fsdaf@chjj dfsdfsdf :fa-save:: @pandao
&gt; Blockquotes @pandao
&gt; dd@pandao引用文本(Blockquotes @pandao)fdasfad @_pandao fdasfad @xxx454xxx fdasfad @xx_x454xxx454
|@pandao First Header | Second@pandao Header@pandao |
| ------------- | ------------- |
| Content@pandao Cell | @pandao Content Cell @pandao|
| Con@pandao tent Cell@pandao | Content@pan-dao Cell dfsdfsdf @pan_dao |
dsfdf@pandao fasdfsdfsfddffd@pandao
dfasfasdfasdf:bangbang:
This is an H1 @pandao
=============
This @pandao an H2 @pandao
-------------
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
// You can custom @link base url.
editormd.url = {
atLinkBase : "https://github.com/"
};
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
toc : true,
todoList : true,
path : '../lib/',
onload : function() {
}
});
});
</script>
</body>
</html>

508
examples/change-mode.html
View File

@ -0,0 +1,508 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Chnage 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" />
<style>
#codes textarea {display: none;}
</style>
</head>
<body>
<div id="layout">
<header>
<h1>Chnage mode</h1>
<p>Become to the code editor</p>
<p>Modes : <select id="modes">
<option value="">select modes</option>
</select>&nbsp;&nbsp;Themes :
<select id="themes">
<option selected="selected" value="">select themes</option>
</select>
</p>
</header>
<div class="btns">
<button id="get-code-btn">Get code source</button>
<button id="fullscreen-btn">Fullscreen (Press ESC exit)</button>
</div>
<div id="codes">
<textarea id="html-code">&lt;!DOCTYPE html&gt;
&lt;html lang="zh"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;Chnage mode - Editor.md examples&lt;/title&gt;
&lt;link rel="stylesheet" href="css/style.css" /&gt;
&lt;link rel="stylesheet" href="../css/editormd.css" /&gt;
&lt;link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="layout"&gt;
&lt;header&gt;
&lt;h1&gt;Chnage mode&lt;/h1&gt;
&lt;/header&gt;
&lt;div id="test-editormd"&gt;
&lt;textarea style="display:none;"&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="../editormd.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function() {
var testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
watch : false,
toolbar : false,
codeFold : true,
searchReplace : true,
placeholder : "Enjoy coding!",
value : (localStorage.mode) ? $("#"+localStorage.mode.replace("text/", "")+"-code").val() : $("#html-code").val(),
theme : (localStorage.theme) ? localStorage.theme : "default",
mode : (localStorage.mode) ? localStorage.mode : "text/html",
path : '../lib/'
});
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea>
<textarea id="javascript-code">$(function() {
var testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
watch : false,
toolbar : false,
codeFold : true,
searchReplace : true,
placeholder : "Enjoy coding!",
value : (localStorage.mode) ? $("#"+localStorage.mode.replace("text/", "")+"-code").val() : $("#html-code").val(),
theme : (localStorage.theme) ? localStorage.theme : "default",
mode : (localStorage.mode) ? localStorage.mode : "text/html",
path : '../lib/'
});
});</textarea>
<textarea id="xml-code">&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;root&gt;
&lt;photo url="https://pandao.github.io/editor.md/examples/images/7.jpg"&gt;
&lt;title&gt;李健首张专辑《似水流年》封面&lt;/title&gt;
&lt;width&gt;360&lt;/width&gt;
&lt;height&gt;360&lt;/height&gt;
&lt;/photo&gt;
&lt;photo url="https://pandao.github.io/editor.md/examples/images/7.jpg"&gt;
&lt;title&gt;李健首张专辑《似水流年》封面&lt;/title&gt;
&lt;width&gt;360&lt;/width&gt;
&lt;height&gt;360&lt;/height&gt;
&lt;/photo&gt;
&lt;photo url="https://pandao.github.io/editor.md/examples/images/7.jpg"&gt;
&lt;title&gt;李健首张专辑《似水流年》封面&lt;/title&gt;
&lt;width&gt;360&lt;/width&gt;
&lt;height&gt;360&lt;/height&gt;
&lt;/photo&gt;
&lt;/root&gt;</textarea>
<textarea id="ruby-code">#!/usr/bin/ruby
puts "Hello World!";
# Ruby knows what you
# mean, even if you
# want to do math on
# an entire Array
cities = %w[ London
Oslo
Paris
Amsterdam
Berlin ]
visited = %w[Berlin Oslo]
puts "I still need " +
"to visit the " +
"following cities:",
cities - visited</textarea>
<textarea id="json-code">{
"employees": [
{
"firstName" : "Bill",
"lastName" : "Gates"
},
{
"firstName" : "George",
"lastName" : "Bush"
},
{
"firstName" : "Thomas",
"lastName" : "Carter"
}
],
"employees": [
{
"firstName" : "Bill",
"lastName" : "Gates"
},
{
"firstName" : "George",
"lastName" : "Bush"
},
{
"firstName" : "Thomas",
"lastName" : "Carter"
}
],
}</textarea>
<textarea id="php-code">&lt;?php
$app = new Phalcon\Mvc\Micro();
//Set a route with the name "show-post"
$app->get('/blog/{year}/{title}', function ($year, $title) use ($app) {
//.. show the post here
return $year.$title;
})->setName('show-post');
$app->get('/', function () {
echo "<h1>Welcome !</h1>";
echo $app->url->get(array(
'for' => 'show-post',
'title' => 'php-is-a-great-framework',
'year' => 2012
));
});
$app->get('/posts/{year:[0-9]+}/{title:[a-zA-Z\-]+}', function ($year, $title) {
echo "<h1>Title: $title</h1>";
echo "<h2>Year: $year</h2>";
});
//Requiring another file
$app->get('/show/results', function () {
require 'views/results.php';
});
//Returning a JSON
$app->get('/get/some-json', function () {
echo json_encode(array("some", "important", "data"));
});
//This route makes a redirection to another route
$app->post('/old/welcome', function () use ($app) {
$app->response->redirect("new/welcome");
});
$app->post('/new/welcome', function () use ($app) {
echo 'This is the new Welcome';
});
/*
//Matches if the HTTP method is POST
$app->post('/api/products/add', "add_product");
//Matches if the HTTP method is PUT
$app->put('/api/products/update/{id}', "update_product");
//Matches if the HTTP method is DELETE
$app->put('/api/products/remove/{id}', "delete_product");
//Matches if the HTTP method is GET or POST
$app->map('/repos/store/refs')->via(array('GET', 'POST'));
*/
$app->handle();
?&gt;</textarea>
<textarea id="cpp-code">#include "dialog.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Dialog w;
w.show();
return a.exec();
}</textarea>
<textarea id="java-code">package com.demo.blog;
import com.jfinal.aop.Before;
import com.jfinal.core.Controller;
@Before(BlogInterceptor.class)
public class BlogController extends Controller {
public void index() {
setAttr("blogPage", Blog.me.paginate(getParaToInt(0, 1), 10));
render("blog.html");
}
public void add() {
}
@Before(BlogValidator.class)
public void save() {
getModel(Blog.class).save();
redirect("/blog");
}
public void edit() {
setAttr("blog", Blog.me.findById(getParaToInt()));
}
@Before(BlogValidator.class)
public void update() {
getModel(Blog.class).update();
redirect("/blog");
}
public void delete() {
Blog.me.deleteById(getParaToInt());
redirect("/blog");
}
}
</textarea>
<textarea id="actionscript-code">package com.flite
{
import flash.net.*;
import flash.events.*;
import flash.display.*;
/**
* @package com.flite
* @class XMLLoader
* @author pandao pandao@vip.qq.com
*/
public class XMLLoder
{
public var xml:XML;
public var url:String;
public var list:XMLList;
public var percent:Number = 0;
public var onload:Function;
public var onerror:Function;
public var onpreload:Function;
public var onprogress:Function;
private var loader:URLLoader;
public function XMLLoder(url:String) : void
{
this.url = url;
xml = new XML();
xml.ignoreWhite = true;
loader = new URLLoader();
loader.load(new URLRequest(url));
loader.addEventListener(Event.OPEN, preloadHandler);
loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
loader.addEventListener(Event.COMPLETE, loadedHandler);
}
private function preloadHandler(event:Event) : void
{
onpreload = onpreload || new Function;
onpreload(event);
}
private function errorHandler(event:IOErrorEvent) : void
{
onerror = onerror || new Function;
onerror(event);
}
private function progressHandler(event:ProgressEvent) : void
{
percent = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
onprogress = onprogress || new Function;
onprogress(event, percent);
}
private function loadedHandler(event:Event) : void
{
xml = XML(loader.data);
onload = onload || new Function;
onload(xml);
}
}
}</textarea><textarea id="perl-code">#!/usr/bin/perl
use strict;
use warnings;
print "Hello, World...\n";
</textarea>
<textarea id="go-code">package main
import (
"github.com/astaxie/beego"
)
type MainController struct {
beego.Controller
}
func (this *MainController) Get() {
this.Ctx.WriteString("hello world")
}
func main() {
beego.Router("/", &MainController{})
beego.Run()
}</textarea><textarea id="python-code">#!/usr/bin/env python
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
if __name__ == '__main__':
app.run()</textarea>
<textarea id="css-code"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,
th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;padding:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
audio, canvas, video {
display: inline-block;
}
body, button, input, select, textarea {
font:12px/1.5 Tahoma, "Hiragino Sans GB", "Microsoft Yahei", Arial;
}
body {
font-size:12px;
color:#666;
background:#fff url(../images/) no-repeat left top;
}
a {
color:#444;
text-decoration: none;
}
a:hover {
color:#065BC2;
text-decoration: none;
}
.clear {
zoom:1;
}
.clear:after {
content:"";
height:0;
visibility:hidden;
clear:both;
display:block;
}
img {
border:none;
vertical-align: middle;
}
ul {
list-style: none;
}</textarea></div>
<div id="test-editormd">
<textarea style="display:none;"></textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
function getCodeValue() {
return (localStorage.modeName) ? $("#"+localStorage.modeName.replace("text/", "").replace("c/c++", "cpp")+"-code").val() : $("#html-code").val();
}
$(function() {
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
watch : false,
toolbar : false,
codeFold : true,
searchReplace : true,
placeholder : "Enjoy coding!",
value : getCodeValue(),
theme : (localStorage.theme) ? localStorage.theme : "default",
mode : (localStorage.mode) ? localStorage.mode : "text/html",
path : '../lib/'
});
$("#get-code-btn").bind("click", function() {
alert(testEditor.getValue());
});
$("#fullscreen-btn").bind("click", function() {
testEditor.fullscreen();
});
var select = $("#themes");
for (var i = 0, len = editormd.themes.length; i < len; i ++)
{
var theme = editormd.themes[i];
var selected = (localStorage.theme == theme) ? " selected=\"selected\"" : "";
select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
}
select.change(function(){
var theme = $(this).val();
if (theme == "")
{
alert("theme == \"\"");
return false;
}
localStorage.theme = theme;
testEditor.setTheme(theme);
});
var modesSelect = $("#modes");
var modeNames = ["text/html", "javascript", "php", "text/xml", "text/json", "java", "actionscript", "perl", "go", "python", "c/c++", "css", "ruby"];
var modes = ["text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"];
for (var i = 0, len = modes.length; i < len; i ++)
{
var mode = modes[i];
var selected = (localStorage.modeName == modeNames[i]) ? " selected=\"selected\"" : "";
modesSelect.append("<option value=\"" + mode + "\"" + selected + " name=\"" + modeNames[i] + "\"" + selected + ">" + modeNames[i] + "</option>");
}
modesSelect.change(function(){
var mode = $(this).val();
var modeName = $(this).find("option:selected").attr("name");
if (mode == "")
{
alert("mode == \"\"");
return false;
}
localStorage.mode = mode;
localStorage.modeName = modeName;
var code = getCodeValue();
testEditor.setCodeMirrorOption("mode", mode);
//testEditor.setCodeMirrorOption("value", code);
testEditor.setValue(code);
});
});
</script>
</body>
</html>

44
examples/code-fold.html
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Code fold - 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>Code fold</h1>
<p>Switch code fold : Press Ctrl + Q / Command + Q</p>
</header>
<div id="test-editormd">
<textarea style="display:none;"></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 : 720,
markdown : "#### Setting\r\n\r\n {\n codeFold : true\n }\r\n\r\n" + md,
codeFold : true,
htmlDecode : true,
tex : true,
taskList : true,
emoji : true,
flowChart : true,
sequenceDiagram : true,
path : '../lib/'
});
});
});
</script>
</body>
</html>

88
examples/custom-keyboard-shortcuts.html
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Custom keyboard shortcuts - 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>Custom keyboard shortcuts</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;">####Example
```javascript
var testEditor = editormd("test-editormd", {
width: "90%",
height: 720,
path : '../lib/',
onload : function() {
var keyMap = {
"Ctrl-S": function(cm) {
alert("Ctrl+S");
},
"Ctrl-A": function(cm) { // default Ctrl-A selectAll
// custom
alert("Ctrl+A");
cm.execCommand("selectAll");
}
};
// setting signle key
var keyMap2 = {
"Ctrl-T": function(cm) {
alert("Ctrl+T");
}
};
this.addKeyMap(keyMap);
this.addKeyMap(keyMap2);
this.removeKeyMap(keyMap2); // remove signle key
}
});
```
</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/',
onload : function() {
var keyMap = {
"Ctrl-S": function(cm) {
alert("Ctrl+S");
},
"Ctrl-A": function(cm) { // default Ctrl-A selectAll
// custom
alert("Ctrl+A");
cm.execCommand("selectAll");
}
};
// setting signle key
var keyMap2 = {
"Ctrl-T": function(cm) {
alert("Ctrl+T");
}
};
this.addKeyMap(keyMap);
this.addKeyMap(keyMap2);
this.removeKeyMap(keyMap2); // remove signle key
}
});
});
</script>
</body>
</html>

52
examples/custom-toolbar.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>自定义工具栏 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -13,15 +14,16 @@
<p>Custom toolbar (icons handler)</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###自定义工具栏
<textarea style="display:none;">### Custom toolbar
```javascript
$(function() {
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
toolbarIcons : function() {
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2"]
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon"]
},
toolbarIconsClass : {
testIcon : "fa-gears" // 指定一个FontAawsome的图标类
@ -30,6 +32,12 @@ $(function() {
testIcon2 : "测试按钮" // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
},
// 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
toolbarCustomIcons : {
file : "&lt;input type="file" accept=".md" /&gt;",
faicon : "&lt;i class="fa fa-star" onclick="alert('faicon');"&gt;&lt;/i&gt;"
},
// 自定义工具栏按钮的事件处理
toolbarHandlers : {
/**
@ -63,10 +71,19 @@ $(function() {
lang : {
toolbar : {
file : "上传文件",
testIcon : "自定义按钮testIcon", // 自定义按钮的提示文本，即title属性
testIcon2 : "自定义按钮testIcon2",
undo : "撤销 (Ctrl+Z)"
}
},
onload : function(){
$("[type=\"file\"]").bind("change", function(){
alert($(this).val());
testEditor.cm.replaceSelection($(this).val());
console.log($(this).val(), testEditor);
});
}
});
});
@ -76,25 +93,33 @@ $(function() {
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<!-- 多语言和自定义工具栏的整合测试 -->
<script src="../src/js/languages/en.js"></script>
<script src="../languages/en.js"></script>
<script type="text/javascript">
$(function() {
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
toolbarIcons : function() {
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2"]
// Or return editormd.toolbarModes[name]; // full, simple, mini
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon"]
},
// toolbarIcons : "full", // You can also use editormd.toolbarModes[name] default list, values: full, simple, mini.
toolbarIconsClass : {
testIcon : "fa-gears" // 指定一个FontAawsome的图标类
},
toolbarIconTexts : {
testIcon2 : "测试按钮" // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
testIcon2 : "测试按钮Test button" // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
},
// 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
toolbarCustomIcons : {
file : "<input type=\"file\" accept=\".md\" />",
faicon : "<i class=\"fa fa-star\" onclick=\"alert('faicon');\"></i>"
},
// 自定义工具栏按钮的事件处理
toolbarHandlers : {
/**
@ -128,10 +153,19 @@ $(function() {
lang : {
toolbar : {
file : "上传文件",
testIcon : "自定义按钮testIcon", // 自定义按钮的提示文本，即title属性
testIcon2 : "自定义按钮testIcon2",
undo : "撤销 (Ctrl+Z)"
}
},
onload : function(){
$("[type=\"file\"]").bind("change", function(){
alert($(this).val());
testEditor.cm.replaceSelection($(this).val());
console.log($(this).val(), testEditor);
});
}
});
});

153
examples/define-plugin.html
View File

@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Define extention plugins for Editor.md - 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>Define extention plugins for Editor.md</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;">[TOC]
###Define plugin
####Plugin directory
editor.md/
plugins/
plugin-name/
....
####Example
```javascript
(function() {
var factory = function (exports) {
var $ = jQuery; // if using module loader(Require.js/Sea.js).
exports.customMethod = function() {
//....
};
exports.fn.youPluginName = function() {
/*
var _this = this; // this == the current instance object of Editor.md
var lang = this.lang;
var settings = this.settings;
var editor = this.editor;
var cursor = cm.getCursor();
var selection = cm.getSelection();
cm.focus();
*/
//....
};
};
// 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);
}
})();
```
####Usage plugin
The first method:
```html
&lt;script src="../plugins/you-plugin-name/you-plugin-name.js"&gt;&lt;/script&gt;
&lt;script&gt;
editormd.customMethod();
var testEditor = editormd("test-editormd", {
path : '../lib/',
onload : function() {
this.youPluginName();
this.pluginA();
this.executePlugin("somePluginName", "you-plugin-name/you-plugin-name"); // load and execute plugin
}
});
// or
$("#btn").click(function(){
testEditor.youPluginName();
});
&lt;/script&gt;
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
editormd.fn.customMethod = function() {
console.log("customMethod", this);
};
editormd.fn.pluginA = function() {
console.log("pluginA", this);
};
$(function() {
editormd.methodOne = function(){
console.log("editormd.methodOne");
};
editormd.loadPlugin("../plugins/test-plugin/test-plugin", function(){
editormd.testPlugin();
});
editormd.loadPlugin("../plugins/image-dialog/image-dialog", function(){
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : '../lib/',
onload : function() {
this.customMethod();
testEditor.imageDialog();
this.executePlugin("htmlEntitiesDialog", "html-entities-dialog/html-entities-dialog"); // load and execute plugin
this.pluginA();
}
}); // execute plugin
});
editormd.methodOne();
});
</script>
</body>
</html>

9
examples/dynamic-create-editormd.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>动态创建Editor.md - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -25,13 +26,13 @@
$(function() {
$("#create-btn").click(function(){
$.getScript("../src/js/editormd.js", function() {
$.getScript("../editormd.js", function() {
$("#layout").append("<div id=\"test-editormd\"></div>");
testEditormd = editormd("test-editormd", {
width: "90%",
height: 240,
markdown : "###动态创建Editor.md\n\nDynamic create Editor.md",
height: 640,
markdown : "### 动态创建Editor.md\n\nDynamic create Editor.md",
path : '../lib/'
});
});

225
examples/emoji.html
View File

@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Emoji - 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" />
<style>
</style>
</head>
<body>
<div id="layout">
<header>
<h1>Emoji表情</h1>
<p>Supports:</p>
<ul style="margin: 10px 0 0 18px;">
<li>Github emoji : <a href="http://www.emoji-cheat-sheet.com/" target="_blank">http://www.emoji-cheat-sheet.com/</a></li>
<li>Twitter Emoji(Twemoji) : <a href="http://twitter.github.io/twemoji/preview.html" target="_blank">http://twitter.github.io/twemoji/preview.html</a></li>
<li>FontAwesome icon font emoji : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">http://fortawesome.github.io/Font-Awesome/icons/</a></li>
<li>Editor.md logo icon font emoji</li>
</ul>
</header>
<!--<div class="editormd-form">
<label>单元格数</label>
行数 <input type="number" value="3" max="100" min="2" />&nbsp;&nbsp;
列数 <input type="number" value="2" max="100" min="1" />
<br/>
<label>对齐方式</label>
<div class="fa-btns">
<a href="javascript:;" title="默认">
<label>
<input type="radio" name="table-align" value="" checked />
<i class="fa fa-align-justify"></i>
</label>
</a>
<a href="javascript:;" title="左对齐">
<label>
<input type="radio" name="table-align" value="left" />
<i class="fa fa-align-left"></i>
</label>
</a>
<a href="javascript:;" title="居中对齐">
<label>
<input type="radio" name="table-align" value="center" />
<i class="fa fa-align-center"></i>
</label>
</a>
<a href="javascript:;" title="右对齐">
<label>
<input type="radio" name="table-align" value="right" />
<i class="fa fa-align-right"></i>
</label>
</a>
</div>-->
<!--<select style="padding: 5px 8px;">
<option selected="selected" value="">默认</option>
<option value="left">左对齐</option>
<option value="center">居中对齐</option>
<option value="right">右对齐</option>
</select>-->
<br/>
</div>
<div id="test-editormd">
<textarea style="display:none;">###Emoji表情 :smiley:
[TOC]
###Emoji
Emoji cheat sheet for Campfire and GitHub.
[http://www.emoji-cheat-sheet.com/](http://www.emoji-cheat-sheet.com/)
**Usage:**
:emoji-name:
**Examples:**
:heart: :smiley:
###Twitter Emoji (Twemoji)
**Usage:**
:tw-xxxx:
**Examples:**
:tw-1f504: :tw-30-20e3: :tw-31-20e3: :tw-32-20e3: :tw-33-20e3: :tw-34-20e3: :tw-35-20e3: :tw-36-20e3: :tw-37-20e3: :tw-38-20e3: :tw-39-20e3: :tw-1f51f:
[http://twitter.github.io/twemoji/preview.html](http://twitter.github.io/twemoji/preview.html)
###Fortawesome icons
[http://fortawesome.github.io/Font-Awesome/icons/](http://fortawesome.github.io/Font-Awesome/icons/)
**Usage:**
:fa-xxxx:
**Examples:**
:fa-wifi: :fa-twitter: :fa-google-plus: :fa-git-square: :fa-github-alt:
###Editor.md logos
**Usage:**
:editormd-logo:
:editormd-logo-1x:
...
:editormd-logo-8x:
**Examples:**
: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:
###Mixed tests
&gt; Blockquotes :star:
@pandao dasfsadfasdf:fa-edit: :warning: :smiley:dsafsdfsad\:fdsfdf\:f dfdf: :fa-save::fa-star: :fa-truck:
**fdfasd:smiley:dsfsdfsfd** ~~fsdfds:smiley:dfsdfsdf :fa-info:~~ @pandao
:fa-weixin: :fa-qq: :fa-weibo: :fa-tencent-weibo: :fa-github: :fa-git:
*dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf*
___Emphasis :fa-gear: Italic:smiley:___ __Emphasis:smiley:__
# H1 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star:
## H2 dsfd:fa-star:fsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-star:
### H3 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf @pandao
#### H4 dsfdfsfd@pandao :smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
##### H5 dsfdfsfd:smiley:dsfsfd @pandao sfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-save:dsfsdf
###### H6 dsfdfsfd:smiley:dsfsfdsfd:smiley:dsfdf:fa-edit: fdsfsdf:fa-star:dsfsdf
[:smiley:](http://www.emoji-cheat-sheet.com/ "link + emoji") link + emoji
- dafs@pandao sdfsdaf:smiley:dfsdfsdf
- dafssdfsdaf:smiley:dfsdfsdf @pandao
- dafssdfsdaf:smiley:dfsdfsdf
- dafss:fa-truck:dfsdaf:smiley:dfsd @pandao fsdf
- dafssd: :fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
+ dafssdfsdaf:smiley:dfsdfsdf @pandao
+ dafs@pandao s:fa-truck:dfsdaf:smiley:dfsdfsdf
1. :smiley:第一行:fa-truck:fsdaf:smiley:dfs@pandao dfsdf :fa-save:: :fa-truck:
- dafssdfsdaf:smiley:dfsdfsdf @pandao
- dafss:fa-truck:dfsdaf:smiley:dfsdfsdf
2. :smiley:第二行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-star:: :fa-truck:
3. 第三行:fa-truck:fsdaf:smiley:dfsdfsdf :fa-save:: :fa-truck:
&gt; Blockquotes @pandao
&gt; dd:smiley:引用文本(Blockquotes:smiley:)fdasfad :fa-star:: dfd :fa-truck: @pandao
###Table
|:100: First Header | Second:smiley: Header:smiley: |
| ------------- | ------------- |
| Content:fa-truck: Cell | :smiley:Content Cell :smiley: |
| Con:fa-truck:tent Cell:bangbang: | Content Cell dfsdfsdf :fa-star: :dfdf :fa-truck: |
###Editor.md logo emoji
:fa-heart:fasdfsdfsfddffd:editormd-logo: :editormd-logo: :editormd-logo-4x:
dfasfasdfasdf:bangbang:
This is an H1 :editormd-logo-4x: @pandao
=============
@pandao This :fa-save:: :fa-truck:is an H2 :100:
-------------
###GFM task lists :editormd-logo-5x:
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
- [x] [ ] :smiley: this is a complete item :smiley:;
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao;
- [ ] [ ]this is an incomplete item;
- [ ] :smiley: this is an incomplete item [test link](#);
- [ ] :smiley: this is an incomplete item [test link](#);
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
// You can custom Emoji's graphics files url path
editormd.emoji = {
path : "http://www.emoji-cheat-sheet.com/graphics/emojis/",
ext : ".png"
};
// Twitter Emoji (Twemoji) graphics files url path
editormd.twemoji = {
path : "http://twemoji.maxcdn.com/72x72/",
ext : ".png"
};
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
toc : true,
emoji : true, // Support Github emoji, Twitter Emoji(Twemoji), fontAwesome, Editor.md logo emojis.
taskList : true,
path : '../lib/'
});
});
</script>
</body>
</html>

153
examples/extends.html
View File

@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Expanded Editor.md - 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>Expanded Editor.md</h1>
<p>Expanded of member methods and properties</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###Expanded Editor.md
```javascript
var testEditor;
function EditormdExtend() {
this.extends("methodC", function() {
console.log("methodC");
});
// or
testEditor.extends("methodA", function() {
console.log("methodA");
});
// one by one setting
this.set("propertyA", "propertyA");
this.set("methodE", function(){
console.log("mothodE", this);
});
// mutil
this.extends({
propertyA : "propertyAAAA", // override, you can override other default method.
propertyB : "propertyB",
methodD : function() {
console.log("methodD");
}
});
this.methodB = function() {
console.log("methodB");
};
testEditor.methodA();
testEditor.methodB();
this.methodC();
this.methodE();
editormd.methodOne();
console.log(this, this.propertyA);
}
editormd.fn.customMethod = function(){
console.log("customMethod", this);
};
$(function() {
editormd.methodOne = function(){
console.log("editormd.methodOne");
};
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : '../lib/',
onload : function() {
this.customMethod();
$.proxy(EditormdExtend, this)();
}
});
editormd.methodOne();
});
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
function EditormdExtend() {
this.extends("methodC", function() {
console.log("methodC");
});
// or
testEditor.extends("methodA", function() {
console.log("methodA");
});
// one by one setting
this.set("propertyA", "propertyA");
this.set("methodE", function(){
console.log("mothodE", this);
});
// mutil
this.extends({
propertyA : "propertyAAAA", // override, you can override other default method.
propertyB : "propertyB",
methodD : function() {
console.log("methodD");
}
});
this.methodB = function() {
console.log("methodB");
};
testEditor.methodA();
testEditor.methodB();
this.methodC();
this.methodE();
editormd.methodOne();
console.log(this, this.propertyA);
}
editormd.fn.customMethod = function(){
console.log("customMethod", this);
};
$(function() {
editormd.methodOne = function(){
console.log("editormd.methodOne");
};
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : '../lib/',
onload : function() {
this.customMethod();
$.proxy(EditormdExtend, this)();
}
});
editormd.methodOne();
});
</script>
</body>
</html>

119
examples/external-use.html
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>External use - 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>External use</h1>
<p>External use of toolbar handlers / modal dialog</p>
</header>
<div class="btns">
<button id="undo">Undo</button>
<button id="open-link-dialog">Open link dialog</button>
<button id="insert-bold">Insert Bold</button>
<button id="insert-h6">Insert Heading 6</button>
<button id="insert-inline-code">Insert Inline code</button>
<button id="open-image-dialog">Open image dialog</button>
<button id="open-help-dialog">Open help dialog</button>
<button id="open-html-entities-dialog">Open html entities dialog</button>
</div>
<div id="test-editormd">
<textarea style="display:none;">[TOC]
###External use of toolbar handlers / modal dialog
```javascript
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : '../lib/'
});
// the first method
$("#undo").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.undo, testEditor)();
});
// the Second method : using manually loaded dialog plugin
// &lt;script src="../plugins/html-entities/html-entities.js"&gt;&lt;/script&gt;
$("#open-html-entities-dialog").bind('click', function() {
testEditor.htmlEntities();
});
// using toolbar dialog plugin
$("#open-link-dialog").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.link, testEditor)();
});
// or
$("#open-image-dialog").bind('click', function(){
// load and execute plugin
testEditor.executePlugin("imageDialog", "../plugins/image-dialog/image-dialog");
});
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<!-- manually load dialog plugin -->
<script src="../plugins/html-entities-dialog/html-entities-dialog.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : '../lib/'
});
// the first method
$("#undo").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.undo, testEditor)();
});
// the Second method : using manually loaded dialog plugin
$("#open-html-entities-dialog").bind('click', function() {
testEditor.htmlEntitiesDialog();
});
$("#insert-bold").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.bold, testEditor)();
testEditor.focus();
});
$("#insert-h6").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.h6, testEditor)();
testEditor.focus();
});
$("#insert-inline-code").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.code, testEditor)();
testEditor.focus();
});
$("#open-help-dialog").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.help, testEditor)();
});
// using toolbar dialog plugin
$("#open-link-dialog").bind('click', function() {
$.proxy(testEditor.toolbarHandlers.link, testEditor)();
});
// or
$("#open-image-dialog").bind('click', function(){
testEditor.executePlugin("imageDialog", "../plugins/image-dialog/image-dialog"); // load and execute plugin
});
});
</script>
</body>
</html>

21
examples/flowchart.html
View File

@ -4,30 +4,31 @@
<meta charset="utf-8" />
<title>FlowChart - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>FlowChart 流程图</h1>
<p>基于flowchart.js：<a href="http://adrai.github.io/flowchart.js/" target="_blank">http://adrai.github.io/flowchart.js/</a></p>
<p>Based on flowchart.js：<a href="http://adrai.github.io/flowchart.js/" target="_blank">http://adrai.github.io/flowchart.js/</a></p>
</header>
<div id="test-editormd">
<textarea style="display:none;">####开启FlowChart 流程图支持
<textarea style="display:none;">#### Using FlowChart
配置项：
setting:
{
flowChart : true
}
####示例
#### Example
```flow
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台
st=>start: User login
op=>operation: Operation
cond=>condition: Successful Yes or No?
e=>end: Into admin
st->op->cond
cond(yes)->e
@ -37,7 +38,7 @@ cond(no)->op
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

5
examples/form-get-value.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>Form get textarea value - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -66,7 +67,7 @@ testEditor.getPreviewedHTML(); // 获取预览窗口里的HTML，在开启watch
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

84
examples/full.html
View File

@ -2,32 +2,38 @@
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>完整示例 - Editor.md examples</title>
<title>完整示例 Full example - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>完整示例</h1>
<p>开启HTML标签识别和解析、TeX(基于KaTeX)、流程图和时序/序列图支持;</p>
<p>Full example</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>
</ul>
</header>
<div class="btns">
<button id="show-btn">显示编辑器</button>
<button id="hide-btn">隐藏编辑器</button>
<button id="get-md-btn">获取Markdown(源码)</button>
<button id="get-html-btn">获取HTML(源码)</button>
<button id="watch-btn">开启实时预览</button>
<button id="unwatch-btn">关闭实时预览</button>
<button id="preview-btn">预览HTML(按ESC取消)</button>
<button id="fullscreen-btn">全屏(按ESC取消)</button>
<button id="show-toolbar-btn">显示工具栏</button>
<button id="close-toolbar-btn">关闭工具栏</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="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<button id="show-toolbar-btn">Show toolbar</button>
<button id="close-toolbar-btn">Hide toolbar</button>
</div>
<div id="test-editormd"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
@ -39,11 +45,15 @@
height: 740,
path : '../lib/',
markdown : md,
codeFold : true,
saveHTMLToTextarea : true, // 保存HTML到Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览HTML的代码块高亮，默认开启
emoji : true,
taskList : true,
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
@ -109,52 +119,6 @@
testEditor.hideToolbar();
});
});
/*
// IE不支持
editormd.printAreaCount = 0;
editormd.printArea = function($obj) {
var prefix = "editormd-print-area-iframe";
var iframeId = prefix + editormd.printAreaCount;
if (editormd.printAreaCount > 0)
{
document.body.removeChild(document.getElementById(iframeId));
}
editormd.printAreaCount++;
var iframe = document.createElement("iframe");
iframe.id = prefix + editormd.printAreaCount;
iframe.style.cssText = "position:absolute;width:0px;height:0px;top:-999px;left:-999px;";
document.body.appendChild(iframe);
var iframeDocument = iframe.contentWindow.document;
var links = document.getElementsByTagName("link");
for (var i = 0, len = links.length; i < len; i++)
{
var rel = links[i].getAttribute("rel").toLowerCase();
if (rel === "stylesheet")
{
var css = "<link type=\"text/css\" rel=\"stylesheet\" href=\"" + links[i].getAttribute("href") + "\" >";
iframeDocument.write(css);
}
}
iframeDocument.write("<div class=\"" + $obj.className + "\">" + $obj.innerHTML + "</div>");
iframeDocument.close();
var iframeWindow = iframe.contentWindow;
iframeWindow.close();
iframeWindow.focus();
iframeWindow.print();
};
function preview() {
editormd.printArea(testEditor.previewContainer[0]);
}*/
</script>
</body>
</html>

46
examples/html-preview-markdown-to-html.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>HTML Preview(markdown to html) - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.preview.css" />
<link rel="stylesheet" href="../css/editormd.preview.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<style>
.editormd-html-preview {
width: 90%;
@ -15,13 +16,41 @@
<body>
<div id="layout">
<header>
<h1>非编辑情况下的HTML预览</h1>
<h1>Markdown转HTML的显示处理</h1>
<p>即：非编辑情况下的HTML预览</p>
<p>HTML Preview(markdown to html)</p>
</header>
<div id="test-editormd-view">
<textarea style="display:none;">###Hello world!</textarea>
</div>
</div>
<textarea id="append-test" style="display:none;">
#####上标和下标
上标：X&lt;sup&gt;2&lt;/sup&gt;
下标：O&lt;sub&gt;2&lt;/sub&gt;
#####Style
&lt;style&gt;
body{background:red;}
&lt;/style&gt;
&lt;style type="text/style"&gt;
body{background:red;}
&lt;/style&gt;
#####Script
&lt;script&gt;
alert("script");
&lt;/script&gt;
&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;</textarea>
<!-- <script src="js/zepto.min.js"></script>
<script>
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以想支持flowChart/sequenceDiagram就得加上这一句
@ -36,15 +65,20 @@
<script src="../lib/flowchart.min.js"></script>
<script src="../lib/jquery.flowchart.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditormdView;
$(function() {
$.get("test.md", function(markdown) {
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
markdown : markdown, // 不设置时，从<script type="text/markdown">获取markdown文档
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
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, // 默认不解析
sequenceDiagram : true, // 默认不解析

48
examples/html-tags-decode.html
View File

@ -4,14 +4,20 @@
<meta charset="utf-8" />
<title>识别和解析HTML标签 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>识别和解析HTML标签</h1>
<p>注：虽然此功能能极大地扩展Markdown语法，但也面临着安全上的风险，所以默认是不开启的。</p>
<p>HTML tags (filter) decode, You can increase safety by filtering the danger label.</p>
<p>注：虽然此功能能极大地扩展Markdown语法，但也面临着安全上的风险，所以默认是不开启的。</p>
<p>Update: 可以通过设置`settings.htmlDecode = "style,script,iframe"`来实现过滤指定标签的解析，提高安全性；</p>
</header>
<div class="btns">
<button id="filter-btn">Filter style,script,iframe tags decode</button>
</div>
<div id="test-editormd">
<textarea style="display:none;">####开启识别和解析HTML标签
@ -19,6 +25,7 @@
{
htmlDecode : true
//htmlDecode : "style,script,iframe,sub,sup" // filter html tags
}
####示例
@ -29,6 +36,26 @@
下标：O&lt;sub&gt;2&lt;/sub&gt;
#####Style
&lt;style&gt;
body{background:red;}
&lt;/style&gt;
&lt;style type="text/style"&gt;
body{background:red;}
&lt;/style&gt;
#####Script
&lt;script&gt;
alert("script");
&lt;/script&gt;
&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;
#####插入Flash
&lt;embed src="http://player.youku.com/player.php/sid/XMzA0MzIwMDgw/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"&gt;&lt;/embed&gt;
@ -42,14 +69,25 @@
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
var testEditor = editormd("test-editormd", {
testEditor = editormd("test-editormd", {
width: "90%",
height: 720,
path : '../lib/',
htmlDecode : true
htmlDecode : true,
//htmlDecode : "style,script,iframe,sub,sup",
onload : function(){
//$(".markdown-body style").remove();
//$(".markdown-body script").remove();
}
});
$("#filter-btn").click(function(){
testEditor.config("htmlDecode", "style,script,iframe");
});
});
</script>

5
examples/image-cross-domain-upload.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>图片跨域上传示例 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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" style="height: 2000px;background: #f6f6f6;">
@ -64,7 +65,7 @@ exit;
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

39
examples/image-upload.html
View File

@ -4,22 +4,53 @@
<meta charset="utf-8" />
<title>图片上传示例 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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" style="height: 2000px;background: #f6f6f6;">
<header>
<h1>图片上传示例</h1>
<p>Image upload example</p>
</header>
<div id="test-editormd"></div>
<div id="test-editormd">
<textarea style="display:none;">####配置 Settings
```javascript
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 540,
markdown : "",
path : '../lib/',
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
imageUpload : false,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
/*
上传的后台只需要返回一个JSON数据，结构如下：
{
success : 0 | 1, // 0表示上传失败，1表示上传成功
message : "提示的信息，上传成功或上传失败及错误信息等。"
}
*/
});
});
```</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 540,
height: 640,
markdown : "",
path : '../lib/',
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true

BIN
examples/images/1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
examples/images/10.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
examples/images/2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 KiB

BIN
examples/images/3.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
examples/images/5.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
examples/images/6.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 KiB

BIN
examples/images/7.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 93 KiB

BIN
examples/images/9.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
examples/images/X7t2gyC.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 102 KiB

57
examples/index.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>
#header {
width: 100%;
@ -117,9 +118,42 @@
<li>
<a href="./readonly.html">只读模式 <span>Editor.md read only</span></a>
</li>
<li>
<a href="./themes.html">自定义编辑器样式主题 <span>Setting/change editor style theme</span></a>
</li>
<li>
<a href="./search-replace.html">搜索替换功能 <span>Search / Replace</span></a>
</li>
<li>
<a href="./code-fold.html">代码折叠功能 <span>Code fold</span></a>
</li>
<li>
<a href="./custom-keyboard-shortcuts.html">自定义键盘快捷键 <span>Custom keyboard shortcuts</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>
<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="./on-off.html">事件注册和解除方法 <span>On / Off (bind/unbind) event handle</span></a>
</li>
<li>
<a href="./onload.html">加载完成事件处理 <span>Onload event handle example</span></a>
</li>
@ -129,6 +163,27 @@
<li>
<a href="./onfullscreen.html">全屏事件处理 <span>Onfullscreen / onfullscreenExit event handle example</span></a>
</li>
<li>
<a href="./onresize.html">Onresize<span>onresize event handle</span></a>
</li>
<li>
<a href="./onpreviewing-onpreviewed.html">Onpreviewing / Onpreviewed<span>Onpreviewing / Onpreviewed event handle</span></a>
</li>
<li>
<a href="./onwatch-onunwatch.html">Onwatch / Onunwatch<span>Onwatch / Onunwatch event handle</span></a>
</li>
<li>
<a href="./onscroll-onpreviewscroll.html">Onscroll / Onpreviewscroll<span>Onscroll / Onpreviewscroll event handle</span></a>
</li>
<li>
<a href="./task-lists.html">Github Flavored Markdown任务列表 <span>Github Flavored Markdown (GFM) Task Lists</span></a>
</li>
<li>
<a href="./@links.html">@链接 <span>@links</span></a>
</li>
<li>
<a href="./emoji.html">Emoji表情 <span>Emoji</span></a>
</li>
<li>
<a href="./katex.html">科学公式 TeX <span>Based on KaTeX</span> </a>
</li>

47
examples/katex.html
View File

@ -2,52 +2,73 @@
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Tex科学公式语言 - Editor.md examples</title>
<title>Tex科学公式语言 (TeX/LaTeX) - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>Tex科学公式语言</h1>
<p>基于KaTeX.js：<a href="http://khan.github.io/KaTeX/" target="_blank">http://khan.github.io/KaTeX/</a></p>
<p>注：默认使用CloudFlare的CDN，有时加载速度会比较慢，可自定义加载地址。</p>
<h1>Tex科学公式语言 (TeX/LaTeX)</h1>
<p>Based on KaTeX.js：<a href="http://khan.github.io/KaTeX/" target="_blank">http://khan.github.io/KaTeX/</a></p>
<p>P.S. Default using CloudFlare KaTeX's CDN. (注：默认使用CloudFlare的CDN，有时加载速度会比较慢，可自定义加载地址。)</p>
<br/>
<p><a href="https://jsperf.com/katex-vs-mathjax" target="_blank">KaTeX vs MathJax</a></p>
</header>
<div id="test-editormd">
<textarea style="display:none;">####开启科学公式支持
<textarea style="display:none;">[TOC]
配置项：
####Setting
{
tex : true
}
####示例
####Examples
$$E=mc^2$$
行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
Inline 行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。
$$c = \\pm\\sqrt{a^2 + b^2}$$
$$f(x) = x^2$$
$$\alpha = \sqrt{1-e^2}$$
$$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
####自定义KaTeX的URL
$$\\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$$
$$f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi$$
$$\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$
$$\displaystyle \left( \sum\_{k=1}^n a\_k b\_k \right)^2 \leq \left( \sum\_{k=1}^n a\_k^2 \right) \left( \sum\_{k=1}^n b\_k^2 \right)$$
####Custom KaTeX source URL
```javascript
//默认使用CloudFlare的CDN，有时加载速度会比较慢
//或者直接修改源码
// Default using CloudFlare KaTeX's CDN
// You can custom url
editormd.katexURL = {
js : "your url",
css : "your url"
};
```
#### KaTeX vs MathJax
[https://jsperf.com/katex-vs-mathjax](https://jsperf.com/katex-vs-mathjax "KaTeX vs MathJax")
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

92
examples/manually-load-modules.html
View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Manually load-modules - Editor.md examples</title>
<link rel="stylesheet" href="css/style.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>Manually load-modules</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;">#Manually load modules exmaple
```html
&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" /&gt;
&lt;link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css" /&gt;
&lt;link rel="stylesheet" href="../lib/codemirror/addon/search/matchesonscrollbar.css" /&gt;
&lt;script src="../lib/codemirror/codemirror.min.js"&gt;&lt;/script&gt;
&lt;script src="../lib/codemirror/addons.min.js"&gt;&lt;/script&gt;
&lt;script src="../lib/codemirror/modes.min.js"&gt;&lt;/script&gt;
&lt;script src="../lib/marked.min.js"&gt;&lt;/script&gt;
&lt;!-- if setting previewCodeHighlight == true --&gt;
&lt;script src="../lib/prettify.min.js"&gt;&lt;/script&gt;
&lt;!-- if setting flowchart == true, or sequence-diagram == true --&gt;
&lt;script src="../lib/raphael.min.js"&gt;&lt;/script&gt;
&lt;script src="../lib/underscore.min.js"&gt;&lt;/script&gt;
&lt;script src="../lib/sequence-diagram.min.js"&gt;&lt;/script&gt;
&lt;script src="../lib/flowchart.min.js"&gt;&lt;/script&gt;
&lt;script src="../lib/jquery.flowchart.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="../css/editormd.css" /&gt;
&lt;script src="../editormd.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function() {
var testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : "../lib/",
autoLoadModules : false // Manually load modules
});
testEditor.fullscreen(); // This can be synchronized using the member method
});
&lt;/script&gt;
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" />
<link rel="stylesheet" href="../lib/codemirror/addon/dialog/dialog.css" />
<link rel="stylesheet" href="../lib/codemirror/addon/search/matchesonscrollbar.css" />
<script src="../lib/codemirror/codemirror.min.js"></script>
<script src="../lib/codemirror/addons.min.js"></script>
<script src="../lib/codemirror/modes.min.js"></script>
<script src="../lib/marked.min.js"></script>
<!-- if setting previewCodeHighlight == true -->
<script src="../lib/prettify.min.js"></script>
<!-- if setting flowchart == true, or sequence-diagram == true -->
<script src="../lib/raphael.min.js"></script>
<script src="../lib/underscore.min.js"></script>
<script src="../lib/sequence-diagram.min.js"></script>
<script src="../lib/flowchart.min.js"></script>
<script src="../lib/jquery.flowchart.min.js"></script>
<link rel="stylesheet" href="../css/editormd.css" />
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : "../lib/",
autoLoadModules : false // Manually load modules
});
testEditor.fullscreen(); // This can be synchronized using the member method
});
</script>
</body>
</html>

5
examples/multi-editormd.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>多个Editor.md并存 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>
h3 {
width : 90%;
@ -30,7 +31,7 @@
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditormd, testEditormd2;

22
examples/multi-languages.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>多语言支持 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -30,23 +31,22 @@
&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
&lt;style&gt;
body{background:red;}
&lt;/style&gt;
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<!--<script src="../src/js/languages/en.js"></script>
<script src="../src/js/languages/zh-tw.js"></script> -->
<script src="../editormd.js"></script>
<!--<script src="../languages/en.js"></script>
<script src="../languages/zh-tw.js"></script> -->
<script type="text/javascript">
var testEditor;
$(function() {
var testEditor = editormd("test-editormd", {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
emoji : true,
path : '../lib/'
});
@ -57,7 +57,7 @@ body{background:red;}
// Dynamic load language package
$("#lang-select").change(function() {
var value = $(this).val();
var path = "../src/js/languages/";
var path = "../languages/";
if (value == "zh-cn")
{
@ -69,7 +69,7 @@ body{background:red;}
testEditor.lang = editormd.defaults.lang;
// 只重建涉及语言包的部分，如工具栏、弹出对话框等
testEditor.recreateEditor();
testEditor.recreate();
// 整个编辑器重建，预览HTML会重新生成，出现闪动
//testEditor = editormd("test-editormd", {

59
examples/on-off.html
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>On / Off (bind/unbind) event handle - 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>On / Off (bind/unbind) event handle</h1>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">## Onscroll / Onpreviewscroll</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 : 720,
markdown : md,
path : '../lib/',
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");
// Override settings.onpreviewscroll
this.on("previewscroll", function(){
console.clear();
console.log("on() => Override settings.onpreviewscroll =>", this, this.id, event, (new Date).getTime());
});
this.on("resize", function(){
console.clear();
console.log("onresize =>", this, this.id, event, (new Date).getTime());
});
}
});
});
});
</script>
</body>
</html>

7
examples/onchange.html
View File

@ -4,20 +4,21 @@
<meta charset="utf-8" />
<title>Onchange - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>Onchange event</h1>
<p>Enter F12 open the develop tools</p>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###Hello world!</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;

7
examples/onfullscreen.html
View File

@ -4,20 +4,21 @@
<meta charset="utf-8" />
<title>Onfullscreen & onfullscreenExit - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>Onfullscreen & onfullscreenExit event</h1>
<p>Enter F12 open the develop tools</p>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###Hello world!</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

7
examples/onload.html
View File

@ -4,20 +4,21 @@
<meta charset="utf-8" />
<title>Onload - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>Onload event</h1>
<p>Enter F12 open the develop tools</p>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###Hello world!</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

38
examples/onpreviewing-onpreviewed.html
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Onpreviewing / Onpreviewed - 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>Onpreviewing / Onpreviewed event handle</h1>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">##Onpreviewing / Onpreviewed</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", {
width : "90%",
height : 720,
path : '../lib/',
onpreviewing : function() {
console.log("onpreviewing =>", this, this.id, this.settings);
},
onpreviewed : function() {
console.log("onpreviewed =>", this, this.id, this.settings);
}
});
});
</script>
</body>
</html>

40
examples/onresize.html
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Onresize - 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>Onresize event handle</h1>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">
state.loaded
> bind onresize event
> window.onresize, editormd watch/unwatch/fullscreen/fullscreenExit/toolbar show|hide
> trigger onresize event handle</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", {
width : "90%",
height : 720,
path : '../lib/',
onresize : function() {
this.setMarkdown("state.loaded > bind onresize > window.onresize, editormd watch/unwatch/fullscreen/fullscreenExit/toolbar show|hide " + (new Date).getTime());
console.log("onresize =>", this, this.id, this.settings);
}
});
});
</script>
</body>
</html>

45
examples/onscroll-onpreviewscroll.html
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Onscroll / Onpreviewscroll - 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>Onscroll / Onpreviewscroll event handle</h1>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">## Onscroll / Onpreviewscroll</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 : 720,
markdown : md,
path : '../lib/',
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);
}
});
});
});
</script>
</body>
</html>

43
examples/onwatch-onunwatch.html
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Onwatch / Onunwatch - 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>Onwatch / Onunwatch event handle</h1>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">## Onwatch / Onunwatch
testEditor.toolbarIcons['watch'] click >
trigger > testEditor.watch() / testEditor.unwatch() >
trigger > onwatch() / onunwatch()
</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", {
width : "90%",
height : 720,
path : '../lib/',
onwatch : function() {
console.log("onwatch =>", this, this.id, this.settings);
},
onunwatch : function() {
console.log("onunwatch =>", this, this.id, this.settings);
}
});
});
</script>
</body>
</html>

5
examples/readonly.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>只读模式 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -34,7 +35,7 @@ $(function() {
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;

148
examples/resettings.html
View File

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Resettings - 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>Resettings</h1>
<p>只能设置依赖模块加载完成之后的相关配置或者使用拖动加载模块方式。</p>
<p>Only be resetting the relevant configuration of dependent module loaded after, or using manually load modules mode.</p>
</header>
<div class="btns">
<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="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<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
```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
});
this.config("onresize", function(){
console.log("onresize =>", this);
});
```</pre>
</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 : $("#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() {
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
});
this.config("onresize", function(){
console.log("onresize =>", this);
});
this.watch();
}
});
});
$("#show-btn").bind('click', function(){
testEditor.show();
});
$("#hide-btn").bind('click', function(){
testEditor.hide();
});
$("#get-md-btn").bind('click', function(){
alert(testEditor.getMarkdown());
});
$("#get-html-btn").bind('click', function() {
alert(testEditor.getHTML());
});
$("#watch-btn").bind('click', function() {
testEditor.watch();
});
$("#unwatch-btn").bind('click', function() {
testEditor.unwatch();
});
$("#preview-btn").bind('click', function() {
testEditor.previewing();
});
$("#fullscreen-btn").bind('click', function() {
testEditor.fullscreen();
});
$("#show-toolbar-btn").bind('click', function() {
testEditor.showToolbar();
});
$("#close-toolbar-btn").bind('click', function() {
testEditor.hideToolbar();
});
});
</script>
</body>
</html>

46
examples/search-replace.html
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Search / Replace - 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>Search / Replace</h1>
<p>Search: Press Ctrl + F / Command + F</p>
<p>Replace: Press Ctrl + Shift + F / Command + Option + F</p>
<p>Replace All: Press Ctrl + Shift + R / Command + Option + R</p>
</header>
<div id="test-editormd">
<textarea style="display:none;"></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 : 720,
markdown : "#### Setting\r\n\r\n {\n searchReplace : true\n }\r\n\r\n" + md,
searchReplace : true,
htmlDecode : true,
tex : true,
taskList : true,
emoji : true,
flowChart : true,
sequenceDiagram : true,
path : '../lib/'
});
});
});
</script>
</body>
</html>

13
examples/sequence-diagram.html
View File

@ -4,24 +4,25 @@
<meta charset="utf-8" />
<title>SequenceDiagram - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.min.css" />
<link rel="stylesheet" href="../css/editormd.min.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>SequenceDiagram 时序图/序列图</h1>
<p>基于SequenceDiagram.js：<a href="http://bramp.github.io/js-sequence-diagrams/" target="_blank">http://bramp.github.io/js-sequence-diagrams/</a></p>
<p>Based on SequenceDiagram.js：<a href="http://bramp.github.io/js-sequence-diagrams/" target="_blank">http://bramp.github.io/js-sequence-diagrams/</a></p>
</header>
<div id="test-editormd">
<textarea style="display:none;">####开启 SequenceDiagram 时序图/序列图支持
<textarea style="display:none;">####Using SequenceDiagram
配置项：
setting:
{
sequenceDiagram : true
}
####示例
#### Example
```seq
A->B: Message
@ -37,7 +38,7 @@ Andrew->>China: I am good thanks!
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

5
examples/set-get-replace-selection.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>插入字符/设置和获取光标位置/设置、获取和替换选中的文本 - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -61,7 +62,7 @@ $("#btn6").click(function(){
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditormd;

22
examples/simple.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>Simple - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -13,17 +14,32 @@
</header>
<div id="test-editormd">
<textarea style="display:none;">###Hello world!
本示例未开启：
- TeX(基于KaTeX)；
- 智能识别和解析HTML标签；
- 流程图和时序/序列图支持;
###Editor.md目录结构
editor.md/
css/
fonts/
docs/
images/
plugins/
scss/
lib/
tests/
examples/
editormd.js
...
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;

47
examples/task-lists.html
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Github Flavored Markdown task lists - 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>Github Flavored Markdown task lists</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;">###GFM task lists
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported;
- [x] list syntax required (any unordered or ordered list supported);
- [x] [ ] this is a complete item;
- [ ] []this is an incomplete item [test link](#);
- [ ] [ ]this is an incomplete item;
- [ ] this is an incomplete item [test link](#);
- [ ] this is an incomplete item [test link](#);
> Github Flavored Markdown task lists
</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,
taskList : true,
path : '../lib/',
onload : function() {
}
});
});
</script>
</body>
</html>

96
examples/test.md
View File

@ -21,6 +21,14 @@
#####Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
######Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
####标题（用底线的形式）Heading (underline)
This is an H1
=============
This is an H2
-------------
###字符效果和横线等
----
@ -38,15 +46,15 @@
The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
###引用
###引用 Blockquotes
> 引用文本
> 引用文本 Blockquotes
引用的行内混合
引用的行内混合 Blockquotes
> 引用：如果想要插入空白换行`即<br />标签`，在插入处先键入两个以上的空格然后回车即可，[普通链接](http://localhost/)。
###锚点与链接
###锚点与链接 Links
[普通链接](http://localhost/)
@ -58,9 +66,13 @@ The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is mainta
[anchor-id]: http://www.this-anchor-link.com/
###多语言代码高亮
GFM a-tail link @pandao
> @pandao
####行内代码
###多语言代码高亮 Codes
####行内代码 Inline code
执行命令：`npm install marked`
@ -120,7 +132,7 @@ var testBox = box();
testBox.add("jQuery").remove("jQuery");
```
####HTML代码
####HTML代码 HTML codes
```html
<!DOCTYPE html>
@ -135,31 +147,41 @@ testBox.add("jQuery").remove("jQuery");
</html>
```
###图片
###图片 Images
Image:
![ddd](./images/X7t2gyC.png)
![](https://pandao.github.io/editor.md/examples/images/4.jpg)
图片加链接：
> Follow your heart.
[![xxx](http://i.imgur.com/5MCMHPl.png)](http://i.imgur.com/5MCMHPl.png)
![](https://pandao.github.io/editor.md/examples/images/8.jpg)
> 图为：厦门白城沙滩
图片加链接 (Image + Link)：
[![](images/7.jpg)](images/7.jpg "李健首张专辑《似水流年》封面")
> 图为：李健首张专辑《似水流年》封面
----
###列表
###列表 Lists
####无序列表（减号）
####无序列表（减号）Unordered Lists (-)
- 列表一
- 列表二
- 列表三
####无序列表（星号）
####无序列表（星号）Unordered Lists (*)
* 列表一
* 列表二
* 列表三
####无序列表（加号和嵌套）
####无序列表（加号和嵌套）Unordered Lists (+)
+ 列表一
+ 列表二
@ -171,15 +193,27 @@ testBox.add("jQuery").remove("jQuery");
* 列表二
* 列表三
####有序列表
####有序列表 Ordered Lists (-)
1. 第一行
2. 第二行
3. 第三行
####GFM task list
- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
- [ ] GFM task list 3-1
- [ ] GFM task list 3-2
- [ ] GFM task list 3-3
- [ ] GFM task list 4
- [ ] GFM task list 4-1
- [ ] GFM task list 4-2
----
###绘制表格
###绘制表格 Tables
| 项目 | 价格 | 数量 |
| -------- | -----: | :----: |
@ -216,7 +250,7 @@ Content Cell | Content Cell
----
####特殊符号
####特殊符号 HTML Entities Codes
&copy; & &uml; &trade; &iexcl; &pound;
&amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot;
@ -225,19 +259,25 @@ X&sup2; Y&sup3; &frac34; &frac14; &times; &divide; &raquo;
18&ordm;C &quot; &apos;
####标题（用底线的形式）
###Emoji表情 :smiley:
This is an H1
=============
> Blockquotes :star:
This is an H2
-------------
####GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
####反斜杠
- [x] :smiley: @mentions, :smiley: #refs, [links](), **formatting**, and <del>tags</del> supported :editormd-logo:;
- [x] list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
- [x] [ ] :smiley: this is a complete item :smiley:;
- [ ] []this is an incomplete item [test link](#) :fa-star: @pandao;
- [ ] [ ]this is an incomplete item :fa-star: :fa-gear:;
- [ ] :smiley: this is an incomplete item [test link](#) :fa-star: :fa-gear:;
- [ ] :smiley: this is :fa-star: :fa-gear: an incomplete item [test link](#);
####反斜杠 Escape
\*literal asterisks\*
###科学公式
###科学公式 TeX(KaTeX)
$$E=mc^2$$
@ -247,7 +287,7 @@ $$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
###绘制流程图
###绘制流程图 Flowchart
```flow
st=>start: 用户登陆
@ -260,7 +300,7 @@ cond(yes)->e
cond(no)->op
```
###绘制序列图
###绘制序列图 Sequence Diagram
```seq
Andrew->China: Says Hello
@ -269,4 +309,4 @@ China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```
###结束
###结束 End

119
examples/themes.html
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Themes - 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>Themes</h1>
<p>
<select>
<option selected="selected" value="">select themes</option>
</select>
</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###Themes
####Setting
```javascript
testEditor = editormd("test-editormd", {
theme : "theme-name",
path : '../lib/'
});
```
####Default theme
- default
####Recommends
- ambiance
- eclipse
- mdn-like
- mbo
- monokai
- neat
- pastel-on-dark
####Optional
- default
- 3024-day
- 3024-night
- ambiance
- ambiance-mobile
- base16-dark
- base16-light
- blackboard
- cobalt
- eclipse
- elegant
- erlang-dark
- lesser-dark
- mbo
- mdn-like
- midnight
- monokai
- neat
- neo
- night
- paraiso-dark
- paraiso-light
- pastel-on-dark
- rubyblue
- solarized
- the-matrix
- tomorrow-night-eighties
- twilight
- vibrant-ink
- xq-dark
- xq-light
</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,
theme : (localStorage.theme) ? localStorage.theme : "default",
path : '../lib/'
});
var select = $("select");
for (var i = 0, len = editormd.themes.length; i < len; i ++)
{
var theme = editormd.themes[i];
var selected = (localStorage.theme == theme) ? " selected=\"selected\"" : "";
select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
}
select.change(function(){
var theme = $(this).val();
if (theme == "")
{
alert("theme == \"\"");
return false;
}
localStorage.theme = theme;
testEditor.setTheme(theme);
});
});
</script>
</body>
</html>

5
examples/toc.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>TOC - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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">
@ -102,7 +103,7 @@ WebKit 是一个开源的浏览器引擎，与之相应的引擎有Gecko（Mozil
</div>
<script src="js/jquery.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {

165
examples/use-requirejs.html
View File

@ -5,24 +5,31 @@
<title>Use require.js - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" />
<link rel="stylesheet" href="../dist/css/editormd.min.css" />
<!-- <link rel="stylesheet" href="../lib/codemirror/addon/fold/foldgutter.css" /> -->
<link rel="stylesheet" href="../css/editormd.min.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>Use require.js</h1>
<h1>Use require.js</h1>
<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>
</ul>
</header>
<div class="btns">
<button id="show-btn">显示编辑器</button>
<button id="hide-btn">隐藏编辑器</button>
<button id="get-md-btn">获取Markdown(源码)</button>
<button id="get-html-btn">获取HTML(源码)</button>
<button id="watch-btn">开启实时预览</button>
<button id="unwatch-btn">关闭实时预览</button>
<button id="preview-btn">预览HTML(按ESC取消)</button>
<button id="fullscreen-btn">全屏(按ESC取消)</button>
<button id="show-toolbar-btn">显示工具栏</button>
<button id="close-toolbar-btn">关闭工具栏</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="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<button id="show-toolbar-btn">Show toolbar</button>
<button id="close-toolbar-btn">Hide toolbar</button>
</div>
<div id="test-editormd"></div>
</div>
@ -31,97 +38,117 @@
requirejs.config({
baseUrl: "../lib/",
paths: {
jquery : "../examples/js/jquery.min",
marked : "marked.min",
prettify : "prettify.min",
raphael : "raphael.min",
editormd : "../src/js/editormd"
jquery : "../examples/js/jquery.min",
marked : "marked.min",
prettify : "prettify.min",
raphael : "raphael.min",
underscore : "underscore.min",
flowchart : "flowchart.min",
jqueryflowchart : "jquery.flowchart.min",
sequenceDiagram : "sequence-diagram.min",
katex : "http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min",
editormd : "../editormd.amd" // Using Editor.md amd version for Require.js
},
waitSeconds: 30
});
require(["jquery", "marked", "prettify", "editormd", "../src/js/languages/en", "raphael", "underscore.min", "flowchart.min", "jquery.flowchart.min", "sequence-diagram.min"], function($, marked, prettify, editormd) {
var testEditor;
var deps = [
"editormd",
"../languages/en",
"../plugins/link-dialog/link-dialog",
"../plugins/anchor-link-dialog/anchor-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/help-dialog/help-dialog",
"../plugins/html-entities-dialog/html-entities-dialog",
"../plugins/preformatted-text-dialog/preformatted-text-dialog"
];
var testEditor;
require([editormd.katexURL.js + ".js"], function(katex) {
require(editormd.requireModules(), function(CodeMirror) {
//console.log(CodeMirror, marked, katex);
editormd.requirejsInit(CodeMirror, marked, katex, prettyPrint);
$.get('test.md', function(md) {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
markdown : md,
saveHTMLToTextarea : true, // 保存HTML到Textarea
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
tex : true,
previewCodeHighlight : true,
inRequirejs : true, // must set true
flowChart : true,
sequenceDiagram : true,
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
require(deps, function(editormd) {
// if enable codeFold
// or <link rel="stylesheet" href="../lib/codemirror/addon/fold/foldgutter.css" />
editormd.loadCSS("../lib/codemirror/addon/fold/foldgutter");
$.get('test.md', function(md) {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
markdown : md,
codeFold : true,
searchReplace : true,
saveHTMLToTextarea : true, // 保存HTML到Textarea
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
emoji : true,
taskList : true,
tex : true,
autoLoadModules : false,
previewCodeHighlight : true,
flowChart : true,
sequenceDiagram : true,
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
});
$("#show-btn").bind('click', function(){
testEditor.show();
});
$("#hide-btn").bind('click', function(){
testEditor.hide();
});
$("#get-md-btn").bind('click', function(){
alert(testEditor.getMarkdown());
});
$("#get-html-btn").bind('click', function() {
alert(testEditor.getHTML());
});
$("#watch-btn").bind('click', function() {
testEditor.watch();
});
$("#unwatch-btn").bind('click', function() {
testEditor.unwatch();
});
$("#preview-btn").bind('click', function() {
testEditor.previewing();
});
$("#fullscreen-btn").bind('click', function() {
testEditor.fullscreen();
});
$("#show-toolbar-btn").bind('click', function() {
testEditor.showToolbar();
});
$("#close-toolbar-btn").bind('click', function() {
testEditor.hideToolbar();
});

53
examples/use-seajs.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8" />
<title>Use sea.js - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.min.css" />
<link rel="stylesheet" href="../css/editormd.min.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<style>
header p code {
padding: 3px;
@ -25,33 +26,49 @@
<p>2、flowChart（流程图）和sequenceDiagram（时序图）基于Raphael.js，由于疑似Sea.js与Raphael.js有冲突，所以必须先加载Raphael.js再加载Sea.js，Editor.md才能在Sea.js下正常进行；</p>
</header>
<div class="btns">
<button id="show-btn">显示编辑器</button>
<button id="hide-btn">隐藏编辑器</button>
<button id="get-md-btn">获取Markdown(源码)</button>
<button id="get-html-btn">获取HTML(源码)</button>
<button id="watch-btn">开启实时预览</button>
<button id="unwatch-btn">关闭实时预览</button>
<button id="preview-btn">预览HTML(按ESC取消)</button>
<button id="fullscreen-btn">全屏(按ESC取消)</button>
<button id="show-toolbar-btn">显示工具栏</button>
<button id="close-toolbar-btn">关闭工具栏</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="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<button id="show-toolbar-btn">Show toolbar</button>
<button id="close-toolbar-btn">Hide toolbar</button>
</div>
<div id="test-editormd"></div>
</div>
<!-- Flowchart & Sequence Diagram based on Raphael.js, and must load Raphael.js of Sea.js before. -->
<script src="../lib/raphael.min.js"></script>
<script src="js/sea.js"></script>
<script type="text/javascript">
seajs.config({
//base : "../lib",
base : "./",
alias : {
jquery : "./js/jquery.min",
editormd : "../src/js/editormd"
jquery : "js/jquery.min",
editormd : "../editormd"
}
});
//seajs.use("./js/seajs-main"); //使用main.js时 editormd 路径要改为 "../../src/js/editormd"
//seajs.use("./js/seajs-main"); //使用main.js时 editormd 路径要改为 "../../editormd"
var deps = [
"jquery",
"editormd",
"../languages/en",
"../plugins/link-dialog/link-dialog",
"../plugins/anchor-link-dialog/anchor-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/help-dialog/help-dialog",
"../plugins/html-entities-dialog/html-entities-dialog",
"../plugins/preformatted-text-dialog/preformatted-text-dialog"
];
seajs.use(["jquery", "editormd", "../src/js/languages/en"], function($, editormd) {
seajs.use(deps, function($, editormd) {
var testEditor;
$.get("./test.md", function(md){
@ -61,8 +78,12 @@
path : '../lib/',
markdown : md,
//toolbar : false, //关闭工具栏
codeFold : true,
searchReplace : true,
saveHTMLToTextarea : true, // 保存HTML到Textarea
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
emoji : true,
taskList : true,
tex : true, // 开启科学公式TeX语言支持，默认关闭
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮，默认开启
flowChart : true, // 疑似Sea.js与Raphael.js有冲突，必须先加载Raphael.js，Editor.md才能在Sea.js下正常进行；

36
examples/use-zepto.html
View File

@ -4,24 +4,30 @@
<meta charset="utf-8" />
<title>Use Zepto.js - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../dist/css/editormd.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>Use Zepto.js</h1>
<h1>Use Zepto.js</h1>
<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>
</ul>
</header>
<div class="btns">
<button id="show-btn">显示编辑器</button>
<button id="hide-btn">隐藏编辑器</button>
<button id="get-md-btn">获取Markdown(源码)</button>
<button id="get-html-btn">获取HTML(源码)</button>
<button id="watch-btn">开启实时预览</button>
<button id="unwatch-btn">关闭实时预览</button>
<button id="preview-btn">预览HTML(按ESC取消)</button>
<button id="fullscreen-btn">全屏(按ESC取消)</button>
<button id="show-toolbar-btn">显示工具栏</button>
<button id="close-toolbar-btn">关闭工具栏</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="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<button id="show-toolbar-btn">Show toolbar</button>
<button id="close-toolbar-btn">Hide toolbar</button>
</div>
<form action="http://editormd.ipandao.com/php/post.php" method="post">
<div class="editormd" id="test-editormd">
@ -31,7 +37,7 @@
</form>
</div>
<script src="js/zepto.min.js"></script>
<script src="../src/js/editormd.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以想支持flowChart/sequenceDiagram就得加上这一句
@ -43,9 +49,13 @@
height : 720,
path : '../lib/',
markdown : md,
codeFold : true,
searchReplace : true,
saveHTMLToTextarea : true, // 保存HTML到Textarea
//watch : false,
htmlDecode : true, // 开启HTML标签解析，为了安全性，默认不开启
emoji : true,
taskList : true,
tex : true, // 开启科学公式TeX语言支持，默认关闭
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮，默认开启
flowChart : true, // 疑似Sea.js与Raphael.js有冲突，必须先加载Raphael.js，Editor.md才能在Sea.js下正常进行；

0
dist/fonts/FontAwesome.otf → fonts/FontAwesome.otf
View File

0
dist/fonts/editormd-logo.eot → fonts/editormd-logo.eot
View File

0
dist/fonts/editormd-logo.svg → fonts/editormd-logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

0
dist/fonts/editormd-logo.ttf → fonts/editormd-logo.ttf
View File

Some files were not shown because too many files changed in this diff

Write Preview
Loading…
Cancel
Save