yudandan
/
myblog


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
							<!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>