Features

主要特性

Download & install

npm install editor.md

bower install editor.md

Usages

Create a Markdown editor

<linkrel="stylesheet"href="editor.md/css/editormd.min.css"/><divid="editor"><!-- Tips: Editor.md can auto append a `<textarea>` tag --><textareastyle="display:none;">### Hello Editor.md !</textarea></div><scriptsrc="jquery.min.js"></script><scriptsrc="editor.md/editormd.min.js"></script><scripttype="text/javascript">$(function(){vareditor=editormd("editor",{// width: "100%",// height: "100%",// markdown: "xxxx",     // dynamic set Markdown textpath :"editor.md/lib/"// Autoload modules mode, codemirror, marked... dependents libs path});});</script>

Markdown to HTML

<linkrel="stylesheet"href="editormd/css/editormd.preview.css"/><divid="test-markdown-view"><!-- Server-side output Markdown text --><textareastyle="display:none;">### Hello world!</textarea></div><scriptsrc="jquery.min.js"></script><scriptsrc="editormd/editormd.js"></script><scriptsrc="editormd/lib/marked.min.js"></script><scriptsrc="editormd/lib/prettify.min.js"></script><scripttype="text/javascript">$(function(){vartestView=editormd.markdownToHTML("test-markdown-view",{// markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text// htmlDecode : true,  // Enable / disable HTML tag encode.// htmlDecode : "style,script,iframe|on*",  // Note: If enabled, you should filter some dangerous HTML tags for website security, you can also filter trigers.});});</script>

HTML to Markdown?

Examples

Options

{mode                 :"gfm",// gfm or markdownname                 :"",// Form element name for postvalue                :"",// value for CodeMirror, if mode not gfm/markdowntheme                :"",// Editor.md self themes, before v1.5.0 is CodeMirror theme, default emptyeditorTheme          :"default",// Editor area, this is CodeMirror theme at v1.5.0previewTheme         :"",// Preview area theme, default emptymarkdown             :"",// Markdown source codeappendMarkdown       :"",// if in init textarea value not empty, append markdown to textareawidth                :"100%",height               :"100%",path                 :"./lib/",// Dependents module file directorypluginPath           :"",// If this empty, default use settings.path + "../plugins/"delay                :300,// Delay parse markdown to html, Uint : msautoLoadModules      :true,// Automatic load dependent module fileswatch                :true,placeholder          :"Enjoy Markdown! coding now...",gotoLine             :true,// Enable / disable goto a linecodeFold             :false,autoHeight           :false,autoFocus            :true,// Enable / disable auto focus editor left input areaautoCloseTags        :true,searchReplace        :true,// Enable / disable (CodeMirror) search and replace functionsyncScrolling        :true,// options: true | false | "single", default truereadOnly             :false,// Enable / disable readonly modetabSize              :4,indentUnit           :4,lineNumbers          :true,// Display editor line numberslineWrapping         :true,autoCloseBrackets    :true,showTrailingSpace    :true,matchBrackets        :true,indentWithTabs       :true,styleSelectedText    :true,matchWordHighlight   :true,// options: true, false, "onselected"styleActiveLine      :true,// Highlight the current linedialogLockScreen     :true,dialogShowMask       :true,dialogDraggable      :true,dialogMaskBgColor    :"#fff",dialogMaskOpacity    :0.1,fontSize             :"13px",saveHTMLToTextarea   :false,// If enable, Editor will create a <textarea name="{editor-id}-html-code"> tag save HTML code for form post to server-side.disabledKeyMaps      :[],onload               :function(){},onresize             :function(){},onchange             :function(){},onwatch              :null,onunwatch            :null,onpreviewing         :function(){},onpreviewed          :function(){},onfullscreen         :function(){},onfullscreenExit     :function(){},onscroll             :function(){},onpreviewscroll      :function(){},imageUpload          :false,// Enable/disable uploadimageFormats         :["jpg","jpeg","gif","png","bmp","webp"],imageUploadURL       :"",// Upload urlcrossDomainUpload    :false,// Enable/disable Cross-domain uploaduploadCallbackURL    :"",// Cross-domain upload callback urltoc                  :true,// Table of contentstocm                 :false,// Using [TOCM], auto create ToC dropdown menutocTitle             :"",// for ToC dropdown menu buttontocDropdown          :false,// Enable/disable Table Of Contents dropdown menutocContainer         :"",// Custom Table Of Contents Container SelectortocStartLevel        :1,// Said from H1 to create ToChtmlDecode           :false,// Open the HTML tag identificationpageBreak            :true,// Enable parse page break [========]atLink               :true,// for@linkemailLink            :true,// for email address auto linktaskList             :false,// Enable Github Flavored Markdown task listsemoji                :false,// :emoji: , Support Github emoji, Twitter Emoji (Twemoji);// Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;// Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;tex                  :false,// TeX(LaTeX), based on KaTeXflowChart            :false,// flowChart.js only support IE9+sequenceDiagram      :false,// sequenceDiagram.js only support IE9+previewCodeHighlight :true,// Enable / disable code highlight of editor preview areatoolbar              :true,// show or hide toolbartoolbarAutoFixed     :true,// on window scroll auto fixed positiontoolbarIcons         :"full",// Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.toolbarTitles        :{},toolbarHandlers      :{ucwords :function(){returneditormd.toolbarHandlers.ucwords;},lowercase :function(){returneditormd.toolbarHandlers.lowercase;}},toolbarCustomIcons   :{// using html tag create toolbar icon, unused default <a> tag.lowercase        :"<a href=\"#" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>","ucwords"        :"<a href=\"#" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"},toolbarIconTexts     :{},lang :{// Language data, you can custom your language.name        :"zh-cn",description :"开源在线Markdown编辑器<br/>Open source online Markdown editor.",tocTitle    :"目录",toolbar     :{//...},button:{//...},dialog :{//...}//...}}

Avoid XSS

htmlDecode : "allowScript|allowOn"

Dependents

Changes

License