This commit is contained in:
huang 2018-03-04 16:22:34 +08:00
parent 7b8b1e2d9e
commit 30fa0acf7e
517 changed files with 118339 additions and 0 deletions

20
public/editormd/.jshintrc Normal file
View File

@ -0,0 +1,20 @@
{
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "double",
"regexp": true,
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"white": true
}

22
public/editormd/BUGS.md Normal file
View File

@ -0,0 +1,22 @@
#Bugs
> 说明:删除线表示已经解决。
####IE8
- ~~不能加载;~~
- flowChart流程图、sequenceDiagram序列图不支持IE8
- ~~不支持Markdown转HTML页面解析预览~~
####IE8 & IE9 & IE10
- KaTeX会出现解析错误但不影响程序运行
####Sea.js
- ~~Raphael.js无法加载~~
####Require.js
- ~~CodeMirror编辑器的代码无法高亮~~
- ~~sequenceDiagram不支持: `Uncaught TypeError: Cannot call method 'isArray' of undefined.`~~

534
public/editormd/CHANGE.md Normal file
View File

@ -0,0 +1,534 @@
## 更新日志
### v1.0.x
##### v1.0.0 beta
预览版:基本功能完成;
##### v1.0.0 releases
发布 v1.0.0 正式版。
主要更新:
- 新建分支 `mathjax-version`,但不打算继续对此分支进行开发;
- 移除 MathJax改用 KaTeX [#2](https://github.com/pandao/editor.md/issues/2),解析和预览响应速度大幅度提高 [#3](https://github.com/pandao/editor.md/issues/3)
- 移除 `mathjax` 配置项;
- 移除 `mathjaxURL` 属性;
- 移除 `setMathJaxConfig()` 方法;
- 移除 `loadMathJax()` 方法;
- 移除MathJax的所有示例
- 新增 `tex` 配置项,表示是否开启支持科学公式 TeX ,基于 KaTeX
- 新增 `katexURL` 属性;
- 新增 `loadKaTeX` 方法;
- 新增 KaTeX 的示例;
- `setCodeEditor()` 方法更名为 `setCodeMirror()`
- 合并 CodeMirror 使用到的多个 JS 模块文件,大幅减少 HTTP 请求,加快下载速度;
- 新增合并后的两个模块文件:`./lib/codemirror/modes.min.js`、`./lib/codemirror/addons.min.js`
- `Gulpfile.js` 新增合并 CodeMirror 模块文件的任务方法 `codemirror-mode``codemirror-addon`
- 另外在使用 Require.js 时,因为 CodeMirror 的严格模块依赖的限制,不能使用上述合并的模块文件,仍然采用动态加载多个模块文件;
- 更新 `README.md` 等相关文档和示例;
- 解决 Sea.js 环境下 Raphael.js 无法运行导致不支持流程图和时序图的问题,即必须先加载 Raphael.js ,后加载 Sea.js
### v1.1.x
##### v1.1.0
主要更新:
- 设计并更换了 Logo
- 新增添加图片、链接、锚点链接、代码块、预格式文本等操作弹出对话框层及示例;
- 新增支持图片(跨域)上传;
- 改用 `<textarea>` 来存放 Markdown 源文档;
- 新增支持自定义工具栏;
- 新增支持多语言;
- 新增支持 Zepto.js
- 新增支持多个 Editor.md 并存和动态加载 Editor.md 及示例;
- 新增支持智能识别和解析 HTML 标签及示例;
- 新增多个外部操作方法接口及示例;
- 修复了一些大大小小的 Bug
具体更新如下:
- 更换 Logo建立基础 VI
- 创建了全系列 WebFont 字体 `dist/fonts/editormd-logo.*`
- 新增样式类 `editormd-logo` 等;
- 改用 `<textarea>` 来存放 Markdown 源文档;
- 原先使用 `<script type="text/markdown"></script>` 来存放 Markdown 源文档;
- 创建 Editor.md 只需要写一个 `<div id="xxxx"></div>` ,如果没有添加 `class="editormd"` 属性会自动添加,另外如果不存在 `<textarea>` 标签,则也会自动添加 `<textarea>`
- 新增支持智能识别和解析 HTML 标签,增强了 Markdown 语法的扩展性,几乎无限,例如:插入视频等等;
- 新增配置项 `htmlDecode` ,表示是否开启 HTML 标签识别和解析,但是为了安全性,默认不开启;
- 新增识别和解析 HTML 标签的示例;
- 新增插入链接、锚点链接、预格式文本和代码块的弹出对话框层;
- 弹出层改为使用固定定位;
- 新增动态创建对话框的方法 `createDialog()`
- 新增静态属性 `editormd.codeLanguages` ,用于存放代码语言列表;
- 开始支持图片上传;
- 新增添加图片(上传)弹出对话框层;
- 支持基于 iframe 的跨域上传,并添加相应的示例( PHP 版);
- 开始支持自定义工具栏图标及操作处理;
- 配置项 `toolbarIcons` 类型由数组更改为函数,返回一个图标按钮列表数组;
- 新增配置项 `toolbarHandlers``toolbarIconsTexts` ,分别用于自定义按钮操作处理和按钮内容文本;
- 新增方法 `getToolbarHandles()` ,用于可在外部使用默认的操作方法;
- 新增成员属性 `activeIcon` ,可获取当前或上次点击的工具栏图标的 jQuery 实例对象;
- 新增表单取值、自定义工具栏、图片上传、多个 Editor.md 并存和动态加载 Editor.md 等多个示例;
- 新增插入锚点按钮和操作处理;
- 新增预览 HTML 内容窗口的关闭按钮,之前只能按 ESC 才能退出 HTML 全窗口预览;
- 新增多语言( l18n )及动态加载语言包支持;
- 新增英语 `en` 和繁体中文 `zh-tw` 语言包模块;
- 修改一些方法的内部实现以支持动态语言加载:
- `toolbarHandler()` 更为 `setToolbarHandler()`
- `setToolbar()` 方法包含 `setToolbarHandler()`
- 新建 `createInfoDialog()` 方法;
- 修改 `showInfoDialog()``hideInfoDialog()` 方法的内部实现等;
- 修改多次 Bug ,并优化触摸事件,改进对 iPad 的支持;
- 工具栏新增清空按钮和清空方法 `clear()` ,解决工具栏文本会被选中出现蓝底的问题;
- 配置项 `tocStartLevel` 的默认值由 2 改为 1表示默认从 H1 开始生成 ToC
- 解决 IE8 下加载出错的问题;
- 新增两个静态成员属性 `isIE``isIE8` ,用于判断 IE8
- 由于 IE8 不支持 FlowChart 和 SequenceDiagram默认在 IE8 下不加载这两个组件,无论是否开启;
- 新增 Zepto.js 的支持;
- 为了兼容 Zepto.js ,某些元素在操作处理上不再使用 `outerWidth()``outerHeight()` 、`hover()` 、`is()` 等方法;
- 为了避免修改 flowChart.js 和 sequence-diagram.js 的源码,所以想支持 flowChart 或 sequenceDiagram 得加上这一句: `var jQuery = Zepto;`
- 新增 `editormd.$name` 属性,修改 `editormd.homePage` 属性的新地址;
- `editormd.markdownToHTML()` 新增方法返回一个 jQuery 实例对象;
- 该实例对象定义了一个 `getMarkdown()`方法,用于获取 Markdown 源代码;
- 该实例对象定义了一个 `tocContainer` 成员属性,即 ToC 列表的父层的 jQuery 实例对象;
- 新增只读模式;
- 新增配置项 `readOnly` ,默认值为 `false` ,即可编辑模式;
- 其他相关改动;
- 新增方法 `focus()``setCursor()``getCursor()` 、`setSelection()` 、`getSelection()` 、 `replaceSelection()``insertValue()` 方法,并增加对应的示例;
- 新增配置项 `saveHTMLToTextarea` ,用于将解析后的 HTML 保存到 Textarea以供提交到后台程序
- `getHTML()` 方法必须在 `saveHTMLToTextarea == true` 的情况下才能使用;
- 新增 `getHTML()` 方法的别名 `getTextareaSavedHTML()` 方法;
- 新增方法 `getPreviewedHTML()` ,用于获取预览窗口的 HTML
- 修复了一些大大小小的 Bugs
##### v1.1.1
- 接受一个 pull 请求,修复了 `getHTML ()``getPreviewedHTML()` 方法中的 处错误;
##### v1.1.2
- 修复 Bug [10](https://github.com/pandao/editor.md/issues/10)
- 修复 Bug [12](https://github.com/pandao/editor.md/issues/12)
##### v1.1.3
- 修复 Bug [14](https://github.com/pandao/editor.md/issues/14)
- 修复 Bug [15](https://github.com/pandao/editor.md/issues/15)
##### v1.1.4
- 修复 Bug [17](https://github.com/pandao/editor.md/issues/17)
- 修改了 `getToolbarHandles()``setToolbarHandler()` 方法;
- 从 `editormd.scss` 中分离出 `editormd.logo.scss` ,并生成 `editormd.logo.css` ,以便单独使用;
- 同时修改了 `Gulpfile.js` 的相应任务;
##### v1.1.5
- 修复 Bug [18](https://github.com/pandao/editor.md/issues/18)
- 修改了 `showInfoDialog()``createInfoDialog()` 方法;
- 新增 `infoDialogPosition()` 方法;
- 修复 Bug [20](https://github.com/pandao/editor.md/issues/20)
- 修改了引用的处理函数;
- 插入的 headers 的 `#` 号后面都加上了一个空格;
##### v1.1.6
修复多处 Bug具体如下
- 修复 Bug [#23](https://github.com/pandao/editor.md/issues/23),即 Headers 的 id 属性的重复及中文问题;
- 修改了 `editormd.markedRenderer()` 方法;
- 修复 Bug [#24](https://github.com/pandao/editor.md/issues/24)
- 修改了 `setMarkdown()``clear()``loadedDisplay()` 方法的内部实现;
- 新增了 `katexRender()``flowChartAndSequenceDiagramRender()``previewCodeHighlight()` 方法;
- 修复有些情况下无法保存 Markdown 源文档到 textarea 的问题;
- 修改了 `setCodeMirror()``recreateEditor()` 等方法;
- 修改了以上 Bug 及部分相关示例文件;
##### v1.1.7
修复多处 Bug具体如下
- 修复 Bug [#25](https://github.com/pandao/editor.md/issues/25)
- 修改了 `loadedDisplay()` 方法,将 `settings.onload` 移动了 `CodeMirror.on("change")` 事件注册后再触发;
- 修复 Bug [#26](https://github.com/pandao/editor.md/issues/26)
- 修改了 `saveToTextareas()` 方法;
- 新增 `state.loaded``state.watching` 两个属性;
- 修改了以上 Bug 相关示例文件;
##### v1.1.8
改进功能,具体如下:
- 改进 [#27](https://github.com/pandao/editor.md/issues/27)
- 新增配置项 `matchWordHighlight` ,可选值有: `true, false, "onselected"` ,默认值为 `true` ,即开启自动匹配和标示相同单词;
- 改进 [#28](https://github.com/pandao/editor.md/issues/28)
- 将 `jquery.min.js``font-awesome.min.css``github-markdown.css` 移除(这是一个疏忽,它们不是动态加载的依赖模块或者不需要的,避免不必要的硬盘空间占用);
- 修改了所有相关的示例文件;
##### v1.1.9
- 修复无法解析 heading link 的 Bug [#29](https://github.com/pandao/editor.md/issues/29)
- 修改了 `editormd.markedRenderer()` 方法的内部实现;
- 新增了 `editormd.trim()` ,用于清除字符串两边的空格;
- 修改了所有相关的示例文件和测试用例 `marked-heading-link-test.html`
- 修改了 `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`
- 修改和新增以上改进等相关示例;
### v1.3
#### v1.3.0
主要更新:
- 预设键盘快捷键处理(粗体等),插入 Markdown 更加方便;
- 更新 CodeMirror 版本为 `5.0`
- 更新 Marked 版本为 `0.3.3`
- 新增自动高度和工具栏固定定位功能;
- 改进表格插入对话框;
- 工具栏新增三个按钮,分别是将所选文本首字母转成大写、转成小写、转成大写;
- 修改使用帮助文档;
- 修复多个 Bug
具体更新如下:
- 新增常用键盘快捷键预设处理;
- 新增属性 `editormd.keyMaps` ,预设一些常用操作,例如插入粗体等;
- 新增成员方法 `registerKeyMaps()`
- 退出HTML全屏预览快捷键更改为 `Shift + ESC`
- 新增配置项 `disabledKeyMaps` ,用于屏蔽一些快捷键操作;
- 更新 CodeMirror 版本为 `5.0`
- 修改无法输入 `/` 的问题;
- 更新 Marked 版本为 `0.3.3`
- 新增自动高度和工具栏固定定位(滚动条拖动时)模式;
- 新增配置项 `settings.autoHeight`
- 新增配置项 `settings.toolbarAutoFixed`
- 新增方法 `setToolbarAutoFixed(true|false)`
- 新增邮箱地址自动添加链接功能;
- 新增配置项 `emailLink` ,默认为 `true` ;
- 改进表格插入对话框;
- 工具栏新增三个按钮,分别是将所选文本首字母转成大写、转成小写、转成大写;
- 新增方法 `editormd.ucwords()` ,别名 `editormd.wordsFirstUpperCase()`
- 新增方法 `editormd.ucfirst()` ,别名 `editormd.firstUpperCase()`
- 新增两个成员方法 `getSelections()``getSelections()`
- 修复 Font awesome 图标 emoji 部分无法解析的 Bug[#39](https://github.com/pandao/editor.md/issues/39)
- 改进 @link 功能 [#40](https://github.com/pandao/editor.md/issues/40)
- 新增配置项 `atLink` ,默认为 `true` ;
- 修复无法输入 `/` 的问题 [#42](https://github.com/pandao/editor.md/issues/42)
- 修改使用帮助说明的错误 [#43](https://github.com/pandao/editor.md/issues/43)
- 新增配置项 `pluginPath`,默认为空时,等于 `settings.path + "../plugins/"`
### v1.4
#### v1.4.0
主要更新:
- 新增延迟解析机制,预览更即时;
- 新增跳转到指定行的功能和对话框;
- 新增 ToC 下拉菜单、自定义 ToC 容器的功能;
- 新增跳转到行、搜索的工具栏按钮;
- 新增支持插入和解析(打印)分页符;
- 改进快捷键功能和自动高度模式等;
- 改进:将锚点链接改名为引用链接;
- 改进编辑器重建和重配置功能;
- 修复多个 Bug
具体更新:
- 新增延迟解析预览的机制,解决输入太多太快出现的 “延迟卡顿” 问题;
- 新增配置项 `delay` ,默认值为 `300`
- 修复当输入速度太快时解析Flowchart会抛出错误的问题
- 修改 iPad 等移动终端的浏览器无法上传图片的问题 [#48](https://github.com/pandao/editor.md/issues/48)
- 修复单独引用 `editormd.preview.css` 时无法显示 Font Awesome 和 Editor.md logo 字体的问题;
- 更新和修改 Gulp 构建;
- 修改了 `Gulpfile.js` ,并且 `gulp-ruby-sass` 升级到最新版本 `1.0.0-alpha.3` ;
- 编辑 SCSS 时,不再生成 CSS 的 Source map 文件;
- 执行 jshint 和更正一些 JS 写法的不规范,精简了代码;
- 新增配置项 `appendMarkdown``appendMarkdown()` 方法,用于(初始化前后)追加 Markdown 到 Textarea
- 改进部分预设快捷键功能,包括 F9 (watch)、F10 (preview)、F11 (fullscreen)等;
- 修复自动高度模式下出现的几个问题;
- 全屏退出时高度不正确的问题:修改了 `fullscreenExit()` 方法的内部实现;
- 当解析预览后的 HTML 内容高度高于 Markdown 源码编辑器高度时,无法正确预览的问题 [#49](https://github.com/pandao/editor.md/issues/49)
- 修改 `onscroll``onpreviewscroll` 无法访问 `this` 的问题;
- 修改 `init()` 方法,可以只设置一个参数;
- 新增插入 TeX (KaTeX) 公式的快捷键 `Ctrl + Shift + K` 和插入方法 `tex()`
- 将锚点链接改为引用链接,引用的链接改为插入到页尾;
- 工具栏的名称 `anchor` 改为 `reference-link`
- 工具栏的名称 `htmlEntities` 改名为 `html-entities`
- 改进编辑器重建和重配置功能;
- 修改了 `loadedDisplay()` 方法;
- 修改了 `config()``recreate()` 方法;
- 新增跳转到指定行的功能;
- 新增方法 `gotoLine()`
- 新增跳转到行对话框插件 `goto-line-dialog`
- 新增快捷键 `Ctrl + Alt + G`
- 改进 `executePlugin()` 方法;
- 修改了 `help-dialog/help.md`
- 新增搜索工具栏按钮;
- 新增方法 `search()` 、`searchReplace()` 和 `searchReplaceAll()`
- 原全屏预览 HTML 按钮的图标改为 `fa-desktop`
- 改为默认开启搜索替换功能;
- 更换了关于 Editor.md 的标语( slogan
- 标题按钮 `h` 改为大写的 `H`
- `saveToTextareas()` 方法更名为 `save()`
- 新增 ToC 下拉菜单、自定义 ToC 容器的功能;
- 新增 Markdown 扩展语法 `[TOCM]` ,自动生成 ToC 下拉菜单;
- 新增配置项 `tocm` ,默认为 `true`,即可以使用 `[TOCM]`
- 新增配置项 `tocDropdown``tocTitle`
- 新增方法 `editormd.tocDropdownMenu()`
- 新增配置项 `tocContainer` ,值为 jQuery 选择器,默认为空;
- 修改了配置项 `placeholder` 的默认值;
- 改进对 IE8 的兼容支持;
- 修复 Firefox 下因为 `Object.watch()` 而出现的问题;
- 新增支持插入和解析(打印)分页符;
- 新增配置项 `pageBreak` ,默认值为 `true`
- 新增语法 `[========]` ,即括号内至少 8 个等号;
- 新增插入分页符的工具栏图标和方法 `pagebreak()`
- 新增插入分页符的快捷键 `Shift + Alt + P`
- 修复一些 Bug包括 [#51](https://github.com/pandao/editor.md/issues/51) 等;
- 新增和修改以上更新的相关示例;
#### v1.4.1
- 新增配置项 `syncScrolling`,即是否开启同步滚动预览,默认值为 `false`
- 修复 Bug [64](https://github.com/pandao/editor.md/issues/64)
- 更新 `editormd.katexURL` 资源地址的默认值,即更新版本为 `0.3.0`
- 新增测试用例`tests/katex-tests.html`
- 修改示例文件`examples/katex.html`
- 修复 Bug [66](https://github.com/pandao/editor.md/issues/66)
- 修复编辑器工具栏按钮 `:hover` CSS3 transition 无效的问题;
- 修改了 `README.md`
#### v1.4.2
- 改进和增强自定义工具栏功能,支持图标按钮右对齐 [#69](https://github.com/pandao/editor.md/issues/69)
- 改进和增强 HTML 标签的解析过滤功能,支持过滤指定的属性等 [#70](https://github.com/pandao/editor.md/issues/70)
- 删除分支 `mathjax-version``v1.1.9`
#### v1.4.3
- 改进:可配置是否自动聚焦编辑器 [#74](https://github.com/pandao/editor.md/issues/74)
- 新增配置项 `autoFocus`,默认值为 `true`;
- 修复 Bug [#77](https://github.com/pandao/editor.md/issues/77)
- 改进:帮助对话框里的链接改为新窗口打开,避免直接跳转到链接,导致编辑内容丢失的问题 [#79](https://github.com/pandao/editor.md/issues/79)
- 改进和完善编辑器配置项;
- 新增配置项 `tabSize`、`indentUnit` 和 `lineWrapping`
- 新增配置项 `autoCloseBrackets``showTrailingSpace`
- 新增配置项 `matchBrackets`、`indentWithTabs` 和 `styleSelectedText`
- 改进:修改 CSS `font-family`,改进跨平台中英文字体显示;
- 修改了 `README.md`
#### v1.4.4
- 修复 Bug [#81](https://github.com/pandao/editor.md/issues/81),即不支持 `:+1:` 的问题;
- 修复 Bug [#85](https://github.com/pandao/editor.md/issues/85),即图片上传返回结果不支持 `Content-Type=application/json` 的问题;
- 修复图片上传无法显示 loading 的问题;
#### v1.4.5
- 规范项目的中英文混排;
- 新增配置项 `name`,用于指定 Markdown textarea 的 `name="xxxx"` 属性;
- 修复 Bug即无法正确解析公式的 `<``>` 的问题 [#87](https://github.com/pandao/editor.md/issues/87);
- 修复 Bug`getHTML()` 无效的问题 [#95](https://github.com/pandao/editor.md/issues/95);
- 修复 Bug即火狐上传图片后无法返回值的问题 [#96](https://github.com/pandao/editor.md/issues/96);
- 修改了图片上传插件;
- 修改 PHP 上传类及示例;
- 方法更名:`extends()` 更名为 `extend()`,以兼容 IE8
- 修复 IE8 下 Emoji 正则表达式字符集越界的问题;
- 更新了 `README.md``CHANGE.md` 等相关文档文件;
### v1.5
#### v1.5.0
主要更新:
- 新增:编辑器黑色主题 Dark改进自定义主题功能即工具栏、编辑区、预览区可分别设置主题样式
- 新增:多行公式支持;
- 新增:支持非编辑状态下的 ToC 自定义容器;
- 新增:支持设置为单向同步滚动;
- 改进:编辑器样式美化,更换了滚动条样式;
- 改进:提高同步滚动定位的精确度;
- 改进:修复和改进 HTML 标签及属性过滤功能;
- 改进:修复在 Bootstrap 下的兼容性问题;
- 修复多处 Bug
具体更新:
- 新增:解析后的代码块自动换行;
- 新增:支持多行公式;
- 新增:新增语法:\`\`\`math | latex | katex
- 改进:美化 KaTeX 公式,即加大字号等;
- 新增:支持设置为单向同步滚动,即只是编辑区单向同步滚动,配置项 `syncScrolling : "single"`
- 新增:配置同步滚动示例文件 `sync-scrolling.html`
- 新增:增加了编辑器样式主题 Dark即工具栏和预览区各自有一个暗黑色主题
- 变更:自 `v1.5.0` 开始,配置项 `theme` 改为指定 Editor.md 本身的主题;
- 新增配置项 `editorTheme` ,用于指定编辑区的主题,即 CodeMirror 的主题;
- 新增配置项 `previewTheme` ,用于指定预览区的主题;
- 新增方法 `setEditorTheme()`,别名: `setCodeMirror()`
- 新增方法 `setPreviewTheme()`
- 修改了方法 `setTheme()`
- 更换了滚动条样式Only Webkit
- 改进全屏状态下的样式显示,去掉 JS 操作的部分,改为通过 CSS 样式类 `.editormd-fullscreen` 控制;
- 修改和增加相关的方法、SCSS 文件及示例文件 `themes.html`
- 新增:非编辑状态下 ToC 自定义容器支持;
- 新增配置项 `markdownSourceCode`,即解析后是否保留源码,默认为不保留 `false`
- 新增配置项 `tocContainer`,值为自定义 ToC 容器的 ID 选择器 `#xxxxx`,默认为空;
- 新增和修改了相关示例文件;
- 新增:新增加了 CSS 样式类 `editormd-preview-active`可以控制全屏HTML预览时的内容层样式
- 修改了 `previewing()``previewed()` 方法;
- 相关 issues [#103](https://github.com/pandao/editor.md/issues/103)
- 另外也调整了关闭按钮的位置;
- 改进:修复插入 Emoji `:moon:` 无法显示的问题,修改为其是 `:waxing_gibbous_moon:` 的别名 [#94](https://github.com/pandao/editor.md/pull/94)
- 改进:修改了 CodeMirror 代码行的左右内间距,使其不会挨着左边的行号层;
- 相关 issues [#97](https://github.com/pandao/editor.md/issues/97)
- 改进:修改了同步滚动的定位算法,提高精确度;
- 修正问题 [#99](https://github.com/pandao/editor.md/issues/99)
- 修改了 `bindScrollEvent()` 方法;
- 改进:完善 HTML 标签过滤功能,即代码块、`<pre>` 预格式文本和行内代码里的标签及属性不会被过滤;
- 修复 Bug [#105](https://github.com/pandao/editor.md/issues/105)
- 改进:当不显示行号时 `settings.lineNumbers == false`CodeMirror 行号层去掉右边框;
- 改进:根据指针在当前行的位置更合理插入标题和水平线 [#104](https://github.com/pandao/editor.md/pull/104)
- 改进:调整了字体,优先显示 `"YaHei Consolas Hybrid", Consolas`
- 改进:修复在 Bootstrap 下的兼容性问题,即因为 box-sizing 写错位置导致的弹出层宽度等错位问题 [#107](https://github.com/pandao/editor.md/issues/107)

342
public/editormd/Gulpfile.js Normal file
View File

@ -0,0 +1,342 @@
"use strict";
var os = require("os");
var gulp = require("gulp");
var gutil = require("gulp-util");
var sass = require("gulp-ruby-sass");
var jshint = require("gulp-jshint");
var uglify = require("gulp-uglifyjs");
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 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 %>",
" * @license MIT License",
" * @author <%= pkg.author %>",
" * {@link <%= pkg.homepage %>}",
" * @updateTime <%= pkg.today('Y-m-d') %>",
" */",
"\r\n"].join("\r\n");
var headerMiniComment = "/*! <%= pkg.name %> v<%= pkg.version %> | <%= fileName(file) %> | <%= pkg.description %> | MIT License | By: <%= pkg.author %> | <%= pkg.homepage %> | <%=pkg.today('Y-m-d') %> */\r\n";
var scssTask = function(fileName, path) {
path = path || "scss/";
var distPath = "css";
return sass(path + fileName + ".scss", { style: "expanded", sourcemap: false, noCache : true })
.pipe(gulp.dest(distPath))
.pipe(header(headerComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base);
return name[1].replace("\\", "");
}}))
.pipe(gulp.dest(distPath))
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(gulp.dest(distPath))
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base);
return name[1].replace("\\", "");
}}))
.pipe(gulp.dest(distPath))
.pipe(notify({ message: fileName + ".scss task completed!" }));
};
gulp.task("scss", function() {
return scssTask("editormd");
});
gulp.task("scss2", function() {
return scssTask("editormd.preview");
});
gulp.task("scss3", function() {
return scssTask("editormd.logo");
});
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(/[\\\/]?/, "");
}}))
.pipe(gulp.dest("./"))
.pipe(rename({ suffix: ".min" }))
.pipe(uglify()) // {outSourceMap: true, sourceRoot: './'}
.pipe(gulp.dest("./"))
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base + ( (os.platform() === "win32") ? "\\" : "/") );
return name[1].replace(/[\\\/]?/, "");
}}))
.pipe(gulp.dest("./"))
.pipe(notify({ message: "editormd.js 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()) //{outSourceMap: true, sourceRoot: './'}
.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 : {
mode : "lib/codemirror/mode",
addon : "lib/codemirror/addon"
},
dist : "lib/codemirror"
},
modes : [
"css",
"sass",
"shell",
"sql",
"clike",
"php",
"xml",
"markdown",
"javascript",
"htmlmixed",
"gfm",
"http",
"go",
"dart",
"coffeescript",
"nginx",
"python",
"perl",
"lua",
"r",
"ruby",
"rst",
"smartymixed",
"vb",
"vbscript",
"velocity",
"xquery",
"yaml",
"erlang",
"jade",
],
addons : [
"edit/trailingspace",
"dialog/dialog",
"search/searchcursor",
"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/match-highlighter"
]
};
gulp.task("cm-mode", function() {
var modes = [
codeMirror.path.src.mode + "/meta.js"
];
for(var i in codeMirror.modes) {
var mode = codeMirror.modes[i];
modes.push(codeMirror.path.src.mode + "/" + mode + "/" + mode + ".js");
}
return gulp.src(modes)
.pipe(concat("modes.min.js"))
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(uglify()) // {outSourceMap: true, sourceRoot: codeMirror.path.dist}
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base + "\\");
return (name[1]?name[1]:name[0]).replace(/\\/g, "");
}}))
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(notify({ message: "codemirror-mode task complete!" }));
});
gulp.task("cm-addon", function() {
var addons = [];
for(var i in codeMirror.addons) {
var addon = codeMirror.addons[i];
addons.push(codeMirror.path.src.addon + "/" + addon + ".js");
}
return gulp.src(addons)
.pipe(concat("addons.min.js"))
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(uglify()) //{outSourceMap: true, sourceRoot: codeMirror.path.dist}
.pipe(gulp.dest(codeMirror.path.dist))
.pipe(header(headerMiniComment, {pkg : pkg, fileName : function(file) {
var name = file.path.split(file.base + "\\");
return (name[1]?name[1]:name[0]).replace(/\\/g, "");
}}))
.pipe(gulp.dest(codeMirror.path.dist))
.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"));
});
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);
})
.pipe(rename(function(path) {
path.extname = ".md";
}))
.pipe(gulp.dest("docs/markdown"));
});
*/
gulp.task("watch", function() {
gulp.watch("scss/editormd.scss", ["scss"]);
gulp.watch("scss/editormd.preview.scss", ["scss", "scss2"]);
gulp.watch("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("amd");
gulp.run("cm-addon");
gulp.run("cm-mode");
});

22
public/editormd/LICENSE Normal file
View File

@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2015 pandao
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

119
public/editormd/README.md Normal file
View File

@ -0,0 +1,119 @@
# Editor.md
![](https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png)
![](https://img.shields.io/github/stars/pandao/editor.md.svg)
![](https://img.shields.io/github/forks/pandao/editor.md.svg)
![](https://img.shields.io/github/tag/pandao/editor.md.svg)
![](https://img.shields.io/github/release/pandao/editor.md.svg)
![](https://img.shields.io/github/issues/pandao/editor.md.svg)
![](https://img.shields.io/bower/v/editor.md.svg)
**Editor.md** : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.
### Features
- Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
- Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting...;
- 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 [decode & fliter of the HTML tags & attributes](https://pandao.github.io/editor.md/examples/html-tags-decode.html);
- Support [TeX (LaTeX expressions, Based on KaTeX)](https://pandao.github.io/editor.md/examples/katex.html), [Flowchart](https://pandao.github.io/editor.md/examples/flowchart.html) and [Sequence Diagram](https://pandao.github.io/editor.md/examples/sequence-diagram.html) 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** 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
![editormd-screenshot](https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png "editormd-screenshot")
#### 主要特性
- 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可[变身为代码编辑器](https://pandao.github.io/editor.md/examples/change-mode.html)
- 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
- 支持 [ToCTable 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 download](https://github.com/pandao/editor.md/archive/master.zip)
Bower install :
```shell
bower install editor.md
```
#### Usages
HTML
```html
<link rel="stylesheet" href="editormd.min.css" />
<div id="editormd">
<textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
```
> Tip: Editor.md can auto append `<textarea>` tag;
javascript:
```html
<script src="jquery.min.js"></script>
<script src="editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
path : "../lib/" // Autoload modules mode, codemirror, marked... dependents libs path
});
/*
// or
var editor = editormd({
id : "editormd",
path : "../lib/"
});
*/
});
</script>
```
Using modular script loader :
- [Using Require.js](https://github.com/pandao/editor.md/tree/master/examples/use-requirejs.html)
- [Using Sea.js](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")
- [jQuery](http://jquery.com/ "jQuery")
- [FontAwesome](http://fontawesome.io/ "FontAwesome")
- [github-markdown.css](https://github.com/sindresorhus/github-markdown-css "github-markdown.css")
- [KaTeX](http://khan.github.io/KaTeX/ "KaTeX")
- [prettify.js](http://code.google.com/p/google-code-prettify/ "prettify.js")
- [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
[Change logs](https://github.com/pandao/editor.md/blob/master/CHANGE.md)
#### License
The MIT License.
Copyright (c) 2015 Pandao

View File

@ -0,0 +1,24 @@
{
"name": "editor.md",
"version": "1.5.0",
"homepage": "https://github.com/pandao/editor.md",
"authors": [
"Pandao <pandao@vip.qq.com>"
],
"description": "Open source online markdown editor.",
"keywords": [
"editor.md",
"markdown",
"editor"
],
"license": "MIT",
"ignore": [
"**/.*",
"research",
"docs",
"node_modules",
"bower_components",
"test",
"tests"
]
}

File diff suppressed because it is too large Load Diff

View File

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

View File

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

5
public/editormd/css/editormd.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 120 KiB

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 120 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 117 KiB

View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Home</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">Home</h1>
<h3> </h3>
</div>
<nav>
<h2><a href="index.html">Home</a></h2>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0</a> on Mon Jun 08 2015 01:07:40 GMT+0800 (中国标准时间)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>

View File

@ -0,0 +1,25 @@
/*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';
}
}
}
})();

View File

@ -0,0 +1,202 @@
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.

View File

@ -0,0 +1,2 @@
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"]);

View File

@ -0,0 +1,28 @@
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"}})();

View File

@ -0,0 +1,353 @@
@font-face {
font-family: 'Open Sans';
font-weight: normal;
font-style: normal;
src: url('../fonts/OpenSans-Regular-webfont.eot');
src:
local('Open Sans'),
local('OpenSans'),
url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
}
@font-face {
font-family: 'Open Sans Light';
font-weight: normal;
font-style: normal;
src: url('../fonts/OpenSans-Light-webfont.eot');
src:
local('Open Sans Light'),
local('OpenSans Light'),
url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
url('../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
}
html
{
overflow: auto;
background-color: #fff;
font-size: 14px;
}
body
{
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
color: #4d4e53;
background-color: white;
}
a, a:visited, a:active {
color: #0095dd;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header
{
display: block;
padding: 0px 4px;
}
tt, code, kbd, samp {
font-family: Consolas, Monaco, 'Andale Mono', monospace;
}
.class-description {
font-size: 130%;
line-height: 140%;
margin-bottom: 1em;
margin-top: 1em;
}
.class-description:empty {
margin: 0;
}
#main {
float: left;
width: 70%;
}
article dl {
margin-bottom: 40px;
}
section
{
display: block;
background-color: #fff;
padding: 12px 24px;
border-bottom: 1px solid #ccc;
margin-right: 30px;
}
.variation {
display: none;
}
.signature-attributes {
font-size: 60%;
color: #aaa;
font-style: italic;
font-weight: lighter;
}
nav
{
display: block;
float: right;
margin-top: 28px;
width: 30%;
box-sizing: border-box;
border-left: 1px solid #ccc;
padding-left: 16px;
}
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 ul a, nav ul a:visited, nav ul a:active {
font-family: Consolas, Monaco, 'Andale Mono', monospace;
line-height: 18px;
color: #4D4E53;
}
nav h3 {
margin-top: 12px;
}
nav li {
margin-top: 6px;
}
footer {
display: block;
padding: 6px;
margin-top: 12px;
font-style: italic;
font-size: 90%;
}
h1, h2, h3, h4 {
font-weight: 200;
margin: 0;
}
h1
{
font-family: 'Open Sans Light', sans-serif;
font-size: 48px;
letter-spacing: -2px;
margin: 12px 24px 20px;
}
h2, h3
{
font-size: 30px;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 12px;
}
h4
{
font-size: 18px;
letter-spacing: -0.33px;
margin-bottom: 12px;
color: #4d4e53;
}
h5, .container-overview .subsection-title
{
font-size: 120%;
font-weight: bold;
letter-spacing: -0.01em;
margin: 8px 0 3px 0;
}
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;
}
.clear
{
clear: both;
}
.important
{
font-weight: bold;
color: #950B02;
}
.yes-def {
text-indent: -1000px;
}
.type-signature {
color: #aaa;
}
.name, .signature {
font-family: Consolas, Monaco, 'Andale Mono', monospace;
}
.details { margin-top: 14px; border-left: 2px solid #DDD; }
.details dt { width: 120px; float: left; padding-left: 10px; padding-top: 6px; }
.details dd { margin-left: 70px; }
.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-top: 1em;
}
.code-caption
{
font-style: italic;
font-size: 107%;
margin: 0;
}
.prettyprint
{
border: 1px solid #ddd;
width: 80%;
overflow: auto;
}
.prettyprint.source {
width: inherit;
}
.prettyprint code
{
font-size: 100%;
line-height: 18px;
display: block;
padding: 4px 12px;
margin: 0;
background-color: #fff;
color: #4D4E53;
}
.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: #4D4E53;
font-family: Consolas, Monaco, 'Andale Mono', 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,
.props td.description > p:first-child
{
margin-top: 0;
padding-top: 0;
}
.params td.description > p:last-child,
.props td.description > p:last-child
{
margin-bottom: 0;
padding-bottom: 0;
}
.disabled {
color: #454545;
}

View File

@ -0,0 +1,111 @@
/* 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;
}

View File

@ -0,0 +1,132 @@
/* 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: Consolas, Monaco, 'Andale Mono', 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 {
/* */ }

File diff suppressed because it is too large Load Diff

4
public/editormd/editormd.amd.min.js vendored Normal file

File diff suppressed because one or more lines are too long

4597
public/editormd/editormd.js Normal file

File diff suppressed because it is too large Load Diff

3
public/editormd/editormd.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,135 @@
<!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 extras syntax</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">### Disable @link & email address auto link
> Editor.md default enable @link & email address auto link;
> Unsupported xxxx@xxxxx, xxxx@localhost ...
```javascript
var testEditor;
$(function() {
// You can custom @link base url.
editormd.urls.atLinkBase = "https://github.com/";
testEditor = editormd("test-editormd", {
atLink : false, // disable @link
emailLink : false, // disable email address auto link
path : '../lib/'
});
});
```
### @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 xxx.test@gmail.com;
link [@pandao](https://github.com/pandao "@pandao") &#64 xxx.test@gmail.com;
link [&#64;pandao](https://github.com/pandao "&#64;pandao")
fsdafds [Gmail](mailto:xxx.test@gmail.com) this is an incomplete item **@pandao**;
*@pandao* this is an incomplete item ___@pandao___;
<xxx.test@gmail.com>
<mailto:xxx.test@gmail.com>
Email test : [email me](mailto:test@test.com) [Gmail](mailto:xxx.test@gmail.com) dsfdfsdfsdfsdf xxx.test@gmail.com fdfsdfsdf 5956565656565@vip.qq.com
# Github: @pandao
## Github: @pandao
### Github: @tylerlong
#### Github: @tylerlong
##### Github: @tylerlong
###### Github: @tylerlong [Gmail](mailto:xxx.test@gmail.com)
- dafssdfsdaf@chjj dfsdfsdf [5956565656565@vip.qq.com](mailto:5956565656565@vip.qq.com)
- 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
-------------
http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png
http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png
http://socialpro.demo.ipandao.com/app/images/welcom-logo@4x.png
[![http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
[http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
[http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@3x.png)
![http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png](http://socialpro.demo.ipandao.com/app/images/welcom-logo@2x.png)
</textarea>
</div>
</div>
<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.urls.atLinkBase = "https://github.com/";
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
toc : true,
//atLink : false, // disable @link
//emailLink : false, // disable email address auto link
todoList : true,
path : '../lib/'
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Auto height - 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>Auto height test</h1>
</header>
<div class="btns">
<button id="append-btn">Append markdown</button>
</div>
<div id="test-editormd">
<textarea style="display:none;">### Settings
```javascript
var testEditor = editormd("test-editormd", {
autoHeight : true
});
```
</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%",
autoHeight : true,
path : "../lib/",
htmlDecode : "style,script,iframe",
tex : true,
emoji : true,
taskList : true,
flowChart : true,
sequenceDiagram : true
});
$("#append-btn").click(function(){
$.get("./test.md", function(md){
testEditor.appendMarkdown(md);
});
});
});
</script>
</body>
</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 F11 into, 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>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Code folding - 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 folding</h1>
<p>Switch code folding : 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>

View File

@ -0,0 +1,94 @@
* {
padding: 0;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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;
}
img {
border: none;
vertical-align: middle;
}
ul, ol {
/*list-style: none;*/
}
.clear {
*zoom: 1; /* for IE 6/7 */
}
.clear:before, .clear:after {
height: 0;
content: "";
font-size: 0;
display: table;
line-height: 0; /* for Opera */
visibility: hidden;
}
.clear:after {
clear: both;
}
body {
font-size: 14px;
color: #666;
font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", Helvetica, Tahoma, "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
background: #fff;
text-align: center;
}
#layout {
text-align: left;
}
#layout > header, .btns {
padding: 15px 0;
width: 90%;
margin: 0 auto;
}
.btns {
padding-top: 0;
}
.btns button {
padding: 2px 8px;
}
#layout > header > h1 {
font-size: 20px;
margin-bottom: 10px;
}
.btns button, .btn {
padding: 8px 10px;
background: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
-webkit-transition: background 300ms ease-out;
transition: background 300ms ease-out;
}
.btns button:hover, .btn:hover {
background: #f6f6f6;
}

View File

@ -0,0 +1,118 @@
<!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;">#### Default
> If Editor.md code editor is on focus, you can use keyboard shortcuts.
> Editor.md have the default keyboard shortcuts handle. Plaese open the help dialog, can see all default keyboard shortcuts.
#### Example
```javascript
var testEditor = editormd("test-editormd", {
width: "90%",
height: 720,
path : '../lib/',
disabledKeyMaps : [
"Ctrl-B", "F11", "F10" // disable some default keyboard shortcuts handle
],
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() {
var widgets = [];
testEditor = editormd("test-editormd", {
width: "90%",
height: 720,
path : '../lib/',
disabledKeyMaps : [
"Ctrl-B", "F11", "F10" // disable some default keyboard shortcuts handle
],
onchange : function() {
$("#test").remove();
var cm = this.cm;
var cursor = cm.getCursor();
//cm.replaceSelection("@");
widgets.push(cm.addWidget({line : cursor.line, ch : cursor.ch}, $("<p style='z-index:100000;background:red;color:#fff;padding:5px;' id='test'>fsdfsdfsdf</p>")[0], true));
console.log(cm.getCursor(), cm.getLine(cursor.line), cm.getLineTokens(cursor.line));
},
onload : function() {
var keyMap = {
"Ctrl-S": function(cm) {
alert("Ctrl+S");
//return false;
},
"Ctrl-A": function(cm) { // default Ctrl-A selectAll
// custom
alert("Ctrl+A");
cm.execCommand("selectAll");
},
//"Shift-2" : function(cm){
//}
};
this.cm.on("keyup", function(cm){
//$("#test").remove();
});
// 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>

View File

@ -0,0 +1,178 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>自定义工具栏 - 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>自定义工具栏</h1>
<p>Custom toolbar (icons handler)</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">### Custom toolbar
```javascript
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
toolbarIcons : function() {
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right.
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"]
},
toolbarIconsClass : {
testIcon : "fa-gears" // 指定一个FontAawsome的图标类
},
toolbarIconTexts : {
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 : {
/**
* @param {Object} cm CodeMirror对象
* @param {Object} icon 图标按钮jQuery元素对象
* @param {Object} cursor CodeMirror的光标对象可获取光标所在行和位置
* @param {String} selection 编辑器选中的文本
*/
testIcon : function(cm, icon, cursor, selection) {
//var cursor = cm.getCursor(); //获取当前光标对象同cursor参数
//var selection = cm.getSelection(); //获取当前选中的文本同selection参数
// 替换选中文本,如果没有选中文本,则直接插入
cm.replaceSelection("[" + selection + ":testIcon]");
// 如果当前没有选中的文本,将光标移到要输入的位置
if(selection === "") {
cm.setCursor(cursor.line, cursor.ch + 1);
}
// this == 当前editormd实例
console.log("testIcon =>", this, cm, icon, cursor, selection);
},
testIcon2 : function(cm, icon, cursor, selection) {
cm.replaceSelection("[" + selection + ":testIcon2](" + icon.html() + ")");
console.log("testIcon2 =>", this, icon.html());
}
},
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);
});
}
});
});
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<!-- 多语言和自定义工具栏的整合测试 -->
<script src="../languages/en.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
watch : false,
toolbarIcons : function() {
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right.
return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon", "file"]
},
// toolbarIcons : "full", // You can also use editormd.toolbarModes[name] default list, values: full, simple, mini.
toolbarIconsClass : {
testIcon : "fa-gears" // 指定一个FontAawsome的图标类
},
toolbarIconTexts : {
testIcon2 : "测试按钮Test button" // 如果没有图标则可以这样直接插入内容可以是字符串或HTML标签
},
// 用于增加自定义工具栏的功能可以直接插入HTML标签不使用默认的元素创建图标
toolbarCustomIcons : {
file : "<input type=\"file\" accept=\".md\" />",
faicon : "<i class=\"fa fa-star\" onclick=\"alert('faicon');\"></i>"
},
// 自定义工具栏按钮的事件处理
toolbarHandlers : {
/**
* @param {Object} cm CodeMirror对象
* @param {Object} icon 图标按钮jQuery元素对象
* @param {Object} cursor CodeMirror的光标对象可获取光标所在行和位置
* @param {String} selection 编辑器选中的文本
*/
testIcon : function(cm, icon, cursor, selection) {
//var cursor = cm.getCursor(); //获取当前光标对象同cursor参数
//var selection = cm.getSelection(); //获取当前选中的文本同selection参数
// 替换选中文本,如果没有选中文本,则直接插入
cm.replaceSelection("[" + selection + ":testIcon]");
// 如果当前没有选中的文本,将光标移到要输入的位置
if(selection === "") {
cm.setCursor(cursor.line, cursor.ch + 1);
}
// this == 当前editormd实例
console.log("testIcon =>", this, cm, icon, cursor, selection);
},
testIcon2 : function(cm, icon, cursor, selection) {
cm.replaceSelection("[" + selection + ":testIcon2](" + icon.html() + ")");
console.log("testIcon2 =>", this, icon.html());
}
},
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);
});
}
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,151 @@
<!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
```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>

View File

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

View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>动态创建 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>动态创建 Editor.md</h1>
<p>Dynamic create Editor.md</p>
<br/>
<div class="btns" style="margin:0;">
<button id="create-btn">动态创建一个 Editor.md</button>
<button id="remove-btn">移除 Editor.md</button>
</div>
</header>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
var testEditormd;
$(function() {
$("#create-btn").click(function(){
$.getScript("../editormd.js", function() {
$("#layout").append("<div id=\"test-editormd\"></div>");
testEditormd = editormd("test-editormd", {
width: "90%",
height: 640,
markdown : "### 动态创建 Editor.md\r\n\r\nDynamic create Editor.md",
path : '../lib/'
});
});
});
$("#remove-btn").click(function() {
testEditormd.editor.remove();
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,191 @@
<!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 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: :+1: :-1: :black_large_square: :waxing_gibbous_moon: :moon: :crescent_moon:
### 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: :fa-external-link-square:
### 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
#### Datetime test
02:21:47
2015-03-12 02:21:47
### In 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>

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.extend("methodC", function() {
console.log("methodC");
});
// or
testEditor.extend("methodA", function() {
console.log("methodA");
});
// one by one setting
this.set("propertyA", "propertyA");
this.set("methodE", function() {
console.log("mothodE", this);
});
// mutil
this.extend({
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.extend("methodC", function() {
console.log("methodC");
});
// or
testEditor.extend("methodA", function() {
console.log("methodA");
});
// one by one setting
this.set("propertyA", "propertyA");
this.set("methodE", function() {
console.log("mothodE", this);
});
// mutil
this.extend({
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>

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>

View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>FlowChart - 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>FlowChart 流程图</h1>
<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;">#### Using FlowChart
setting:
{
flowChart : true
}
#### Example
```flow
st=>start: User login
op=>operation: Operation
cond=>condition: Successful Yes or No?
e=>end: Into admin
st->op->cond
cond(yes)->e
cond(no)->op
```</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: 640,
path : '../lib/',
flowChart : true
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Form get textarea value - 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>表单取值</h1>
<p>Form get textarea value.</p>
</header>
<form method="post" action="http://editormd.ipandao.com/php/post.php">
<div id="test-editormd">
<!-- Custom textarea name attribute <textarea style="display:none;" name="test-textarea-name"> -->
<textarea style="display:none;">#### Get value
每个 Editor.md 的 ID 元素下都有一个保存 Markdown 源码的 Textarea你也可以通过设置开启另一个保存 HTML 源码的 Textarea可以按需要获取相应的值如下
```html
&lt;div class="editormd" id="$id"&gt;
&lt;textarea class="editormd-markdown-textarea" name="$id-markdown-doc"&gt;&lt;/textarea&gt;
&lt;!-- html textarea 需要开启配置项 saveHTMLToTextarea == true --&gt;
&lt;textarea class="editormd-html-textarea" name="$id-html-code"&gt;&lt;/textarea&gt;
&lt;/div&gt;
```
#### Example
```javascript
var testEditor = editormd("test-editormd", {
width : "90%",
height : 640,
path : "../lib/",
saveHTMLToTextarea : true
});
testEditor.getMarkdown(); // 获取 Markdown 源码
testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML在开启 watch 且没有开启 saveHTMLToTextarea 时使用
```
#### Backend get form value
假设编辑器 ID 为 `test-editormd`,以 PHP 为例:
```php
<?php
header("Content-Type:text/html; charset=utf-8");
if (isset($_POST['submit'])) {
echo "<pre>";
echo htmlspecialchars($_POST["test-editormd-markdown-doc"]);
echo "<br/><br/>";
echo htmlspecialchars($_POST["test-editormd-html-code"]);
echo "</pre>";
}
?>
```
</textarea>
</div>
<div style="width:90%;margin: 10px auto;">
<input type="submit" name="submit" value="提交表单 Submit" style="padding: 5px;" />
</div>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
$.get("./test.md", function(md) {
var testEditor = editormd("test-editormd", {
width : "90%",
height : 640,
path : "../lib/",
appendMarkdown : md,
saveHTMLToTextarea : true
});
});
//testEditor.getMarkdown(); // 获取 Markdown 源码
//testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码
//testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML在开启 watch 且没有开启 saveHTMLToTextarea 时使用
});
</script>
</body>
</html>

View File

@ -0,0 +1,231 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Full example - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<style>
/*.editormd-preview-theme-dark {
color: #777;
background:#2C2827;
}
.editormd-preview-theme-dark .editormd-toc-menu > .markdown-toc {
background:#fff;
border:none;
}
.editormd-preview-theme-dark .editormd-toc-menu > .markdown-toc h1{
border-color:#ddd;
}
.editormd-preview-theme-dark .markdown-body h1,
.editormd-preview-theme-dark .markdown-body h2,
.editormd-preview-theme-dark .markdown-body hr {
border-color: #222;
}
.editormd-preview-theme-dark .editormd-preview-container blockquote {
color: #555;
border-color: #333;
background: #222;
padding: 0.5em;
}
.editormd-preview-theme-dark .editormd-preview-container abbr {
background:#ff9900;
color: #fff;
padding: 1px 3px;
border-radius: 3px;
}
.editormd-preview-theme-dark .editormd-preview-container code {
background: #5A9600;
color: #fff;
border: none;
padding: 1px 3px;
border-radius: 3px;
}
.editormd-preview-theme-dark .editormd-preview-container table {
border: none;
}
.editormd-preview-theme-dark .editormd-preview-container .fa-emoji {
color: #B4BF42;
}
.editormd-preview-theme-dark .editormd-preview-container .katex {
color: #FEC93F;
}
.editormd-preview-theme-dark [class*=editormd-logo] {
color: #2196F3;
}
.editormd-preview-theme-dark .sequence-diagram text {
fill: #fff;
}
.editormd-preview-theme-dark .sequence-diagram rect,
.editormd-preview-theme-dark .sequence-diagram path {
color:#fff;
fill : #64D1CB;
stroke : #64D1CB;
}
.editormd-preview-theme-dark .flowchart rect,
.editormd-preview-theme-dark .flowchart path {
stroke : #A6C6FF;
}
.editormd-preview-theme-dark .flowchart rect {
fill: #A6C6FF;
}
.editormd-preview-theme-dark .flowchart text {
fill: #5879B4;
}*/
</style>
</head>
<body>
<div id="layout">
<header>
<h1>完整示例</h1>
<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>
<li>Enable [TOCM], Search Replace, Code fold</li>
</ul>
</header>
<div class="btns">
<button id="goto-line-btn">Goto line 90</button>
<button id="show-btn">Show editor</button>
<button id="hide-btn">Hide editor</button>
<button id="get-md-btn">Get Markdown</button>
<button id="get-html-btn">Get HTML</button>
<button id="watch-btn">Watch</button>
<button id="unwatch-btn">Unwatch</button>
<button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
<button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
<button id="show-toolbar-btn">Show toolbar</button>
<button id="close-toolbar-btn">Hide toolbar</button>
<button id="toc-menu-btn">ToC Dropdown menu</button>
<button id="toc-default-btn">ToC default</button>
</div>
<div id="test-editormd"></div>
</div>
<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/',
theme : "dark",
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析,为了安全性,默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮,默认开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持默认关闭
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);
}
});
});
$("#goto-line-btn").bind("click", function(){
testEditor.gotoLine(90);
});
$("#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();
});
$("#toc-menu-btn").click(function(){
testEditor.config({
tocDropdown : true,
tocTitle : "目录 Table of Contents",
});
});
$("#toc-default-btn").click(function() {
testEditor.config("tocDropdown", false);
});
});
</script>
</body>
</html>

View File

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

View File

@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<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="../css/editormd.preview.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<style>
body {padding: 40px;}
#layout > header, .btns {
width: auto;
}
#sidebar {
width: 400px;
height: 100%;
position: fixed;
top: 0;
right: 0;
overflow: hidden;
background: #fff;
z-index: 100;
padding: 18px;
border: 1px solid #ddd;
border-top: none;
border-bottom: none;
}
#sidebar:hover {
overflow: auto;
}
#sidebar h1 {
font-size: 16px;
}
#custom-toc-container {
padding-left: 0;
}
#test-editormd-view, #test-editormd-view2 {
padding-left: 0;
padding-right: 430px;
margin: 0;
}
</style>
</head>
<body>
<div id="layout">
<header>
<h1>Markdown转HTML的显示处理之自定义 ToC 容器</h1>
<p>非编辑情况下的HTML预览</p>
<p>HTML Preview (markdown to html and custom ToC container)</p>
</header>
<div class="btns">
<button onclick="location.href='./html-preview-markdown-to-html.html';">返回 Back</button>
</div>
<div id="sidebar">
<h1>Table of Contents</h1>
<div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
</div>
<div id="test-editormd-view">
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
</div>
<div id="test-editormd-view2">
<textarea id="append-test" style="display:none;">
###科学公式 TeX(KaTeX)
$$E=mc^2$$
行内的公式$$E=mc^2$$行内的公式,行内的$$E=mc^2$$公式。
$$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
$$X^2 > Y$$
#####上标和下标
上标X&lt;sup&gt;2&lt;/sup&gt;
下标O&lt;sub&gt;2&lt;/sub&gt;
##### 代码块里包含的过滤标签及属性不会被过滤
```html
&lt;style type="text/style"&gt;
body{background:red;}
&lt;/style&gt;
&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;
&lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&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>
</div>
</div>
<!-- <script src="js/zepto.min.js"></script>
<script>
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
</script> -->
<script src="js/jquery.min.js"></script>
<script src="../lib/marked.min.js"></script>
<script src="../lib/prettify.min.js"></script>
<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>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditormdView, testEditormdView2;
$.get("test.md", function(markdown) {
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
markdown : markdown ,//+ "\r\n" + $("#append-test").text(),
//htmlDecode : true, // 开启 HTML 标签解析,为了安全性,默认不开启
htmlDecode : "style,script,iframe", // you can filter tags decode
//toc : false,
tocm : true, // Using [TOCM]
tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
//gfm : false,
//tocDropdown : true,
// markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
//console.log("返回一个 jQuery 实例 =>", testEditormdView);
// 获取Markdown源码
//console.log(testEditormdView.getMarkdown());
//alert(testEditormdView.getMarkdown());
});
testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<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="../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%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="layout">
<header>
<h1>Markdown转HTML的显示处理</h1>
<p>非编辑情况下的HTML预览</p>
<p>HTML Preview(markdown to html)</p>
</header>
<div class="btns">
<button onclick="location.href='./html-preview-markdown-to-html-custom-toc-container.html';">将 ToC 移到自定义容器层</button>
</div>
<div id="test-editormd-view">
<textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
</div>
<div id="test-editormd-view2">
<textarea id="append-test" style="display:none;">
###科学公式 TeX(KaTeX)
$$E=mc^2$$
行内的公式$$E=mc^2$$行内的公式,行内的$$E=mc^2$$公式。
$$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
$$X^2 > Y$$
#####上标和下标
上标X&lt;sup&gt;2&lt;/sup&gt;
下标O&lt;sub&gt;2&lt;/sub&gt;
##### 代码块里包含的过滤标签及属性不会被过滤
```html
&lt;style type="text/style"&gt;
body{background:red;}
&lt;/style&gt;
&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;
&lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&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>
</div>
</div>
<!-- <script src="js/zepto.min.js"></script>
<script>
var jQuery = Zepto; // 为了避免修改flowChart.js和sequence-diagram.js的源码所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
</script> -->
<script src="js/jquery.min.js"></script>
<script src="../lib/marked.min.js"></script>
<script src="../lib/prettify.min.js"></script>
<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>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditormdView, testEditormdView2;
$.get("test.md", function(markdown) {
testEditormdView = editormd.markdownToHTML("test-editormd-view", {
markdown : markdown ,//+ "\r\n" + $("#append-test").text(),
//htmlDecode : true, // 开启 HTML 标签解析,为了安全性,默认不开启
htmlDecode : "style,script,iframe", // you can filter tags decode
//toc : false,
tocm : true, // Using [TOCM]
//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层
//gfm : false,
//tocDropdown : true,
// markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
//console.log("返回一个 jQuery 实例 =>", testEditormdView);
// 获取Markdown源码
//console.log(testEditormdView.getMarkdown());
//alert(testEditormdView.getMarkdown());
});
testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
htmlDecode : "style,script,iframe", // you can filter tags decode
emoji : true,
taskList : true,
tex : true, // 默认不解析
flowChart : true, // 默认不解析
sequenceDiagram : true, // 默认不解析
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>识别和解析 HTML 标签 - 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>识别和解析HTML标签</h1>
<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|on*"`来实现过滤指定标签及属性的解析,提高安全性;</p>
</header>
<div class="btns">
<button class="filter-btn" exp="true">Unfilter</button>
<button class="filter-btn" exp="style,script,iframe|*">Filter style,script,iframe|*</button>
<button class="filter-btn" exp="style,script,iframe|on*">Filter style,script,iframe|on*</button>
<button class="filter-btn" exp="style,script,iframe|onclick,title,onmouseover,onmouseout,style">Filter style,script,iframe|onclick,title,onmouseover,onmouseout,style</button>
</div>
<div id="test-editormd">
<textarea style="display:none;">#### 开启识别和解析 HTML 标签
配置项:
{
htmlDecode : true // Decode all html tags & attributes
// Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,...
htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
}
#### 示例
##### 上标和下标
上标X&lt;sup&gt;2&lt;/sup&gt;
下标O&lt;sub&gt;2&lt;/sub&gt;
##### 代码块里包含的过滤标签及属性不会被过滤
```html
&lt;style type="text/style"&gt;
body{background:red;}
&lt;/style&gt;
&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;
&lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&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;
##### Events
&lt;div style="color:green;" onclick="alert(1233);" title="div xxxxx"&gt;Events&lt;/div&gt;
&lt;div style="color:red;" contenteditable onclick="alert(1233);" onmouseover="alert(1233);" onmouseout="alert(1233);" title="div xxxxx"&gt;Events&lt;/div&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;
##### 插入视频
李健《最好不相见》
&lt;iframe height=498 width=510 src="http://player.youku.com/embed/XMzA0MzIwMDgw" frameborder=0 allowfullscreen&gt;&lt;/iframe&gt;</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/',
htmlDecode : true, // Decode all html tags & attributes
// Expression : tagName,tagName,...|attrName,attrName,...
//htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
});
$(".filter-btn").click(function(){
testEditor.config("htmlDecode", $(this).attr("exp"));
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>图片跨域上传示例 - 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" style="height: 2000px;background: #f6f6f6;">
<header>
<h1>图片跨域上传示例</h1>
<p>Image cross-domain upload example.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">#### Settings
```javascript
{
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "http://xxxxxxx/editor.md/examples/php/cross-domain-upload.php?test=dfdf",
crossDomainUpload : true,
uploadCallbackURL : "http://xxxxxx/upload_callback.html?test=dfdf"
}
```
#### 跨域上传原理
利用 iframe 来实现A 站 POST 到 B 站B 站处理上传后再跳转回到 A 站的 callback 页面callback 页面此时在 iframe 内(即同域下),再通过 window.parent 就可以操作父页面的任意元素了。
#### 跨域上传示例 PHP 版
当前域名blog.xxx.com/post.php
```html
&lt;form method="post" target="upload-iframe" enctype="multipart/form-data" action="http://static.xxx.com/uploader.php?callback=http://blog.xxx.com/upload-callback.html"&gt;
&lt;input type="file" name="file" accept="image/*" /&gt;
&lt;input type="submit" id="submit" value="开始上传" /&gt;
&lt;/form&gt;
&lt;iframe name="upload-iframe" style="display:none;" frameborder="0"&gt;&lt;/iframe&gt;
```
图片服务器static.xxx.com/uploader.php
```php
&lt;?php
header("Access-Control-Allow-Origin: *"); // Setting allow domian name
$file = 'uploads/' . $_FILES['file']['name'];
// 详细过程略
move_uploaded_file($_FILES['file']['tmp_name'], $file);
$location = $_GET['callback'].'?success=1&message=xxxxxxx&url=http://static.xxx.com/2015/02/15'.$file.'&temp='.date('ymdhis');
header('location:' . $location);
exit;
?&gt;
```
当前域名blog.xxx.com/upload-callback.html
```html
&lt;script type="text/javascript"&gt;
var query = {};
var urlParams = window.location.search.split('?')[1];
urlParams = urlParams.split("&");
for (var i = 0; i&lt; urlParams.length; i++) {
var param = urlParams[i].split("=");
query[param[0]] = param[1];
}
var imageDialog = window.parent.document.getElementById(query['dialog_id']);
//console.log(imageDialog, window.parent.document, window.parent, query);
&lt;/script&gt;
```</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 : 640,
markdown : "",
path : '../lib/',
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "http://www.ipandao.com/editor.md/examples/php/cross-domain-upload.php?test=dfdf",
crossDomainUpload : true,
uploadCallbackURL : "http://localhost/editor.md/examples/php/upload_callback.html?test=dfdf"
/*
跨域时,上传的图片服务器后台只需要返回一个跳转 URL 并跳转到原页面同域下的 callback 页面,结构如下:
{
success : 0 | 1, // 0 表示上传失败1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
dialog_id : $_GET['dialog_id'],
url : "远程图片地址" // 上传成功时才返回
}
*/
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>图片上传示例 - 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" style="height: 2000px;background: #f6f6f6;">
<header>
<h1>图片上传示例</h1>
<p>Image upload example</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">#### Settings
```javascript
{
imageUpload : false,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",
}
```
#### JSON data
```json
{
success : 0 | 1, // 0 表示上传失败1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
```</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: 640,
markdown : "",
path : '../lib/',
//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?test=dfdf",
/*
上传的后台只需要返回一个 JSON 数据,结构如下:
{
success : 0 | 1, // 0 表示上传失败1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
*/
});
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

View File

@ -0,0 +1,356 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>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>
#layout {
padding-bottom: 100px;
}
#header {
width: 100%;
color: #fff;
background: #2196F3;
padding: 60px 0;
text-align: center;
margin-bottom: 30px;
}
a {
color: #2196F3;
text-decoration: none;
}
#header h1 {
font-size: 45px;
font-weight: normal;
}
ul {
width: 90%;
padding-bottom:30px;
margin: 0 auto;
list-style: none;
}
ul li {
width: 24%;
margin-bottom: 4px;
display: inline-block;
}
ul li a {
color: #2196F3;
display: block;
padding: 4px 15px;
font-size: 14px;
text-align: left;
text-decoration: none;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul li a span {
color: #999;
display: block;
padding-top: 3px;
font-size: 80%;
}
ul li a:hover {
color: #fff;
background: #2196F3;
border-radius: 8px;
}
ul li a:hover span {
color: #fff;
}
.category, .footer {
width: 90%;
padding: 15px;
font-size: 18px;
margin: 15px auto 20px;
border-bottom: 1px solid #eee;
}
.footer {
border: none;
border-top: 1px solid #eee;
font-size: 12px;
margin-top: 30px;
padding-top: 35px;
text-align: right;
}
.menu {
margin-top: 20px;
text-align: center;
}
.menu a {
color: #fff;
display: inline-block;
text-decoration: none;
padding: 8px 15px;
border-radius: 5px;
-webkit-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
}
.menu a:hover {
background-color: #1A8BE8;
}
[href="#top"] {
color: #999;
float: right;
padding-top: 10px;
display: block;
text-decoration: none;
font-size: 12px;
font-weight: normal;
}
[href="#top"] .fa {
margin-left: 8px;
font-size: 1.4em;
}
</style>
</head>
<body>
<a name="top"></a>
<div id="layout">
<div id="header">
<h1><i class="editormd-logo editormd-logo-3x"></i></h1>
<h1>Editor.md Examples</h1>
<p>Open source online markdown editor.</p>
<div class="menu">
<a href="#basic">Basic</a>
<a href="#customs">自定义 Customs</a>
<a href="#markdown-extras">Markdown Extras</a>
<a href="#image-upload">Image Upload</a>
<a href="#events">事件处理 Events handle</a>
</div>
</div>
<h1 class="category"><a name="basic"></a>Basic</h1>
<ul>
<li>
<a href="./simple.html">简单示例 <span>Simple example</span></a>
</li>
<li>
<a href="./full.html">完整示例 <span>Full example</span></a>
</li>
<li>
<a href="./use-requirejs.html">使用 Require.js <span>Using Require.js</span></a>
</li>
<li>
<a href="./use-seajs.html">使用 Sea.js <span>Using Seajs</span></a>
</li>
<li>
<a href="./use-zepto.html">使用 Zepto.js <span>Using Zepto.js</span></a>
</li>
<li>
<a href="./form-get-value.html">表单取值 <span>Get textarea value in form</span></a>
</li>
<li>
<a href="./html-preview-markdown-to-html.html">非编辑时 Markdown 转 HTML 的显示处理 <span>Markdown to HTML for preview</span></a>
</li>
</ul>
<h1 class="category">
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
<a name="customs"></a>自定义 Customs
</h1>
<ul>
<li>
<a href="./custom-toolbar.html">自定义工具栏 <span>Custom toolbar</span></a>
</li>
<li>
<a href="./multi-languages.html">多语言 <span>Multi-languages for l18n</span></a>
</li>
<li>
<a href="./auto-height.html">自动高度 <span>Auto height</span></a>
</li>
<li>
<a href="./toolbar-auto-fixed.html">工具栏自动固定定位的开启与禁用 <span>Enable / disable toolbar auto fixed position.</span></a>
</li>
<li>
<a href="./dynamic-create-editormd.html">动态创建 Editor.md <span>Dynamic create Editor.md</span></a>
</li>
<li>
<a href="./delay-renderer-preview.html">延迟解析和预览 <span>Delay Rerender & Preview</span></a>
</li>
<li>
<a href="./multi-editormd.html">多个 Editor.md 并存 <span>Multi Editor.md</span></a>
</li>
<li>
<a href="./goto-line.html">跳转到指定的行 <span>Goto line</span></a>
</li>
<li>
<a href="./readonly.html">只读模式 <span>Read only mode</span></a>
</li>
<li>
<a href="./themes.html">自定义编辑器样式主题 <span>Setting / change editor style theme</span></a>
</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="./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="./sync-scrolling.html">双向、单向或禁用同步滚动 <span>Bisync, Single, Disabled sync scrolling</span></a>
<li>
<li>
<a href="./external-use.html">外部使用工具栏的操作方法和对话框 <span>External use of toolbar handlers / modal dialog</span></a>
</li>
<li>
<a href="./resettings.html">加载完成且创建成功之后的重配置 <span>loaded resettings</span></a>
</li>
<li>
<a href="./change-mode.html">变身为代码编辑器 <span>Change mode become to the code editor</span></a>
</li>
<li>
<a href="./set-get-replace-selection.html">插入字符 / 设置和获取光标位置 / 设置、获取和替换选中的文本 <span>Insert value & Set / Get cursor & Set / Get / Replace selection</span></a>
</li>
<li>
<a href="./extends.html">扩展成员方法和属性 <span>Expanded of member methods and properties</span></a>
</li>
</ul>
<h1 class="category">
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
<a name="markdown-extras"></a>Markdown Extras
</h1>
<ul>
<li>
<a href="./html-tags-decode.html">识别和(过滤)解析 HTML 标签 <span>HTML tags (fliter) decode</span></a>
</li>
<li>
<a href="./toc.html">自动生成目录(下拉菜单) ToC / ToCM <span>Table of Contents (ToC)</span></a>
</li>
<li>
<a href="./task-lists.html">GFM 任务列表 <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 / Twemoji 表情 / Font Awesome 图标 <span>Emoji / Twemoji / Font Awesome icons</span></a>
</li>
<li>
<a href="./katex.html">科学公式 TeX <span>TeX / LaTeX (Based on KaTeX)</span> </a>
</li>
<li>
<a href="./flowchart.html">流程图 <span>FlowChart example</span></a>
</li>
<li>
<a href="./sequence-diagram.html">时序图 / 序列图 <span>Sequence Diagram example</span></a>
</li>
<li>
<a href="./page-break.html">分页符 <span>Page break</span></a>
</li>
</ul>
<h1 class="category">
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
<a name="image-upload"></a>Image Upload
</h1>
<ul>
<li>
<a href="./image-upload.html">图片上传 <span>Image upload</span></a>
</li>
<li>
<a href="./image-cross-domain-upload.html">图片跨域上传 <span>Image cross-domain upload</span></a>
</li>
</ul>
<h1 class="category">
<a href="#top">TOP<i class="fa fa-angle-up"></i></a>
<a name="events"></a>事件处理 Events handle
</h1>
<ul>
<li>
<a href="./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>
<li>
<a href="./onchange.html">变化监听处理 <span>Onchange event handle example</span></a>
</li>
<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>
</ul>
<div class="clear"></div>
<div class="footer">
<p>
<a href="https://pandao.github.io/editor.md/" target="_blank" title="Editor.md">
<img src="https://pandao.github.io/editor.md/images/logos/editormd-logo-64x64.png"/>
</a>
</p>
<p>Copyright &copy; 2015 <a href="https://pandao.github.io/editor.md/" target="_blank" title="Editor.md">Editor.md</a></p>
<p>Open source online markdown editor. <a href="https://github.com/pandao/editor.md" class="fa fa-github fa-lg" target="_blank" title="Editor.md in Github"></a></p>
<p>The <a href="https://github.com/pandao/editor.md/blob/master/LICENSE" target="_blank">MIT</a> license</p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
var clickOrTouch = function(touchType) {
touchType = touchType || "touchend";
var eventType = "click";
try {
document.createEvent("TouchEvent");
eventType = touchType;
} catch(e) {}
return eventType;
};
$(function() {
$("a[href*=#]").bind(clickOrTouch(), function() {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname)
{
var hash = this.hash;
var target = $(hash);
target = target.length && target || $("[name=" + hash.slice(1) + "]");
if (target.length)
{
$("html, body").animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
});
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,36 @@
/*
RequireJS 2.1.15 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved.
Available via the MIT or new BSD license.
see: http://github.com/jrburke/requirejs for details
*/
var requirejs,require,define;
(function(ba){function G(b){return"[object Function]"===K.call(b)}function H(b){return"[object Array]"===K.call(b)}function v(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function T(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function t(b,c){return fa.call(b,c)}function m(b,c){return t(b,c)&&b[c]}function B(b,c){for(var d in b)if(t(b,d)&&c(b[d],d))break}function U(b,c,d,e){c&&B(c,function(c,g){if(d||!t(b,g))e&&"object"===typeof c&&c&&!H(c)&&!G(c)&&!(c instanceof
RegExp)?(b[g]||(b[g]={}),U(b[g],c,d,e)):b[g]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ca(b){throw b;}function da(b){if(!b)return b;var c=ba;v(b.split("."),function(b){c=c[b]});return c}function C(b,c,d,e){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=e;d&&(c.originalError=d);return c}function ga(b){function c(a,k,b){var f,l,c,d,e,g,i,p,k=k&&k.split("/"),h=j.map,n=h&&h["*"];if(a){a=a.split("/");l=a.length-1;j.nodeIdCompat&&
Q.test(a[l])&&(a[l]=a[l].replace(Q,""));"."===a[0].charAt(0)&&k&&(l=k.slice(0,k.length-1),a=l.concat(a));l=a;for(c=0;c<l.length;c++)if(d=l[c],"."===d)l.splice(c,1),c-=1;else if(".."===d&&!(0===c||1==c&&".."===l[2]||".."===l[c-1])&&0<c)l.splice(c-1,2),c-=2;a=a.join("/")}if(b&&h&&(k||n)){l=a.split("/");c=l.length;a:for(;0<c;c-=1){e=l.slice(0,c).join("/");if(k)for(d=k.length;0<d;d-=1)if(b=m(h,k.slice(0,d).join("/")))if(b=m(b,e)){f=b;g=c;break a}!i&&(n&&m(n,e))&&(i=m(n,e),p=c)}!f&&i&&(f=i,g=p);f&&(l.splice(0,
g,f),a=l.join("/"))}return(f=m(j.pkgs,a))?f:a}function d(a){z&&v(document.getElementsByTagName("script"),function(k){if(k.getAttribute("data-requiremodule")===a&&k.getAttribute("data-requirecontext")===i.contextName)return k.parentNode.removeChild(k),!0})}function e(a){var k=m(j.paths,a);if(k&&H(k)&&1<k.length)return k.shift(),i.require.undef(a),i.makeRequire(null,{skipMap:!0})([a]),!0}function n(a){var k,c=a?a.indexOf("!"):-1;-1<c&&(k=a.substring(0,c),a=a.substring(c+1,a.length));return[k,a]}function p(a,
k,b,f){var l,d,e=null,g=k?k.name:null,j=a,p=!0,h="";a||(p=!1,a="_@r"+(K+=1));a=n(a);e=a[0];a=a[1];e&&(e=c(e,g,f),d=m(r,e));a&&(e?h=d&&d.normalize?d.normalize(a,function(a){return c(a,g,f)}):-1===a.indexOf("!")?c(a,g,f):a:(h=c(a,g,f),a=n(h),e=a[0],h=a[1],b=!0,l=i.nameToUrl(h)));b=e&&!d&&!b?"_unnormalized"+(O+=1):"";return{prefix:e,name:h,parentMap:k,unnormalized:!!b,url:l,originalName:j,isDefine:p,id:(e?e+"!"+h:h)+b}}function s(a){var k=a.id,b=m(h,k);b||(b=h[k]=new i.Module(a));return b}function q(a,
k,b){var f=a.id,c=m(h,f);if(t(r,f)&&(!c||c.defineEmitComplete))"defined"===k&&b(r[f]);else if(c=s(a),c.error&&"error"===k)b(c.error);else c.on(k,b)}function w(a,b){var c=a.requireModules,f=!1;if(b)b(a);else if(v(c,function(b){if(b=m(h,b))b.error=a,b.events.error&&(f=!0,b.emit("error",a))}),!f)g.onError(a)}function x(){R.length&&(ha.apply(A,[A.length,0].concat(R)),R=[])}function y(a){delete h[a];delete V[a]}function F(a,b,c){var f=a.map.id;a.error?a.emit("error",a.error):(b[f]=!0,v(a.depMaps,function(f,
d){var e=f.id,g=m(h,e);g&&(!a.depMatched[d]&&!c[e])&&(m(b,e)?(a.defineDep(d,r[e]),a.check()):F(g,b,c))}),c[f]=!0)}function D(){var a,b,c=(a=1E3*j.waitSeconds)&&i.startTime+a<(new Date).getTime(),f=[],l=[],g=!1,h=!0;if(!W){W=!0;B(V,function(a){var i=a.map,j=i.id;if(a.enabled&&(i.isDefine||l.push(a),!a.error))if(!a.inited&&c)e(j)?g=b=!0:(f.push(j),d(j));else if(!a.inited&&(a.fetched&&i.isDefine)&&(g=!0,!i.prefix))return h=!1});if(c&&f.length)return a=C("timeout","Load timeout for modules: "+f,null,
f),a.contextName=i.contextName,w(a);h&&v(l,function(a){F(a,{},{})});if((!c||b)&&g)if((z||ea)&&!X)X=setTimeout(function(){X=0;D()},50);W=!1}}function E(a){t(r,a[0])||s(p(a[0],null,!0)).init(a[1],a[2])}function I(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function J(){var a;
for(x();A.length;){a=A.shift();if(null===a[0])return w(C("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));E(a)}}var W,Z,i,L,X,j={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},h={},V={},$={},A=[],r={},S={},aa={},K=1,O=1;L={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?r[a.map.id]=a.exports:a.exports=r[a.map.id]={}},module:function(a){return a.module?
a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m(j.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};Z=function(a){this.events=m($,a.id)||{};this.map=a;this.shim=m(j.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,f){f=f||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=
c;this.inited=!0;this.ignore=f.ignore;f.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=
this.map.url;S[a]||(S[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var f=this.exports,l=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(G(l)){if(this.events.error&&this.map.isDefine||g.onError!==ca)try{f=i.execCb(c,l,b,f)}catch(d){a=d}else f=i.execCb(c,l,b,f);this.map.isDefine&&void 0===f&&((b=this.module)?f=b.exports:this.usingExports&&
(f=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",w(this.error=a)}else f=l;this.exports=f;if(this.map.isDefine&&!this.ignore&&(r[c]=f,g.onResourceLoad))g.onResourceLoad(i,this.map,this.depMaps);y(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=
this.map,b=a.id,d=p(a.prefix);this.depMaps.push(d);q(d,"defined",u(this,function(f){var l,d;d=m(aa,this.map.id);var e=this.map.name,P=this.map.parentMap?this.map.parentMap.name:null,n=i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(f.normalize&&(e=f.normalize(e,function(a){return c(a,P,!0)})||""),f=p(a.prefix+"!"+e,this.map.parentMap),q(f,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(h,f.id)){this.depMaps.push(f);
if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else d?(this.map.url=i.nameToUrl(d),this.load()):(l=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),l.error=u(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];B(h,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&y(a.map.id)});w(a)}),l.fromText=u(this,function(f,c){var d=a.name,e=p(d),P=M;c&&(f=c);P&&(M=!1);s(e);t(j.config,b)&&(j.config[d]=j.config[b]);try{g.exec(f)}catch(h){return w(C("fromtexteval",
"fromText eval for "+b+" failed: "+h,h,[b]))}P&&(M=!0);this.depMaps.push(e);i.completeLoad(d);n([d],l)}),f.load(a.name,n,l,j))}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=this;this.enabling=this.enabled=!0;v(this.depMaps,u(this,function(a,b){var c,f;if("string"===typeof a){a=p(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(L,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;q(a,"defined",u(this,function(a){this.defineDep(b,
a);this.check()}));this.errback&&q(a,"error",u(this,this.errback))}c=a.id;f=h[c];!t(L,c)&&(f&&!f.enabled)&&i.enable(a,this)}));B(this.pluginMaps,u(this,function(a){var b=m(h,a.id);b&&!b.enabled&&i.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){v(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:j,contextName:b,registry:h,defined:r,urlFetched:S,defQueue:A,Module:Z,makeModuleMap:p,
nextTick:g.nextTick,onError:w,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=j.shim,c={paths:!0,bundles:!0,config:!0,map:!0};B(a,function(a,b){c[b]?(j[b]||(j[b]={}),U(j[b],a,!0,!0)):j[b]=a});a.bundles&&B(a.bundles,function(a,b){v(a,function(a){a!==b&&(aa[a]=b)})});a.shim&&(B(a.shim,function(a,c){H(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);b[c]=a}),j.shim=b);a.packages&&v(a.packages,function(a){var b,
a="string"===typeof a?{name:a}:a;b=a.name;a.location&&(j.paths[b]=a.location);j.pkgs[b]=a.name+"/"+(a.main||"main").replace(ia,"").replace(Q,"")});B(h,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=p(b))});if(a.deps||a.callback)i.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ba,arguments));return b||a.exports&&da(a.exports)}},makeRequire:function(a,e){function j(c,d,m){var n,q;e.enableBuildCallback&&(d&&G(d))&&(d.__requireJsBuild=
!0);if("string"===typeof c){if(G(d))return w(C("requireargs","Invalid require call"),m);if(a&&t(L,c))return L[c](h[a.id]);if(g.get)return g.get(i,c,a,j);n=p(c,a,!1,!0);n=n.id;return!t(r,n)?w(C("notloaded",'Module name "'+n+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):r[n]}J();i.nextTick(function(){J();q=s(p(null,a));q.skipMap=e.skipMap;q.init(c,d,m,{enabled:!0});D()});return j}e=e||{};U(j,{isBrowser:z,toUrl:function(b){var d,e=b.lastIndexOf("."),k=b.split("/")[0];if(-1!==
e&&(!("."===k||".."===k)||1<e))d=b.substring(e,b.length),b=b.substring(0,e);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return t(r,p(b,a,!1,!0).id)},specified:function(b){b=p(b,a,!1,!0).id;return t(r,b)||t(h,b)}});a||(j.undef=function(b){x();var c=p(b,a,!0),e=m(h,b);d(b);delete r[b];delete S[c.url];delete $[b];T(A,function(a,c){a[0]===b&&A.splice(c,1)});e&&(e.events.defined&&($[b]=e.events),y(b))});return j},enable:function(a){m(h,a.id)&&s(a).enable()},completeLoad:function(a){var b,
c,d=m(j.shim,a)||{},g=d.exports;for(x();A.length;){c=A.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(h,a);if(!b&&!t(r,a)&&c&&!c.inited){if(j.enforceDefine&&(!g||!da(g)))return e(a)?void 0:w(C("nodefine","No define call for "+a,null,[a]));E([a,d.deps||[],d.exportsFn])}D()},nameToUrl:function(a,b,c){var d,e,h;(d=m(j.pkgs,a))&&(a=d);if(d=m(aa,a))return i.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=j.paths;a=a.split("/");for(e=a.length;0<e;e-=1)if(h=a.slice(0,
e).join("/"),h=m(d,h)){H(h)&&(h=h[0]);a.splice(0,e,h);break}d=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":j.baseUrl)+d}return j.urlArgs?d+((-1===d.indexOf("?")?"?":"&")+j.urlArgs):d},load:function(a,b){g.load(i,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ja.test((a.currentTarget||a.srcElement).readyState))N=null,a=I(a),i.completeLoad(a.id)},onScriptError:function(a){var b=I(a);if(!e(b.id))return w(C("scripterror",
"Script error for: "+b.id,a,[b.id]))}};i.require=i.makeRequire();return i}var g,x,y,D,I,E,N,J,s,O,ka=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,la=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,Q=/\.js$/,ia=/^\.\//;x=Object.prototype;var K=x.toString,fa=x.hasOwnProperty,ha=Array.prototype.splice,z=!!("undefined"!==typeof window&&"undefined"!==typeof navigator&&window.document),ea=!z&&"undefined"!==typeof importScripts,ja=z&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,
Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},q={},R=[],M=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(G(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!G(require)&&(q=require,require=void 0);g=requirejs=function(b,c,d,e){var n,p="_";!H(b)&&"string"!==typeof b&&(n=b,H(c)?(b=c,c=d,d=e):b=[]);n&&n.context&&(p=n.context);(e=m(F,p))||(e=F[p]=g.s.newContext(p));n&&e.configure(n);return e.require(b,c,d)};g.config=function(b){return g(b)};
g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.1.15";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=z;x=g.s={contexts:F,newContext:ga};g({});v(["toUrl","undef","defined","specified"],function(b){g[b]=function(){var c=F._;return c.require[b].apply(c,arguments)}});if(z&&(y=x.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))y=x.head=D.parentNode;g.onError=ca;g.createNode=function(b){var c=
b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var e=b&&b.config||{};if(z)return e=g.createNode(e,c,d),e.setAttribute("data-requirecontext",b.contextName),e.setAttribute("data-requiremodule",c),e.attachEvent&&!(e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code"))&&!Y?(M=!0,e.attachEvent("onreadystatechange",b.onScriptLoad)):
(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)),e.src=d,J=e,D?y.insertBefore(e,D):y.appendChild(e),J=null,e;if(ea)try{importScripts(d),b.completeLoad(c)}catch(m){b.onError(C("importscripts","importScripts failed for "+c+" at "+d,m,[c]))}};z&&!q.skipDataMain&&T(document.getElementsByTagName("script"),function(b){y||(y=b.parentNode);if(I=b.getAttribute("data-main"))return s=I,q.baseUrl||(E=s.split("/"),s=E.pop(),O=E.length?E.join("/")+"/":"./",q.baseUrl=
O),s=s.replace(Q,""),g.jsExtRegExp.test(s)&&(s=I),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&(d=c,c=b,b=null);H(c)||(d=c,c=null);!c&&G(d)&&(c=[],d.length&&(d.toString().replace(ka,"").replace(la,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));if(M){if(!(e=J))N&&"interactive"===N.readyState||T(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b}),e=N;e&&(b||
(b=e.getAttribute("data-requiremodule")),g=F[e.getAttribute("data-requirecontext")])}(g?g.defQueue:R).push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(q)}})(this);

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,74 @@
define(function(require){
var $ = require("jquery");
var editormd = require("editormd");
require("../../src/js/languages/en"); // 加载英语语言包
console.log($, editormd);
$.get("./test.md", function(md){
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
markdown : md,
//toolbar : false, //关闭工具栏
htmlDecode : true, // 开启HTML标签解析为了安全性默认不开启
tex : true, // 开启科学公式TeX语言支持默认关闭
//previewCodeHighlight : false, // 关闭预览窗口的代码高亮,默认开启
flowChart : true, // 疑似Sea.js与Raphael.js有冲突必须先加载Raphael.jsEditor.md才能在Sea.js下正常进行
sequenceDiagram : true, // 同上
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);
}
});
});
$("#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();
});
});

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Tex 科学公式语言 (TeX/LaTeX) - 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>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;">[TOC]
#### Setting
{
tex : true
}
#### Custom KaTeX source URL
```javascript
// Default using CloudFlare KaTeX's CDN
// You can custom url
editormd.katexURL = {
js : "your url", // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
css : "your url" // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
};
```
#### Examples
##### 行内的公式 Inline
$$E=mc^2$$
Inline 行内的公式 $$E=mc^2$$ 行内的公式,行内的$$E=mc^2$$公式。
$$c = \\pm\\sqrt{a^2 + b^2}$$
$$x &gt; y$$
$$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))$$
$$\\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)$$
$$a^2$$
$$a^{2+2}$$
$$a_2$$
$${x_2}^3$$
$$x_2^3$$
$$10^{10^{8}}$$
$$a_{i,j}$$
$$_nP_k$$
$$c = \pm\sqrt{a^2 + b^2}$$
$$\frac{1}{2}=0.5$$
$$\dfrac{k}{k-1} = 0.5$$
$$\dbinom{n}{k} \binom{n}{k}$$
$$\oint_C x^3\, dx + 4y^2\, dy$$
$$\bigcap_1^n p \bigcup_1^k p$$
$$e^{i \pi} + 1 = 0$$
$$\left ( \frac{1}{2} \right )$$
$$x_{1,2}=\frac{-b\pm\sqrt{\color{Red}b^2-4ac}}{2a}$$
$${\color{Blue}x^2}+{\color{YellowOrange}2x}-{\color{OliveGreen}1}$$
$$\textstyle \sum_{k=1}^N k^2$$
$$\dfrac{ \tfrac{1}{2}[1-(\tfrac{1}{2})^n] }{ 1-\tfrac{1}{2} } = s_n$$
$$\binom{n}{k}$$
$$0+1+2+3+4+5+6+7+8+9+10+11+12+13+14+15+16+17+18+19+20+\cdots$$
$$\sum_{k=1}^N k^2$$
$$\textstyle \sum_{k=1}^N k^2$$
$$\prod_{i=1}^N x_i$$
$$\textstyle \prod_{i=1}^N x_i$$
$$\coprod_{i=1}^N x_i$$
$$\textstyle \coprod_{i=1}^N x_i$$
$$\int_{1}^{3}\frac{e^3/x}{x^2}\, dx$$
$$\int_C x^3\, dx + 4y^2\, dy$$
$${}_1^2\!\Omega_3^4$$
##### 多行公式 Multi line
> \`\`\`math or \`\`\`latex or \`\`\`katex
```math
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
```
```math
\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)
```
```math
\dfrac{
\tfrac{1}{2}[1-(\tfrac{1}{2})^n] }
{ 1-\tfrac{1}{2} } = s_n
```
```katex
\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} }
}
}
```
```latex
f(x) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi x}
\,d\xi
```
#### 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="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/',
tex : true
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,109 @@
<!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>
<p>在这种模式下,可以同步使用 Editor.md 实例的成员方法。</p>
</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;!-- Or, You can also one by one load CodeMirror modes & addons. --&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;
<!-- if setting tex == true -->
&lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css" /&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.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,
autoLoadModules : false // Manually load modules
});
testEditor.fullscreen(); // In Manually load mode, You can be synchronized using the member method.
});
&lt;/script&gt;
```
#### KaTeX test
$$E = mc^2$$
</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>
<!-- Or, You can also one by one load CodeMirror modes & addons. -->
<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>
<!-- if setting tex == true -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.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/",
tex : true,
autoLoadModules : false // Enable manually load modules
});
testEditor.fullscreen(); // This can be synchronized using the member method
});
</script>
</body>
</html>

View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Multi 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" />
<style>
h3 {
width : 90%;
margin: 0 auto 15px;
}
.editormd {
margin: 20px auto;
}
</style>
</head>
<body>
<div id="layout">
<header>
<h1>Multi Editor.md</h1>
<p>多个 Editor.md 并存</p>
<br/>
</header>
<h3>Editor.md A</h3>
<div id="test-editormd"></div>
<h3>Editor.md B</h3>
<div id="test-editormd2"></div>
<h3>Editor.md C</h3>
<div id="test-editormd3"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditormd, testEditormd2;
$(function() {
testEditormd = editormd("test-editormd", {
width: "90%",
height: 480,
markdown : "#### Editor.md A",
path : '../lib/'
});
testEditormd2 = editormd("test-editormd2", {
width: "90%",
height: 480,
markdown : "#### Editor.md B",
path : '../lib/'
});
testEditormd3 = editormd("test-editormd3", {
width: "90%",
height: 480,
markdown : "#### Editor.md C",
path : '../lib/'
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>多语言支持 - 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>多语言支持l18n</h1>
<p>multi-languages for l18n.
<select id="lang-select">
<option selected="selected">Languages</option>
<option value="en">English (en)</option>
<option value="zh-tw">繁體中文 (zh-tw)</option>
<option value="zh-cn">简体中文 (zh-cn)</option>
</select>
</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">###多语言支持l18n
目前支持三种语言简体中文、繁體中文、English默认为简体中文 (zh-cn default)。
```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;
&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
</textarea>
</div>
</div>
<script src="js/jquery.min.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() {
testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
emoji : true,
path : '../lib/'
});
//console.log(editormd.defaults.lang);
var lang = "zh-cn";
// 动态加载语言包
// Dynamic load language package
$("#lang-select").change(function() {
var value = $(this).val();
var path = "../languages/";
if (value == "zh-cn")
{
location.reload();
}
else
{
editormd.loadScript(path + value, function() {
testEditor.lang = editormd.defaults.lang;
// 只重建涉及语言包的部分,如工具栏、弹出对话框等
testEditor.recreate();
// 整个编辑器重建预览HTML会重新生成出现闪动
//testEditor = editormd("test-editormd", {
//width: "90%",
//height: 640,
//path : '../lib/'
//});
lang = value;
console.log(lang, value, editormd.defaults.lang);
});
}
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,103 @@
<!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;">#### Example
```javascript
{
onscroll : function(event) {
console.clear();
console.log("onscroll =>", this, this.id, this.settings, event);
},
onpreviewscroll : function(event) {
console.clear();
console.log("onpreviewscroll =>", this, this.id, this.settings, event);
},
onload : function() {
this.off("previewscroll"); // unbind before handle
// Override settings.onpreviewscroll
this.on("previewscroll", function(){
console.clear();
console.log("on() => Override settings.onpreviewscroll =>", this, this.id, event, (new Date).getTime());
});
// defined event bind
this.on("resize", function(){
console.clear();
console.log("onresize =>", this, this.id, event, (new Date).getTime());
});
}
}
// Or
editor.on("resize", function(){
// ...
});
editor.off("resize");
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<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,
appendMarkdown : md,
path : '../lib/',
tex : true,
htmlDecode : true,
flowChart : true,
taskList : true,
sequenceDiagram : true,
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());
});
// defined event bind
this.on("resize", function(){
console.clear();
console.log("onresize =>", this, this.id, event, (new Date).getTime());
});
}
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Onchange - 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>Onchange event</h1>
<p>Plaese press F12, open the develop tools.</p>
<p id="output"></p>
</header>
<div id="test-editormd">
<textarea style="display:none;">#### Settings
```javascript
{
onchange : function() {
console.log("onchange =>", this, this.id, this.settings, this.state);
// ....
}
}
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : '../lib/',
onchange : function() {
$("#output").html("onchange : this.id =>" + this.id + ", markdown =>" + this.getValue());
console.log("onchange =>", this, this.id, this.settings, this.state);
}
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Onfullscreen & onfullscreenExit - 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>Onfullscreen & onfullscreenExit event</h1>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">#### Setting
```javascript
{
onfullscreen : function() {
// alert("onfullscreen");
// console.log("onfullscreen =>", this, this.id, this.settings);
},
onfullscreenExit : function() {
// alert("onfullscreenExit");
// console.log("onfullscreenExit =>", this, this.id, this.settings);
}
}
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("test-editormd", {
width : "90%",
height : 720,
path : '../lib/',
onfullscreen : function() {
alert("onfullscreen");
console.log("onfullscreen =>", this, this.id, this.settings);
},
onfullscreenExit : function() {
alert("onfullscreenExit");
console.log("onfullscreenExit =>", this, this.id, this.settings);
}
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Onload - 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>Onload event</h1>
<p>Plaese press F12, open the develop tools.</p>
</header>
<div id="test-editormd">
<textarea style="display:none;">#### Setting
```javascript
{
onload : function() {
// alert("onload");
// this.setMarkdown("### onloaded");
// console.log("onload =>", this, this.id, this.settings);
}
}
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
//watch : false,
//matchWordHighlight : "onselected",
path : '../lib/',
onload : function() {
//this.watch();
//this.setMarkdown("###test onloaded");
//testEditor.setMarkdown("###Test onloaded");
alert("onloaded");
console.log("onloaded =>", this, this.id, this.settings);
}
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,55 @@
<!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" />
<style>
.editormd-preview-active {width: 80%;margin: 0 auto;}
</style>
</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;">#### Settings
```javascript
{
onpreviewing : function() {
// console.log("onpreviewing =>", this, this.id, this.settings);
// on previewing you can custom css .editormd-preview-active
},
onpreviewed : function() {
// console.log("onpreviewed =>", this, this.id, this.settings);
}
}
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
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>

View File

@ -0,0 +1,49 @@
<!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;">#### Settings
```javascript
{
onresize : function() {
// console.log("onresize =>", this, this.id, this.settings);
}
}
```
state.loaded
> bind onresize event
> window.onresize, editormd watch/unwatch/fullscreen/fullscreenExit/toolbar show|hide
> 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>

View File

@ -0,0 +1,63 @@
<!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;">#### Settings
```javascript
{
onscroll : function(event) {
// console.clear();
// console.log("onscroll =>", this, this.id, this.settings, event);
// ...
},
onpreviewscroll : function(event) {
// console.clear();
// console.log("onpreviewscroll =>", this, this.id, this.settings, event);
// ...
}
}
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<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,
appendMarkdown : 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>

View File

@ -0,0 +1,51 @@
<!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;">#### Settings
```javascript
{
onwatch : function() {
// console.log("onwatch =>", this, this.id, this.settings);
},
onunwatch : function() {
// console.log("onunwatch =>", this, this.id, this.settings);
}
}
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
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>

View File

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

View File

@ -0,0 +1,54 @@
<?php
/*
* PHP cross-domain upload demo for Editor.md
*
* @FileName: upload.php
* @Auther: Pandao
* @E-mail: pandao@vip.qq.com
* @CreateTime: 2015-02-15 19:12:11
* @UpdateTime: 2015-02-15 20:47:52
* Copyright@2015 Editor.md all right reserved.
*/
header("Content-Type:text/html; charset=utf-8");
header("Access-Control-Allow-Origin: *");
require("editormd.uploader.class.php");
error_reporting(E_ALL & ~E_NOTICE);
$path = __DIR__ . DIRECTORY_SEPARATOR;
$url = dirname($_SERVER['PHP_SELF']) . '/';
$savePath = realpath($path . '../uploads/') . DIRECTORY_SEPARATOR;
$saveURL = '//'. $_SERVER['SERVER_NAME'] . $url . '../uploads/'; // 本例是演示跨域上传所以加上$_SERVER['SERVER_NAME']
$formats = array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp')
);
$name = 'editormd-image-file'; // file input name
$callbackUrl = $_GET['callback'];
if (isset($_FILES[$name]))
{
$imageUploader = new EditorMdUploader($savePath, $saveURL, $formats['image'], false); // Ymdhis表示按日期生成文件名利用date()函数
$imageUploader->config(array(
'maxSize' => 1024, // 允许上传的最大文件大小以KB为单位默认值为1024
'cover' => true // 是否覆盖同名文件默认为true
));
$imageUploader->redirect = true;
$imageUploader->redirectURL = $callbackUrl . (empty(parse_url($callbackUrl)['query']) ? '?' : '&') . 'dialog_id=' . $_GET['dialog_id'] . '&temp=' . date('ymdhis');
if ($imageUploader->upload($name))
{
$imageUploader->message('上传成功!', 1);
}
else
{
$imageUploader->message('上传失败!', 0);
}
}
?>

View File

@ -0,0 +1,341 @@
<?php
/**
*
* Editor.md PHP简易上传类仅供演示用生产环境使用还需谨慎考虑
*
* @FileName: editormd.uploader.class.php
* @Auther: Pandao
* @E-mail: pandao@vip.qq.com
* @CreateTime: 2015-02-13 23:31:32
* @UpdateTime: 2015-06-02 15:36:23
* Copyright@2015 Editor.md all right reserved.
*/
class EditorMdUploader
{
public $files; // $_FILES数组
public $fileExit; // 文件扩展名
public $saveName; // 最终保存的文件名
public $saveURL; // 最终保存URL地址
public $savePath; // 保存本地文件路径
public $randomLength = ''; // 生成随机文件名的长度,当为日期时为日期的格式
public $randomNameType = 1; // 生成随机的形式, NULL为保留原文件名, 1生成随机字符串, 2生成日期文件名
public $formats = array( // 允许上传的文件格式
'gif', 'jpg', 'jpeg', 'png', 'bmp'
);
public $maxSize = 1024; // 最大上传文件大小单位KB
public $cover = true; // 是否覆盖同名文件, 1覆盖,0不覆盖
public $redirect = false; // 是否进行URL跳转
public $redirectURL = ""; // 上传成功或出错后要转到的URL
public $errors = array( // 错误信息
'empty' => '上传文件不能为空',
'format' =>'上传的文件格式不符合规定',
'maxsize' => '上传的文件太大',
'unwritable' => '保存目录不可写,请更改权限',
'not_exist' => '保存目录不存在',
'same_file' => '已经有相同的文件存在'
);
/**
* 构造函数,初始化对象
*
* @access public
* @param string $savePath 最终保存的本地路径
* @param string $saveURL 最终保存的URL地址
* @param string $formats 允许上传的文件格式
* @param Number $randomNameType 是否生成随机文件名及形式
* @param Intiger/string $randomLength 生成随机文件名字符的长度
* @param boolean $cover 是否覆盖相同文件
* @param Intiger $maxSize 允许最大的上传文件大小以KB为单位
* @return viod
*/
public function __construct($savePath, $saveURL, $formats, $randomNameType = 1, $randomLength = '', $cover = true, $maxSize = 1024)
{
$this->savePath = $savePath;
$this->saveURL = $saveURL;
$this->formats = $formats;
$this->maxSize = $maxSize;
$this->cover = $cover;
$this->randomNameType = $randomNameType;
$this->randomLength = $randomLength;
}
/**
* 配置参数函数
*
* @access public
* @param array $configs 配置项数组
* @return void
*/
public function config($configs)
{
foreach($configs as $key => $value)
{
$this->$key = $value;
}
}
/**
* 执行文件上传
*
* @access public
* @param string $name fileInput's name
* @return boolean 返回是否上传成功的布尔值
*/
public function upload($name)
{
if(empty($_FILES[$name]['name'])) //上传文件为空时
{
$this->message($this->errors['empty']);
return false;
}
$this->files = $_FILES[$name];
if(!file_exists($this->savePath)) //目录不存在
{
$this->message($this->errors['not_exist']);
return false;
}
if(!is_writable($this->savePath)) //目录不可写
{
$this->message($this->errors['unwritable']);
return false;
}
$this->fileExt = $this->getFileExt($this->files["name"]); //取得扩展名
$this->setSeveName();
return $this->moveFile();
}
/**
* 检查并移动上传文件
*
* @access private
* @return boolean
*/
private function moveFile()
{
$files = $this->files;
if ($this->formats != "" && !in_array($this->fileExt, $this->formats))
{
$formats = implode(',', $this->formats);
$message = "您上传的文件" . $files["name"] . "" . $this->fileExt . "格式的,系统不允许上传,您只能上传" . $formats . "格式的文件。";
$this->message($message);
return false;
}
if ($files["size"] / 1024 > $this->maxSize)
{
$message = "您上传的 " . $files["name"] . ",文件大小超出了系统限定值" . $this->maxSize . " KB不能上传。";
$this->message($message);
return false;
}
if (!$this->cover) //当不能覆盖时
{
if(file_exists($this->savePath.$this->saveName)) //有相同的文件存在
{
$this->message($this->saveName . $this->errors['same_file']);
return false;
}
}
if (!@move_uploaded_file($files["tmp_name"], iconv("utf-8", "gbk", $this->savePath . $this->saveName)))
{
switch($files["errors"])
{
case '0':
$message = "文件上传成功";
break;
case '1':
$message = "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值";
break;
case '2':
$message = "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值";
break;
case '3':
$message = "文件只有部分被上传";
break;
case '4':
$message = "没有文件被上传";
break;
case '6':
$message = "找不到临时目录";
break;
case '7':
$message = "写文件到硬盘时出错";
break;
case '8':
$message = "某个扩展停止了文件的上传";
break;
case '999':
default:
$message = "未知错误,请检查文件是否损坏、是否超大等原因。";
break;
}
$this->message($message);
return false;
}
@unlink($files["tmp_name"]); //删除临时文件
return true;
}
/**
* 生成随机文件名函数
*
* @access private
* @return string $fileName 返回生成的文件名字符串
*/
private function randomFileName()
{
if ($this->randomNameType == 1) // 生成时间格式文件名
{
date_default_timezone_set('PRC'); //设置时区
$date = date($this->randomLength);
$fileName = $date . "_" . mt_rand(10000, 99999);
}
elseif ($this->randomNameType == 2) // 生成随机字符文件名
{
$chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
$max = strlen($chars) - 1;
mt_srand((double)microtime() * 1000000);
for($i = 0; $i < $this->randomLength; $i++)
{
$fileName .= $chars[mt_rand(0, $max)];
}
}
else
{
$fileName = '';
}
return $fileName;
}
/**
* 组成最终保存的完整路径及文件名
*
* @access private
* @return void
*/
private function setSeveName()
{
$this->saveName = $this->randomFileName();
if($this->saveName == '') //如果没生成随机文件名,就保留原文件名
{
$this->saveName = $this->files['name'];
}
}
/**
* 取得保存的文件名,用于数据库存储
*
* @access public
* @return string
*/
public function getSeveName()
{
return $this->saveName;
}
/**
* 获取文件后缀名函数
*
* @access public
* @return string
*/
public function getFileExt($fileName)
{
return trim(strtolower(substr(strrchr($fileName, '.'), 1)));
}
/**
* 上传成功或出错后跳转
*
* @access public
* @param array $configs 配置项数组
* @return void
*/
public function redirect()
{
header('location: ' . $this->redirectURL);
}
/**
* 错误提示函数
*
* @access public
* @return void
*/
public function message($message, $success = 0)
{
$array = array(
'success' => $success
);
$url = $this->saveURL . $this->saveName;
// 适用于跨域上传时,跳转到中介页面等
if ($this->redirect)
{
$this->redirectURL .= "&success=" . $success . "&message=" . $message;
if ($success == 1)
{
$this->redirectURL .= '&url=' . $url;
}
$this->redirect();
}
else
{
if ($success == 1)
{
$array['url'] = $url;
}
else
{
$array['message'] = $message;
}
echo json_encode($array);
}
}
}

View File

@ -0,0 +1,18 @@
<?php
header("Content-Type:text/html; charset=utf-8");
header("Access-Control-Allow-Origin: *");
if (isset($_POST['submit'])) {
echo "<pre>";
echo htmlspecialchars($_POST["test-editormd-markdown-doc"]);
if(isset($_POST["test-editormd-html-code"])) {
echo "<br/><br/>";
echo htmlspecialchars($_POST["test-editormd-html-code"]);
}
echo "</pre>";
}
exit;
?>

View File

@ -0,0 +1,51 @@
<?php
/*
* PHP upload demo for Editor.md
*
* @FileName: upload.php
* @Auther: Pandao
* @E-mail: pandao@vip.qq.com
* @CreateTime: 2015-02-13 23:20:04
* @UpdateTime: 2015-02-14 14:52:50
* Copyright@2015 Editor.md all right reserved.
*/
//header("Content-Type:application/json; charset=utf-8"); // Unsupport IE
header("Content-Type:text/html; charset=utf-8");
header("Access-Control-Allow-Origin: *");
require("editormd.uploader.class.php");
error_reporting(E_ALL & ~E_NOTICE);
$path = __DIR__ . DIRECTORY_SEPARATOR;
$url = dirname($_SERVER['PHP_SELF']) . '/';
$savePath = realpath($path . '../uploads/') . DIRECTORY_SEPARATOR;
$saveURL = $url . '../uploads/';
$formats = array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp')
);
$name = 'editormd-image-file';
if (isset($_FILES[$name]))
{
$imageUploader = new EditorMdUploader($savePath, $saveURL, $formats['image'], false); // Ymdhis表示按日期生成文件名利用date()函数
$imageUploader->config(array(
'maxSize' => 1024, // 允许上传的最大文件大小以KB为单位默认值为1024
'cover' => true // 是否覆盖同名文件默认为true
));
if ($imageUploader->upload($name))
{
$imageUploader->message('上传成功!', 1);
}
else
{
$imageUploader->message('上传失败!', 0);
}
}
?>

View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
</head>
<body>
<!--
这是同域下的callback页面本页面在iframe内所以只要通过window.parent就能操作父窗口的元素
-->
<script type="text/javascript">
var query = {};
var urlParams = window.location.search.split('?')[1];
urlParams = urlParams.split("&");
for (var i = 0; i< urlParams.length; i++)
{
var param = urlParams[i].split("=");
query[param[0]] = param[1];
}
var imageDialog = window.parent.document.getElementById(query['dialog_id']);
if (parseInt(query['success']) === 1)
{
imageDialog.querySelector("[data-url]").value = query['url'];
}
else
{
alert(query['message']);
}
location.href = "about:blank";
</script>
</body>
</html>

View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Read only mode - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
<header>
<h1>只读模式</h1>
<p>Read only mode</p>
</header>
<div class="btns">
<button id="watch-btn">Enable watch</button>
<button id="unwatch-btn">Disable watch</button>
</div>
<div id="test-editormd" class="editormd-onlyread">
<textarea style="display:none;">#### Setting
```javascript
{
readOnly : true,
//styleActiveLine : false, // disable active line
//watch : false, // disable watch
//lineNumbers : false // hide line numbers
}
```
</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 : 540,
path : "../lib/",
//watch : false, // disable watch
readOnly : true,
styleActiveLine : false, // disable active line
//lineNumbers : false // hide line numbers
});
$("#watch-btn").click(function(){
testEditor.watch();
});
$("#unwatch-btn").click(function(){
testEditor.unwatch();
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,144 @@
<!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">
<textarea style="display:none;">#### Resetting examples
```javascript
this.config("lineNumbers", false);
this.config({
toc : false,
tex : false,
previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
flowChart : false,
sequenceDiagram : false,
dialogLockScreen : false,
dialogDraggable : false,
dialogMaskBgColor : "teal",
toolbar : true
});
this.config("onresize", function() {
console.log("onresize =&gt;", this);
});
```</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 : 740,
path : "../lib/",
appendMarkdown : "\n" + md,
saveHTMLToTextarea : true,
watch : false,
htmlDecode : true,
toolbar : false,
previewCodeHighlight : false,
tex : true,
flowChart : true,
sequenceDiagram : true,
emoji : true,
taskList : true,
onload : function() {
console.log('onload', this);
this.config("lineNumbers", false);
this.config({
toc : false,
tex : false,
toolbar : true,
previewCodeHighlight : true, // before set previewCodeHighlight == false, editor not load pretty.js, so now codes can't highlight and display line numbers.
flowChart : false,
sequenceDiagram : false,
dialogLockScreen : false,
dialogMaskOpacity : 0.5, // 设置透明遮罩层的透明度全局通用默认值为0.1
dialogDraggable : false,
dialogMaskBgColor : "#000"
});
this.config("onresize", function() {
console.log("onresize =>", this);
});
this.watch();
}
});
});
$("#show-btn").click(function(){
testEditor.show();
});
$("#hide-btn").click(function(){
testEditor.hide();
});
$("#get-md-btn").click(function(){
alert(testEditor.getMarkdown());
});
$("#get-html-btn").click(function() {
alert(testEditor.getHTML());
});
$("#watch-btn").click(function() {
testEditor.watch();
});
$("#unwatch-btn").click(function() {
testEditor.unwatch();
});
$("#preview-btn").click(function() {
testEditor.previewing();
});
$("#fullscreen-btn").click(function() {
testEditor.fullscreen();
});
$("#show-toolbar-btn").click(function() {
testEditor.showToolbar();
});
$("#close-toolbar-btn").click(function() {
testEditor.hideToolbar();
});
});
</script>
</body>
</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 // default true\n }\r\n\r\n" + md,
searchReplace : true, // default true
htmlDecode : true,
tex : true,
taskList : true,
emoji : true,
flowChart : true,
sequenceDiagram : true,
path : '../lib/'
});
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>SequenceDiagram - Editor.md examples</title>
<link rel="stylesheet" href="css/style.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>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;">#### Setting
{
sequenceDiagram : true
}
#### Syntax
```seq
.........
```
# or
```sequence
.........
```
#### Example
```seq
A->B: Message
B->C: Message
C->A: Message
```
```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```</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: 640,
path : '../lib/',
sequenceDiagram : true
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>插入字符 / 设置和获取光标位置 / 设置、获取和替换选中的文本 - 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>插入字符 / 设置和获取光标位置 / 设置、获取和替换选中的文本</h1>
<p>Insert value & Set / Get cursor & Set / Get / Replace selection</p>
<br/>
<div class="btns" style="margin:0">
<button id="btn1">设置光标位置 (line:1, ch:2)</button>
<button id="btn2">获取光标位置</button>
<button id="btn3">设置选中文本 ({line:1, ch:0}, {line:5, ch:100})</button>
<button id="btn4">获取选中文本</button>
<button id="btn5">替换选中文本为 "$$$$$$$$$"</button>
<button id="btn6">在光标处插入 "????"</button>
</div>
</header>
<div id="test-editormd">
<textarea style="display:none;">### Examples
```javascript
var testEditormd;
$(function() {
testEditormd = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/'
});
});
$("#btn1").click(function(){
testEditormd.setCursor({line:1, ch:2});
});
$("#btn2").click(function(){
console.log("getCursor =>", testEditormd.getCursor());
});
$("#btn3").click(function(){
testEditormd.setSelection({line:1, ch:0}, {line:5, ch:100});
});
$("#btn4").click(function(){
console.log("getSelection =>", testEditormd.getSelection());
});
$("#btn5").click(function(){
testEditormd.replaceSelection("$$$$$$$$$");
});
$("#btn6").click(function(){
testEditormd.insertValue("????");
});
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditormd;
$(function() {
testEditormd = editormd("test-editormd", {
width: "90%",
height: 640,
path : '../lib/'
});
$("#btn1").click(function(){
testEditormd.setCursor({line:1, ch:2});
testEditormd.focus();
});
$("#btn2").click(function(){
console.log("getCursor =>", testEditormd.getCursor());
testEditormd.focus();
});
$("#btn3").click(function(){
testEditormd.setSelection({line:1, ch:0}, {line:5, ch:100});
testEditormd.focus();
});
$("#btn4").click(function(){
console.log("getSelection =>", testEditormd.getSelection());
testEditormd.focus();
});
$("#btn5").click(function(){
testEditormd.replaceSelection("$$$$$$$$$");
testEditormd.focus();
});
$("#btn6").click(function(){
testEditormd.insertValue("????");
testEditormd.focus();
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Simple example - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
<header>
<h1>Simple example</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;">[TOC]
#### Disabled options
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
#### Editor.md directory
editor.md/
lib/
css/
scss/
tests/
fonts/
images/
plugins/
examples/
languages/
editormd.js
...
```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;
&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.min.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "../lib/"
});
/*
// or
testEditor = editormd({
id : "test-editormd",
width : "90%",
height : 640,
path : "../lib/"
});
*/
});
</script>
</body>
</html>

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