Github url

editor.md

by pandao

pandao /editor.md

The open source embeddable online markdown editor (component).

9.8K Stars 1.9K Forks Last release: about 5 years ago (v1.5.0) MIT License 149 Commits 20 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Editor.md

Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.

Features

README & Examples (English)


Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。

editormd-screenshot

主要特性

Download & install

Download:

Github download

NPM install :

npm install editor.md

Bower install :

bower install editor.md

Usages

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

If you using modular script loader:

Markdown to HTML
<link rel="stylesheet" href="editormd/css/editormd.preview.css">
<!-- Server-side output Markdown text --><textarea style="display:none;">### Hello world!</textarea>
<script src="jquery.min.js"></script><script src="editormd/editormd.js"></script><script src="editormd/lib/marked.min.js"></script><script src="editormd/lib/prettify.min.js"></script><script type="text/javascript">
    $(function() {
        var testView = 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", // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script>

See the full example: http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html

HTML to Markdown?

Sorry, Editor.md not support HTML to Markdown parsing, Maybe In the future.

Examples

https://pandao.github.io/editor.md/examples/index.html

Options

Editor.md options and default values:

{ mode : "gfm", // gfm or markdown name : "", // Form element name for post value : "", // value for CodeMirror, if mode not gfm/markdown theme : "", // Editor.md self themes, before v1.5.0 is CodeMirror theme, default empty editorTheme : "default", // Editor area, this is CodeMirror theme at v1.5.0 previewTheme : "", // Preview area theme, default empty markdown : "", // Markdown source code appendMarkdown : "", // if in init textarea value not empty, append markdown to textarea width : "100%", height : "100%", path : "./lib/", // Dependents module file directory pluginPath : "", // If this empty, default use settings.path + "../plugins/" delay : 300, // Delay parse markdown to html, Uint : ms autoLoadModules : true, // Automatic load dependent module files watch : true, placeholder : "Enjoy Markdown! coding now...", gotoLine : true, // Enable / disable goto a line codeFold : false, autoHeight : false, autoFocus : true, // Enable / disable auto focus editor left input area autoCloseTags : true, searchReplace : true, // Enable / disable (CodeMirror) search and replace function syncScrolling : true, // options: true | false | "single", default true readOnly : false, // Enable / disable readonly mode tabSize : 4, indentUnit : 4, lineNumbers : true, // Display editor line numbers lineWrapping : true, autoCloseBrackets : true, showTrailingSpace : true, matchBrackets : true, indentWithTabs : true, styleSelectedText : true, matchWordHighlight : true, // options: true, false, "onselected" styleActiveLine : true, // Highlight the current line dialogLockScreen : 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 upload
    imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL : "", // Upload url
    crossDomainUpload : false, // Enable/disable Cross-domain upload
    uploadCallbackURL : "", // Cross-domain upload callback url

    toc : true, // Table of contents
    tocm : false, // Using [TOCM], auto create ToC dropdown menu
    tocTitle : "", // for ToC dropdown menu button
    tocDropdown : false, // Enable/disable Table Of Contents dropdown menu
    tocContainer : "", // Custom Table Of Contents Container Selector
    tocStartLevel : 1, // Said from H1 to create ToC
    htmlDecode : false, // Open the HTML tag identification 
    pageBreak : true, // Enable parse page break [========]
    atLink : true, // for @link
    emailLink : true, // for email address auto link
    taskList : false, // Enable Github Flavored Markdown task lists
    emoji : false, // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);
                                           // Support FontAwesome icon emoji :fa-xxx: &gt; Using fontAwesome icon web fonts;
                                           // Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: &gt; 1~8x;
    tex : false, // TeX(LaTeX), based on KaTeX
    flowChart : false, // flowChart.js only support IE9+
    sequenceDiagram : false, // sequenceDiagram.js only support IE9+
    previewCodeHighlight : true, // Enable / disable code highlight of editor preview area

    toolbar : true, // show or hide toolbar
    toolbarAutoFixed : true, // on window scroll auto fixed position
    toolbarIcons : "full", // Toolbar icons mode, options: full, simple, mini, See `editormd.toolbarModes` property.
    toolbarTitles : {},
    toolbarHandlers : {
        ucwords : function() {
            return editormd.toolbarHandlers.ucwords;
        },
        lowercase : function() {
            return editormd.toolbarHandlers.lowercase;
        }
    },
    toolbarCustomIcons : { // using html tag create toolbar icon, unused default <a> tag.
        lowercase : "</a><a href="%5C%22javascript:;%5C%22" title='\"Lowercase\"' unselectable='\"on\"'><i class='\"fa\"' name='\"lowercase\"' style='\"font-size:24px;margin-top:'>a</i></a>",
        "ucwords" : "<a href="%5C%22javascript:;%5C%22" title='\"ucwords\"' unselectable='\"on\"'><i class='\"fa\"' name='\"ucwords\"' style='\"font-size:20px;margin-top:'>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 : {
            //...
        }
        //...
    }
}
</textarea>

Dependents

Changes

Change logs

License

The MIT License.

Copyright (c) 2015-2019 Pandao

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.