jquery在线html edit,editor.md: Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked ...

Editor.md

70fb092cf3d5c4d598ae43e42b9be4f5.png

editor.md.svg

editor.md.svg

editor.md.svg

editor.md.svg

editor.md.svg

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...;

Compatible with all major browsers (IE8+), compatible Zepto.js and iPad;

Support AMD/CMD (Require.js & Sea.js) Module Loader, and Custom/define editor plugins;

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

046d2e9a7cb79dc7959649b199818c9f.png

主要特性

支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可变身为代码编辑器;

支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;

支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;

兼容主流的浏览器(IE8+)和 Zepto.js,且支持 iPad 等平板设备;

Download & install

Download:

NPM install :

npm installeditor.md

Bower install :

bower installeditor.md

Usages

Create a Markdown editor

### Hello Editor.md !

$(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

});

});

If you using modular script loader:

Markdown to HTML

### Hello world!

$(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.

});

});

HTML to Markdown?

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

Examples

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 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: > Using fontAwesome icon web fonts;

// Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 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 tag.

lowercase : "a",

"ucwords" : "Aa"

},

toolbarIconTexts : {},

lang : { // Language data, you can custom your language.

name : "zh-cn",

description : "开源在线Markdown编辑器
Open source online Markdown editor.",

tocTitle : "目录",

toolbar : {

//...

},

button: {

//...

},

dialog : {

//...

}

//...

}

}

Dependents

Changes

License

The MIT License.

Copyright (c) 2015-2019 Pandao

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值