|
|
/* * Editor.md * * @file editormd.js * @version v1.5.0 * @description Open source online markdown editor. * @license MIT License * @author Pandao * {@link https://github.com/pandao/editor.md}
* * @update by star7th 2020-7-1 */
; (function (factory) { 'use strict'
// 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
{ /* Require.js define replace */ } else { define(['jquery'], factory) // for Sea.js
} } else { window.editormd = factory() } }(function () { /* Require.js assignment replace */
'use strict'
var $ = (typeof (jQuery) !== 'undefined') ? jQuery : Zepto
if (typeof ($) === 'undefined') { return }
$.fn.extend({ // tag@a:plantuml
plantuml: function () { var previewContainer = $(this) previewContainer.find('pre:has(.lang-plantuml)').each(function () { var $uml = $(this) var lines = [] $uml.find('.lang-plantuml').each(function () { lines.push($(this).text()) }) var img = '<img src="' + plantuml_imgsrc(lines.join('\n')) + '"><br>' $uml.replaceWith(img) }) } })
/** * editormd * * @param {String} id 编辑器的ID * @param {Object} options 配置选项 Key/Value * @returns {Object} editormd 返回editormd对象 */
var editormd = function (id, options) { return new editormd.fn.init(id, options) }
editormd.title = editormd.$name = 'Editor.md' editormd.version = '1.5.0' editormd.homePage = 'https://pandao.github.io/editor.md/' editormd.classPrefix = 'editormd-'
editormd.toolbarModes = { full: [ 'undo', 'redo', '|', 'bold', 'del', 'italic', 'quote', 'ucwords', 'uppercase', 'lowercase', '|', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', '|', 'list-ul', 'list-ol', 'hr', '|', 'link', 'reference-link', 'image', 'code', 'preformatted-text', 'code-block', 'table', 'datetime', 'emoji', 'html-entities', 'pagebreak', '|', 'goto-line', 'watch', 'preview', 'fullscreen', 'clear', 'search', '|', 'help', 'info' ], simple: [ 'undo', 'redo', '|', 'bold', 'del', 'italic', 'quote', 'uppercase', 'lowercase', '|', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', '|', 'list-ul', 'list-ol', 'hr', '|', 'watch', 'preview', 'fullscreen', '|', 'help', 'info' ], mini: [ 'undo', 'redo', '|', 'watch', 'preview', '|', 'help', 'info' ] }
editormd.defaults = { mode: 'gfm', // gfm or markdown
name: '', // Form element name
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, codeFold: false, autoHeight: false, autoFocus: true, autoCloseTags: true, searchReplace: true, syncScrolling: true, // true | false | "single", default true
readOnly: false, tabSize: 4, indentUnit: 4, lineNumbers: true, 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, 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, imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'], imageUploadURL: '', crossDomainUpload: false, uploadCallbackURL: '',
toc: true, // Table of contents
tocm: false, // Using [TOCM], auto create ToC dropdown menu
tocTitle: '', // for ToC dropdown menu btn
tocDropdown: false, tocContainer: '', 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, mindMap: true,
toolbar: true, // show/hide toolbar
toolbarAutoFixed: true, // on window scroll auto fixed position
toolbarIcons: 'full', 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 href="javascript:;" title="Lowercase" unselectable="on"><i class="fa" name="lowercase" style="font-size:24px;margin-top: -10px;">a</i></a>', 'ucwords': '<a href="javascript:;" title="ucwords" unselectable="on"><i class="fa" name="ucwords" style="font-size:20px;margin-top: -3px;">Aa</i></a>' }, toolbarIconsClass: { undo: 'fa-undo', redo: 'fa-repeat', bold: 'fa-bold', del: 'fa-strikethrough', italic: 'fa-italic', quote: 'fa-quote-left', uppercase: 'fa-font', h1: editormd.classPrefix + 'bold', h2: editormd.classPrefix + 'bold', h3: editormd.classPrefix + 'bold', h4: editormd.classPrefix + 'bold', h5: editormd.classPrefix + 'bold', h6: editormd.classPrefix + 'bold', 'list-ul': 'fa-list-ul', 'list-ol': 'fa-list-ol', hr: 'fa-minus', link: 'fa-link', 'reference-link': 'fa-anchor', image: 'fa-picture-o', code: 'fa-code', 'preformatted-text': 'fa-file-code-o', 'code-block': 'fa-file-code-o', table: 'fa-table', datetime: 'fa-clock-o', emoji: 'fa-smile-o', 'html-entities': 'fa-copyright', pagebreak: 'fa-newspaper-o', 'goto-line': 'fa-terminal', // fa-crosshairs
watch: 'fa-eye-slash', unwatch: 'fa-eye', preview: 'fa-desktop', search: 'fa-search', fullscreen: 'fa-arrows-alt', clear: 'fa-eraser', help: 'fa-question-circle', info: 'fa-info-circle' }, toolbarIconTexts: {},
lang: { name: 'zh-cn', description: '开源在线Markdown编辑器<br/>Open source online Markdown editor.', tocTitle: '目录', toolbar: { undo: '撤销(Ctrl+Z)', redo: '重做(Ctrl+Y)', bold: '粗体', del: '删除线', italic: '斜体', quote: '引用', ucwords: '将每个单词首字母转成大写', uppercase: '将所选转换成大写', lowercase: '将所选转换成小写', h1: '标题1', h2: '标题2', h3: '标题3', h4: '标题4', h5: '标题5', h6: '标题6', 'list-ul': '无序列表', 'list-ol': '有序列表', hr: '横线', link: '链接', 'reference-link': '引用链接', image: '添加图片', code: '行内代码', 'preformatted-text': '预格式文本 / 代码块(缩进风格)', 'code-block': '代码块(多语言风格)', table: '添加表格', datetime: '日期时间', emoji: 'Emoji表情', 'html-entities': 'HTML实体字符', pagebreak: '插入分页符', 'goto-line': '跳转到行', watch: '关闭实时预览', unwatch: '开启实时预览', preview: '全窗口预览HTML(按 Shift + ESC还原)', fullscreen: '全屏(按ESC还原)', clear: '清空', search: '搜索', help: '使用帮助', info: '关于' + editormd.title }, buttons: { enter: '确定', cancel: '取消', close: '关闭' }, dialog: { link: { title: '添加链接', url: '链接地址', urlTitle: '链接标题', urlEmpty: '错误:请填写链接地址。' }, referenceLink: { title: '添加引用链接', name: '引用名称', url: '链接地址', urlId: '链接ID', urlTitle: '链接标题', nameEmpty: '错误:引用链接的名称不能为空。', idEmpty: '错误:请填写引用链接的ID。', urlEmpty: '错误:请填写引用链接的URL地址。' }, image: { title: '添加图片', url: '图片地址', link: '图片链接', alt: '图片描述', uploadButton: '本地上传', imageURLEmpty: '错误:图片地址不能为空。', uploadFileEmpty: '错误:上传的图片不能为空。', formatNotAllowed: '错误:只允许上传图片文件,允许上传的图片文件格式有:' }, preformattedText: { title: '添加预格式文本或代码块', emptyAlert: '错误:请填写预格式文本或代码的内容。' }, codeBlock: { title: '添加代码块', selectLabel: '代码语言:', selectDefaultText: '请选择代码语言', otherLanguage: '其他语言', unselectedLanguageAlert: '错误:请选择代码所属的语言类型。', codeEmptyAlert: '错误:请填写代码内容。' }, htmlEntities: { title: 'HTML 实体字符' }, help: { title: '使用帮助' } } } }
editormd.classNames = { tex: editormd.classPrefix + 'tex' }
editormd.dialogZindex = 99999
editormd.$katex = null editormd.$marked = null editormd.$CodeMirror = null editormd.$prettyPrint = null
var timer, flowchartTimer
editormd.prototype = editormd.fn = { state: { watching: false, loaded: false, preview: false, fullscreen: false },
/** * 构造函数/实例初始化 * Constructor / instance initialization * * @param {String} id 编辑器的ID * @param {Object} [options={}] 配置选项 Key/Value * @returns {editormd} 返回editormd的实例对象 */
init: function (id, options) { options = options || {}
if (typeof id === 'object') { options = id }
var _this = this var classPrefix = this.classPrefix = editormd.classPrefix var settings = this.settings = $.extend(true, editormd.defaults, options)
id = (typeof id === 'object') ? settings.id : id
var editor = this.editor = $('#' + id)
this.id = id this.lang = settings.lang
var classNames = this.classNames = { textarea: { html: classPrefix + 'html-textarea', markdown: classPrefix + 'markdown-textarea' } }
settings.pluginPath = (settings.pluginPath === '') ? settings.path + '../plugins/' : settings.pluginPath
this.state.watching = !!(settings.watch)
if (!editor.hasClass('editormd')) { editor.addClass('editormd') }
editor.css({ width: (typeof settings.width === 'number') ? settings.width + 'px' : settings.width, height: (typeof settings.height === 'number') ? settings.height + 'px' : settings.height })
if (settings.autoHeight) { editor.css('height', 'auto') }
var markdownTextarea = this.markdownTextarea = editor.children('textarea')
if (markdownTextarea.length < 1) { editor.append('<textarea></textarea>') markdownTextarea = this.markdownTextarea = editor.children('textarea') }
markdownTextarea.addClass(classNames.textarea.markdown).attr('placeholder', settings.placeholder)
if (typeof markdownTextarea.attr('name') === 'undefined' || markdownTextarea.attr('name') === '') { markdownTextarea.attr('name', (settings.name !== '') ? settings.name : id + '-markdown-doc') }
var appendElements = [ (!settings.readOnly) ? '<a href="javascript:;" class="fa fa-close ' + classPrefix + 'preview-close-btn"></a>' : '', ((settings.saveHTMLToTextarea) ? '<textarea class="' + classNames.textarea.html + '" name="' + id + '-html-code"></textarea>' : ''), '<div class="' + classPrefix + 'preview"><div class="markdown-body ' + classPrefix + 'preview-container"></div></div>', '<div class="' + classPrefix + 'container-mask" style="display:block;"></div>', '<div class="' + classPrefix + 'mask"></div>' ].join('\n')
editor.append(appendElements).addClass(classPrefix + 'vertical')
if (settings.theme !== '') { editor.addClass(classPrefix + 'theme-' + settings.theme) }
this.mask = editor.children('.' + classPrefix + 'mask') this.containerMask = editor.children('.' + classPrefix + 'container-mask')
if (settings.markdown !== '') { markdownTextarea.val(settings.markdown) }
if (settings.appendMarkdown !== '') { markdownTextarea.val(markdownTextarea.val() + settings.appendMarkdown) }
this.htmlTextarea = editor.children('.' + classNames.textarea.html) this.preview = editor.children('.' + classPrefix + 'preview') this.previewContainer = this.preview.children('.' + classPrefix + 'preview-container')
if (settings.previewTheme !== '') { this.preview.addClass(classPrefix + 'preview-theme-' + settings.previewTheme) }
if (typeof define === 'function' && define.amd) { if (typeof katex !== 'undefined') { editormd.$katex = katex }
if (settings.searchReplace && !settings.readOnly) { editormd.loadCSS(settings.path + 'codemirror/addon/dialog/dialog') editormd.loadCSS(settings.path + 'codemirror/addon/search/matchesonscrollbar') } }
if ((typeof define === 'function' && define.amd) || !settings.autoLoadModules) { if (typeof CodeMirror !== 'undefined') { editormd.$CodeMirror = CodeMirror }
if (typeof marked !== 'undefined') { editormd.$marked = marked }
this.setCodeMirror().setToolbar().loadedDisplay() } else { this.loadQueues() }
return this },
/** * 所需组件加载队列 * Required components loading queue * * @returns {editormd} 返回editormd的实例对象 */
loadQueues: function () { var _this = this var settings = this.settings var loadPath = settings.path
var loadFlowChartOrSequenceDiagram = function () { if (editormd.isIE8) { _this.loadedDisplay()
return }
if (settings.flowChart || settings.sequenceDiagram) { editormd.loadScript(loadPath + 'raphael.min', function () { editormd.loadScript(loadPath + 'underscore.min', function () { if (!settings.flowChart && settings.sequenceDiagram) { editormd.loadScript(loadPath + 'sequence-diagram.min', function () { _this.loadedDisplay() }) } else if (settings.flowChart && !settings.sequenceDiagram) { editormd.loadScript(loadPath + 'flowchart.min', function () { editormd.loadScript(loadPath + 'jquery.flowchart.min', function () { _this.loadedDisplay() }) }) } else if (settings.flowChart && settings.sequenceDiagram) { editormd.loadScript(loadPath + 'flowchart.min', function () { editormd.loadScript(loadPath + 'jquery.flowchart.min', function () { editormd.loadScript(loadPath + 'sequence-diagram.min', function () { _this.loadedDisplay() }) }) }) } }) }) } else { _this.loadedDisplay() } }
editormd.loadCSS(loadPath + 'codemirror/codemirror.min')
if (settings.searchReplace && !settings.readOnly) { editormd.loadCSS(loadPath + 'codemirror/addon/dialog/dialog') editormd.loadCSS(loadPath + 'codemirror/addon/search/matchesonscrollbar') }
if (settings.codeFold) { editormd.loadCSS(loadPath + 'codemirror/addon/fold/foldgutter') }
editormd.loadScript(loadPath + 'codemirror/codemirror.min', function () { editormd.$CodeMirror = CodeMirror
editormd.loadScript(loadPath + 'codemirror/modes.min', function () { editormd.loadScript(loadPath + 'codemirror/addons.min', function () { _this.setCodeMirror()
if (settings.mode !== 'gfm' && settings.mode !== 'markdown') { _this.loadedDisplay()
return false }
_this.setToolbar()
editormd.loadScript(loadPath + 'marked.min', function () { editormd.$marked = marked
if (settings.previewCodeHighlight) { editormd.loadScript(loadPath + 'prettify.min', function () { loadFlowChartOrSequenceDiagram() }) } else { loadFlowChartOrSequenceDiagram() } }) }) }) })
return this },
/** * 设置 Editor.md 的整体主题,主要是工具栏 * Setting Editor.md theme * * @returns {editormd} 返回editormd的实例对象 */
setTheme: function (theme) { var editor = this.editor var oldTheme = this.settings.theme var themePrefix = this.classPrefix + 'theme-'
editor.removeClass(themePrefix + oldTheme).addClass(themePrefix + theme)
this.settings.theme = theme
return this },
/** * 设置 CodeMirror(编辑区)的主题 * Setting CodeMirror (Editor area) theme * * @returns {editormd} 返回editormd的实例对象 */
setEditorTheme: function (theme) { var settings = this.settings settings.editorTheme = theme
if (theme !== 'default') { editormd.loadCSS(settings.path + 'codemirror/theme/' + settings.editorTheme) }
this.cm.setOption('theme', theme)
return this },
/** * setEditorTheme() 的别名 * setEditorTheme() alias * * @returns {editormd} 返回editormd的实例对象 */
setCodeMirrorTheme: function (theme) { this.setEditorTheme(theme)
return this },
/** * 设置 Editor.md 的主题 * Setting Editor.md theme * * @returns {editormd} 返回editormd的实例对象 */
setPreviewTheme: function (theme) { var preview = this.preview var oldTheme = this.settings.previewTheme var themePrefix = this.classPrefix + 'preview-theme-'
preview.removeClass(themePrefix + oldTheme).addClass(themePrefix + theme)
this.settings.previewTheme = theme
return this },
/** * 配置和初始化CodeMirror组件 * CodeMirror initialization * * @returns {editormd} 返回editormd的实例对象 */
setCodeMirror: function () { var settings = this.settings var editor = this.editor
if (settings.editorTheme !== 'default') { editormd.loadCSS(settings.path + 'codemirror/theme/' + settings.editorTheme) }
var codeMirrorConfig = { mode: settings.mode, theme: settings.editorTheme, tabSize: settings.tabSize, dragDrop: false, autofocus: settings.autoFocus, autoCloseTags: settings.autoCloseTags, readOnly: (settings.readOnly) ? 'nocursor' : false, indentUnit: settings.indentUnit, lineNumbers: settings.lineNumbers, lineWrapping: settings.lineWrapping, extraKeys: { 'Ctrl-Q': function (cm) { cm.foldCode(cm.getCursor()) } }, foldGutter: settings.codeFold, gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], matchBrackets: settings.matchBrackets, indentWithTabs: settings.indentWithTabs, styleActiveLine: settings.styleActiveLine, styleSelectedText: settings.styleSelectedText, autoCloseBrackets: settings.autoCloseBrackets, showTrailingSpace: settings.showTrailingSpace, highlightSelectionMatches: ((!settings.matchWordHighlight) ? false : { showToken: (settings.matchWordHighlight === 'onselected') ? false : /\w/ }) }
this.codeEditor = this.cm = editormd.$CodeMirror.fromTextArea(this.markdownTextarea[0], codeMirrorConfig) this.codeMirror = this.cmElement = editor.children('.CodeMirror')
if (settings.value !== '') { this.cm.setValue(settings.value) }
this.codeMirror.css({ fontSize: settings.fontSize, width: (!settings.watch) ? '100%' : '50%' })
if (settings.autoHeight) { this.codeMirror.css('height', 'auto') this.cm.setOption('viewportMargin', Infinity) }
if (!settings.lineNumbers) { this.codeMirror.find('.CodeMirror-gutters').css('border-right', 'none') }
return this },
/** * 获取CodeMirror的配置选项 * Get CodeMirror setting options * * @returns {Mixed} return CodeMirror setting option value */
getCodeMirrorOption: function (key) { return this.cm.getOption(key) },
/** * 配置和重配置CodeMirror的选项 * CodeMirror setting options / resettings * * @returns {editormd} 返回editormd的实例对象 */
setCodeMirrorOption: function (key, value) { this.cm.setOption(key, value)
return this },
/** * 添加 CodeMirror 键盘快捷键 * Add CodeMirror keyboard shortcuts key map * * @returns {editormd} 返回editormd的实例对象 */
addKeyMap: function (map, bottom) { this.cm.addKeyMap(map, bottom)
return this },
/** * 移除 CodeMirror 键盘快捷键 * Remove CodeMirror keyboard shortcuts key map * * @returns {editormd} 返回editormd的实例对象 */
removeKeyMap: function (map) { this.cm.removeKeyMap(map)
return this },
/** * 跳转到指定的行 * Goto CodeMirror line * * @param {String|Intiger} line line number or "first"|"last" * @returns {editormd} 返回editormd的实例对象 */
gotoLine: function (line) { var settings = this.settings
if (!settings.gotoLine) { return this }
var cm = this.cm var editor = this.editor var count = cm.lineCount() var preview = this.preview
if (typeof line === 'string') { if (line === 'last') { line = count }
if (line === 'first') { line = 1 } }
if (typeof line !== 'number') { alert('Error: The line number must be an integer.') return this }
line = parseInt(line) - 1
if (line > count) { alert('Error: The line number range 1-' + count)
return this }
cm.setCursor({ line: line, ch: 0 })
var scrollInfo = cm.getScrollInfo() var clientHeight = scrollInfo.clientHeight var coords = cm.charCoords({ line: line, ch: 0 }, 'local')
cm.scrollTo(null, (coords.top + coords.bottom - clientHeight) / 2)
if (settings.watch) { var cmScroll = this.codeMirror.find('.CodeMirror-scroll')[0] var height = $(cmScroll).height() var scrollTop = cmScroll.scrollTop var percent = (scrollTop / cmScroll.scrollHeight)
if (scrollTop === 0) { preview.scrollTop(0) } else if (scrollTop + height >= cmScroll.scrollHeight - 16) { preview.scrollTop(preview[0].scrollHeight) } else { preview.scrollTop(preview[0].scrollHeight * percent) } }
cm.focus()
return this },
/** * 扩展当前实例对象,可同时设置多个或者只设置一个 * Extend editormd instance object, can mutil setting. * * @returns {editormd} this(editormd instance object.) */
extend: function () { if (typeof arguments[1] !== 'undefined') { if (typeof arguments[1] === 'function') { arguments[1] = $.proxy(arguments[1], this) }
this[arguments[0]] = arguments[1] }
if (typeof arguments[0] === 'object' && typeof arguments[0].length === 'undefined') { $.extend(true, this, arguments[0]) }
return this },
/** * 设置或扩展当前实例对象,单个设置 * Extend editormd instance object, one by one * * @param {String|Object} key option key * @param {String|Object} value option value * @returns {editormd} this(editormd instance object.) */
set: function (key, value) { if (typeof value !== 'undefined' && typeof value === 'function') { value = $.proxy(value, this) }
this[key] = value
return this },
/** * 重新配置 * Resetting editor options * * @param {String|Object} key option key * @param {String|Object} value option value * @returns {editormd} this(editormd instance object.) */
config: function (key, value) { var settings = this.settings
if (typeof key === 'object') { settings = $.extend(true, settings, key) }
if (typeof key === 'string') { settings[key] = value }
this.settings = settings this.recreate()
return this },
/** * 注册事件处理方法 * Bind editor event handle * * @param {String} eventType event type * @param {Function} callback 回调函数 * @returns {editormd} this(editormd instance object.) */
on: function (eventType, callback) { var settings = this.settings
if (typeof settings['on' + eventType] !== 'undefined') { settings['on' + eventType] = $.proxy(callback, this) }
return this },
/** * 解除事件处理方法 * Unbind editor event handle * * @param {String} eventType event type * @returns {editormd} this(editormd instance object.) */
off: function (eventType) { var settings = this.settings
if (typeof settings['on' + eventType] !== 'undefined') { settings['on' + eventType] = function () { } }
return this },
/** * 显示工具栏 * Display toolbar * * @param {Function} [callback=function(){}] 回调函数 * @returns {editormd} 返回editormd的实例对象 */
showToolbar: function (callback) { var settings = this.settings
if (settings.readOnly) { return this }
if (settings.toolbar && (this.toolbar.length < 1 || this.toolbar.find('.' + this.classPrefix + 'menu').html() === '')) { this.setToolbar() }
settings.toolbar = true
this.toolbar.show() this.resize()
$.proxy(callback || function () { }, this)()
return this },
/** * 隐藏工具栏 * Hide toolbar * * @param {Function} [callback=function(){}] 回调函数 * @returns {editormd} this(editormd instance object.) */
hideToolbar: function (callback) { var settings = this.settings
settings.toolbar = false this.toolbar.hide() this.resize()
$.proxy(callback || function () { }, this)()
return this },
/** * 页面滚动时工具栏的固定定位 * Set toolbar in window scroll auto fixed position * * @returns {editormd} 返回editormd的实例对象 */
setToolbarAutoFixed: function (fixed) { var state = this.state var editor = this.editor var toolbar = this.toolbar var settings = this.settings
if (typeof fixed !== 'undefined') { settings.toolbarAutoFixed = fixed }
var autoFixedHandle = function () { var $window = $(window) var top = $window.scrollTop()
if (!settings.toolbarAutoFixed) { return false }
if (top - editor.offset().top > 10 && top < editor.height()) { toolbar.css({ position: 'fixed', width: editor.width() + 'px', left: ($window.width() - editor.width()) / 2 + 'px' }) } else { toolbar.css({ position: 'absolute', width: '100%', left: 0 }) } }
if (!state.fullscreen && !state.preview && settings.toolbar && settings.toolbarAutoFixed) { $(window).bind('scroll', autoFixedHandle) }
return this },
/** * 配置和初始化工具栏 * Set toolbar and Initialization * * @returns {editormd} 返回editormd的实例对象 */
setToolbar: function () { var settings = this.settings
if (settings.readOnly) { return this }
var editor = this.editor var preview = this.preview var classPrefix = this.classPrefix
var toolbar = this.toolbar = editor.children('.' + classPrefix + 'toolbar')
if (settings.toolbar && toolbar.length < 1) { var toolbarHTML = '<div class="' + classPrefix + 'toolbar"><div class="' + classPrefix + 'toolbar-container"><ul class="' + classPrefix + 'menu"></ul></div></div>'
editor.append(toolbarHTML) toolbar = this.toolbar = editor.children('.' + classPrefix + 'toolbar') }
if (!settings.toolbar) { toolbar.hide()
return this }
toolbar.show()
var icons = (typeof settings.toolbarIcons === 'function') ? settings.toolbarIcons() : ((typeof settings.toolbarIcons === 'string') ? editormd.toolbarModes[settings.toolbarIcons] : settings.toolbarIcons)
var toolbarMenu = toolbar.find('.' + this.classPrefix + 'menu'), menu = '' var pullRight = false
for (var i = 0, len = icons.length; i < len; i++) { var name = icons[i]
if (name === '||') { pullRight = true } else if (name === '|') { menu += '<li class="divider" unselectable="on">|</li>' } else { var isHeader = (/h(\d)/.test(name)) var index = name
if (name === 'watch' && !settings.watch) { index = 'unwatch' }
var title = settings.lang.toolbar[index] var iconTexts = settings.toolbarIconTexts[index] var iconClass = settings.toolbarIconsClass[index]
title = (typeof title === 'undefined') ? '' : title iconTexts = (typeof iconTexts === 'undefined') ? '' : iconTexts iconClass = (typeof iconClass === 'undefined') ? '' : iconClass
var menuItem = pullRight ? '<li class="pull-right">' : '<li>'
if (typeof settings.toolbarCustomIcons[name] !== 'undefined' && typeof settings.toolbarCustomIcons[name] !== 'function') { menuItem += settings.toolbarCustomIcons[name] } else { menuItem += '<a href="javascript:;" title="' + title + '" unselectable="on">' menuItem += '<i class="fa ' + iconClass + '" name="' + name + '" unselectable="on">' + ((isHeader) ? name.toUpperCase() : ((iconClass === '') ? iconTexts : '')) + '</i>' menuItem += '</a>' }
menuItem += '</li>'
menu = pullRight ? menuItem + menu : menu + menuItem } }
toolbarMenu.html(menu)
toolbarMenu.find('[title="Lowercase"]').attr('title', settings.lang.toolbar.lowercase) toolbarMenu.find('[title="ucwords"]').attr('title', settings.lang.toolbar.ucwords)
this.setToolbarHandler() this.setToolbarAutoFixed()
return this },
/** * 工具栏图标事件处理对象序列 * Get toolbar icons event handlers * * @param {Object} cm CodeMirror的实例对象 * @param {String} name 要获取的事件处理器名称 * @returns {Object} 返回处理对象序列 */
dialogLockScreen: function () { $.proxy(editormd.dialogLockScreen, this)()
return this },
dialogShowMask: function (dialog) { $.proxy(editormd.dialogShowMask, this)(dialog)
return this },
getToolbarHandles: function (name) { var toolbarHandlers = this.toolbarHandlers = editormd.toolbarHandlers
return (name && typeof toolbarIconHandlers[name] !== 'undefined') ? toolbarHandlers[name] : toolbarHandlers },
/** * 工具栏图标事件处理器 * Bind toolbar icons event handle * * @returns {editormd} 返回editormd的实例对象 */
setToolbarHandler: function () { var _this = this var settings = this.settings
if (!settings.toolbar || settings.readOnly) { return this }
var toolbar = this.toolbar var cm = this.cm var classPrefix = this.classPrefix var toolbarIcons = this.toolbarIcons = toolbar.find('.' + classPrefix + 'menu > li > a') var toolbarIconHandlers = this.getToolbarHandles()
toolbarIcons.bind(editormd.mouseOrTouch('click', 'touchend'), function (event) { var icon = $(this).children('.fa') var name = icon.attr('name') var cursor = cm.getCursor() var selection = cm.getSelection()
if (name === '') { return }
_this.activeIcon = icon
if (typeof toolbarIconHandlers[name] !== 'undefined') { $.proxy(toolbarIconHandlers[name], _this)(cm) } else { if (typeof settings.toolbarHandlers[name] !== 'undefined') { $.proxy(settings.toolbarHandlers[name], _this)(cm, icon, cursor, selection) } }
if (name !== 'link' && name !== 'reference-link' && name !== 'image' && name !== 'code-block' && name !== 'preformatted-text' && name !== 'watch' && name !== 'preview' && name !== 'search' && name !== 'fullscreen' && name !== 'info') { cm.focus() }
return false })
return this },
/** * 动态创建对话框 * Creating custom dialogs * * @param {Object} options 配置项键值对 Key/Value * @returns {dialog} 返回创建的dialog的jQuery实例对象 */
createDialog: function (options) { return $.proxy(editormd.createDialog, this)(options) },
/** * 创建关于Editor.md的对话框 * Create about Editor.md dialog * * @returns {editormd} 返回editormd的实例对象 */
createInfoDialog: function () { var _this = this var editor = this.editor var classPrefix = this.classPrefix
var infoDialogHTML = [ '<div class="' + classPrefix + 'dialog ' + classPrefix + 'dialog-info" style="">', '<div class="' + classPrefix + 'dialog-container">', '<h1><i class="editormd-logo editormd-logo-lg editormd-logo-color"></i> ' + editormd.title + '<small>v' + editormd.version + '</small></h1>', '<p>' + this.lang.description + '</p>', '<p style="margin: 10px 0 20px 0;"><a href="' + editormd.homePage + '" target="_blank">' + editormd.homePage + ' <i class="fa fa-external-link"></i></a></p>', '<p style="font-size: 0.85em;">Copyright © 2015 <a href="https://github.com/pandao" target="_blank" class="hover-link">Pandao</a>, The <a href="https://github.com/pandao/editor.md/blob/master/LICENSE" target="_blank" class="hover-link">MIT</a> License.</p>', '</div>', '<a href="javascript:;" class="fa fa-close ' + classPrefix + 'dialog-close"></a>', '</div>' ].join('\n')
editor.append(infoDialogHTML)
var infoDialog = this.infoDialog = editor.children('.' + classPrefix + 'dialog-info')
infoDialog.find('.' + classPrefix + 'dialog-close').bind(editormd.mouseOrTouch('click', 'touchend'), function () { _this.hideInfoDialog() })
infoDialog.css('border', (editormd.isIE8) ? '1px solid #ddd' : '').css('z-index', editormd.dialogZindex).show()
this.infoDialogPosition()
return this },
/** * 关于Editor.md对话居中定位 * Editor.md dialog position handle * * @returns {editormd} 返回editormd的实例对象 */
infoDialogPosition: function () { var infoDialog = this.infoDialog
var _infoDialogPosition = function () { infoDialog.css({ top: ($(window).height() - infoDialog.height()) / 2 + 'px', left: ($(window).width() - infoDialog.width()) / 2 + 'px' }) }
_infoDialogPosition()
$(window).resize(_infoDialogPosition)
return this },
/** * 显示关于Editor.md * Display about Editor.md dialog * * @returns {editormd} 返回editormd的实例对象 */
showInfoDialog: function () { $('html,body').css('overflow-x', 'hidden')
var _this = this var editor = this.editor var settings = this.settings var infoDialog = this.infoDialog = editor.children('.' + this.classPrefix + 'dialog-info')
if (infoDialog.length < 1) { this.createInfoDialog() }
this.lockScreen(true)
this.mask.css({ opacity: settings.dialogMaskOpacity, backgroundColor: settings.dialogMaskBgColor }).show()
infoDialog.css('z-index', editormd.dialogZindex).show()
this.infoDialogPosition()
return this },
/** * 隐藏关于Editor.md * Hide about Editor.md dialog * * @returns {editormd} 返回editormd的实例对象 */
hideInfoDialog: function () { $('html,body').css('overflow-x', '') this.infoDialog.hide() this.mask.hide() this.lockScreen(false)
return this },
/** * 锁屏 * lock screen * * @param {Boolean} lock Boolean 布尔值,是否锁屏 * @returns {editormd} 返回editormd的实例对象 */
lockScreen: function (lock) { editormd.lockScreen(lock) this.resize()
return this },
/** * 编辑器界面重建,用于动态语言包或模块加载等 * Recreate editor * * @returns {editormd} 返回editormd的实例对象 */
recreate: function () { var _this = this var editor = this.editor var settings = this.settings
this.codeMirror.remove()
this.setCodeMirror()
if (!settings.readOnly) { if (editor.find('.editormd-dialog').length > 0) { editor.find('.editormd-dialog').remove() }
if (settings.toolbar) { this.getToolbarHandles() this.setToolbar() } }
this.loadedDisplay(true)
return this },
/** * 高亮预览HTML的pre代码部分 * highlight of preview codes * * @returns {editormd} 返回editormd的实例对象 */
previewCodeHighlight: function () { var settings = this.settings var previewContainer = this.previewContainer
if (settings.previewCodeHighlight) { previewContainer.find('pre').addClass('prettyprint linenums')
if (typeof prettyPrint !== 'undefined') { prettyPrint() } }
return this },
/** * 解析TeX(KaTeX)科学公式 * TeX(KaTeX) Renderer * * @returns {editormd} 返回editormd的实例对象 */
katexRender: function () { if (timer === null) { return this }
this.previewContainer.find('.' + editormd.classNames.tex).each(function () { var tex = $(this) editormd.$katex.render(tex.text(), tex[0])
tex.find('.katex').css('font-size', '1.6em') })
return this }, /** * 解析思维导图 * * @returns {editormd} 返回editormd的实例对象 */ mindmapRender: function () { this.previewContainer.find('.mindmap').each(function () { var data = window.markmap.transform($(this).text().trim()) $(this).html('') var svgId = this.id + '-svg' $(this).append($('<svg style="width: 100%;height:500px" id="' + svgId + '"></svg>')) window.markmap.markmap('svg#' + svgId, data) })
return this },
/** * 解析和渲染流程图及时序图 * FlowChart and SequenceDiagram Renderer * * @returns {editormd} 返回editormd的实例对象 */
flowChartAndSequenceDiagramRender: function () { var $this = this var settings = this.settings var previewContainer = this.previewContainer
if (editormd.isIE8) { return this }
if (settings.flowChart) { if (flowchartTimer === null) { return this }
previewContainer.find('.flowchart').flowChart() // tag@a:plantuml
previewContainer.plantuml() }
if (settings.sequenceDiagram) { previewContainer.find('.sequence-diagram').sequenceDiagram({ theme: 'simple' }) }
var preview = $this.preview var codeMirror = $this.codeMirror var codeView = codeMirror.find('.CodeMirror-scroll')
var height = codeView.height() var scrollTop = codeView.scrollTop() var percent = (scrollTop / codeView[0].scrollHeight) var tocHeight = 0
preview.find('.markdown-toc-list').each(function () { tocHeight += $(this).height() })
var tocMenuHeight = preview.find('.editormd-toc-menu').height() tocMenuHeight = (!tocMenuHeight) ? 0 : tocMenuHeight
if (scrollTop === 0) { preview.scrollTop(0) } else if (scrollTop + height >= codeView[0].scrollHeight - 16) { preview.scrollTop(preview[0].scrollHeight) } else { preview.scrollTop((preview[0].scrollHeight + tocHeight + tocMenuHeight) * percent) }
return this },
/** * 注册键盘快捷键处理 * Register CodeMirror keyMaps (keyboard shortcuts). * * @param {Object} keyMap KeyMap key/value {"(Ctrl/Shift/Alt)-Key" : function(){}} * @returns {editormd} return this */
registerKeyMaps: function (keyMap) { var _this = this var cm = this.cm var settings = this.settings var toolbarHandlers = editormd.toolbarHandlers var disabledKeyMaps = settings.disabledKeyMaps
keyMap = keyMap || null
if (keyMap) { for (var i in keyMap) { if ($.inArray(i, disabledKeyMaps) < 0) { var map = {} map[i] = keyMap[i]
cm.addKeyMap(keyMap) } } } else { for (var k in editormd.keyMaps) { var _keyMap = editormd.keyMaps[k] var handle = (typeof _keyMap === 'string') ? $.proxy(toolbarHandlers[_keyMap], _this) : $.proxy(_keyMap, _this)
if ($.inArray(k, ['F9', 'F10', 'F11']) < 0 && $.inArray(k, disabledKeyMaps) < 0) { var _map = {} _map[k] = handle
cm.addKeyMap(_map) } }
$(window).keydown(function (event) { var keymaps = { '120': 'F9', '121': 'F10', '122': 'F11' }
if ($.inArray(keymaps[event.keyCode], disabledKeyMaps) < 0) { switch (event.keyCode) { case 120: $.proxy(toolbarHandlers['watch'], _this)() return false break
case 121: $.proxy(toolbarHandlers['preview'], _this)() return false break
case 122: $.proxy(toolbarHandlers['fullscreen'], _this)() return false break
default: break } } }) }
return this },
/** * 绑定同步滚动 * * @returns {editormd} return this */
bindScrollEvent: function () { var _this = this var preview = this.preview var settings = this.settings var codeMirror = this.codeMirror var mouseOrTouch = editormd.mouseOrTouch
if (!settings.syncScrolling) { return this }
var cmBindScroll = function () { codeMirror.find('.CodeMirror-scroll').bind(mouseOrTouch('scroll', 'touchmove'), function (event) { var height = $(this).height() var scrollTop = $(this).scrollTop() var percent = (scrollTop / $(this)[0].scrollHeight)
var tocHeight = 0
preview.find('.markdown-toc-list').each(function () { tocHeight += $(this).height() })
var tocMenuHeight = preview.find('.editormd-toc-menu').height() tocMenuHeight = (!tocMenuHeight) ? 0 : tocMenuHeight
if (scrollTop === 0) { preview.scrollTop(0) } else if (scrollTop + height >= $(this)[0].scrollHeight - 16) { preview.scrollTop(preview[0].scrollHeight) } else { preview.scrollTop((preview[0].scrollHeight + tocHeight + tocMenuHeight) * percent) }
$.proxy(settings.onscroll, _this)(event) }) }
var cmUnbindScroll = function () { codeMirror.find('.CodeMirror-scroll').unbind(mouseOrTouch('scroll', 'touchmove')) }
var previewBindScroll = function () { preview.bind(mouseOrTouch('scroll', 'touchmove'), function (event) { var height = $(this).height() var scrollTop = $(this).scrollTop() var percent = (scrollTop / $(this)[0].scrollHeight) var codeView = codeMirror.find('.CodeMirror-scroll')
if (scrollTop === 0) { codeView.scrollTop(0) } else if (scrollTop + height >= $(this)[0].scrollHeight) { codeView.scrollTop(codeView[0].scrollHeight) } else { codeView.scrollTop(codeView[0].scrollHeight * percent) }
$.proxy(settings.onpreviewscroll, _this)(event) }) }
var previewUnbindScroll = function () { preview.unbind(mouseOrTouch('scroll', 'touchmove')) }
codeMirror.bind({ mouseover: cmBindScroll, mouseout: cmUnbindScroll, touchstart: cmBindScroll, touchend: cmUnbindScroll })
if (settings.syncScrolling === 'single') { return this }
preview.bind({ mouseover: previewBindScroll, mouseout: previewUnbindScroll, touchstart: previewBindScroll, touchend: previewUnbindScroll })
return this },
bindChangeEvent: function () { var _this = this var cm = this.cm var settings = this.settings
if (!settings.syncScrolling) { return this }
cm.on('change', function (_cm, changeObj) { if (settings.watch) { _this.previewContainer.css('padding', settings.autoHeight ? '20px 20px 50px 40px' : '20px') }
timer = setTimeout(function () { clearTimeout(timer) _this.save() timer = null }, settings.delay) })
return this },
/** * 加载队列完成之后的显示处理 * Display handle of the module queues loaded after. * * @param {Boolean} recreate 是否为重建编辑器 * @returns {editormd} 返回editormd的实例对象 */
loadedDisplay: function (recreate) { recreate = recreate || false
var _this = this var editor = this.editor var preview = this.preview var settings = this.settings
this.containerMask.hide()
this.save()
if (settings.watch) { preview.show() }
editor.data('oldWidth', editor.width()).data('oldHeight', editor.height()) // 为了兼容Zepto
this.resize() this.registerKeyMaps()
$(window).resize(function () { _this.resize() })
this.bindScrollEvent().bindChangeEvent()
if (!recreate) { $.proxy(settings.onload, this)() }
this.state.loaded = true
return this },
/** * 设置编辑器的宽度 * Set editor width * * @param {Number|String} width 编辑器宽度值 * @returns {editormd} 返回editormd的实例对象 */
width: function (width) { this.editor.css('width', (typeof width === 'number') ? width + 'px' : width) this.resize()
return this },
/** * 设置编辑器的高度 * Set editor height * * @param {Number|String} height 编辑器高度值 * @returns {editormd} 返回editormd的实例对象 */
height: function (height) { this.editor.css('height', (typeof height === 'number') ? height + 'px' : height) this.resize()
return this },
/** * 调整编辑器的尺寸和布局 * Resize editor layout * * @param {Number|String} [width=null] 编辑器宽度值 * @param {Number|String} [height=null] 编辑器高度值 * @returns {editormd} 返回editormd的实例对象 */
resize: function (width, height) { width = width || null height = height || null
var state = this.state var editor = this.editor var preview = this.preview var toolbar = this.toolbar var settings = this.settings var codeMirror = this.codeMirror
if (width) { editor.css('width', (typeof width === 'number') ? width + 'px' : width) }
if (settings.autoHeight && !state.fullscreen && !state.preview) { editor.css('height', 'auto') codeMirror.css('height', 'auto') } else { if (height) { editor.css('height', (typeof height === 'number') ? height + 'px' : height) }
if (state.fullscreen) { editor.height($(window).height()) }
if (settings.toolbar && !settings.readOnly) { codeMirror.css('margin-top', toolbar.height() + 1).height(editor.height() - toolbar.height()) } else { codeMirror.css('margin-top', 0).height(editor.height()) } }
if (settings.watch) { codeMirror.width(editor.width() / 2) preview.width((!state.preview) ? editor.width() / 2 : editor.width())
this.previewContainer.css('padding', settings.autoHeight ? '20px 20px 50px 40px' : '20px')
if (settings.toolbar && !settings.readOnly) { preview.css('top', toolbar.height() + 1) } else { preview.css('top', 0) }
if (settings.autoHeight && !state.fullscreen && !state.preview) { preview.height('') } else { var previewHeight = (settings.toolbar && !settings.readOnly) ? editor.height() - toolbar.height() : editor.height()
preview.height(previewHeight) } } else { codeMirror.width(editor.width()) preview.hide() }
if (state.loaded) { $.proxy(settings.onresize, this)() }
return this },
/** * 解析和保存Markdown代码 * Parse & Saving Markdown source code * * @returns {editormd} 返回editormd的实例对象 */
save: function () { if (timer === null) { return this }
var _this = this var state = this.state var settings = this.settings var cm = this.cm var cmValue = cm.getValue() var previewContainer = this.previewContainer
if (settings.mode !== 'gfm' && settings.mode !== 'markdown') { this.markdownTextarea.val(cmValue)
return this }
var marked = editormd.$marked var markdownToC = this.markdownToC = [] var rendererOptions = this.markedRendererOptions = { toc: settings.toc, tocm: settings.tocm, tocStartLevel: settings.tocStartLevel, pageBreak: settings.pageBreak, taskList: settings.taskList, emoji: settings.emoji, tex: settings.tex, atLink: settings.atLink, // for @link
emailLink: settings.emailLink, // for mail address auto link
flowChart: settings.flowChart, sequenceDiagram: settings.sequenceDiagram, previewCodeHighlight: settings.previewCodeHighlight, mindMap: settings.mindMap }
var markedOptions = this.markedOptions = { renderer: editormd.markedRenderer(markdownToC, rendererOptions), gfm: true, tables: true, breaks: true, pedantic: false, sanitize: !(settings.htmlDecode), // 关闭忽略HTML标签,即开启识别HTML标签,默认为false
smartLists: true, smartypants: true }
marked.setOptions(markedOptions)
var newMarkdownDoc = editormd.$marked(cmValue, markedOptions)
// console.info("cmValue", cmValue, newMarkdownDoc);
newMarkdownDoc = editormd.filterHTMLTags(newMarkdownDoc, settings.htmlDecode)
// console.error("cmValue", cmValue, newMarkdownDoc);
this.markdownTextarea.text(cmValue)
cm.save()
if (settings.saveHTMLToTextarea) { this.htmlTextarea.text(newMarkdownDoc) }
if (settings.watch || (!settings.watch && state.preview)) { previewContainer.html(newMarkdownDoc)
this.previewCodeHighlight()
if (settings.toc) { var tocContainer = (settings.tocContainer === '') ? previewContainer : $(settings.tocContainer) var tocMenu = tocContainer.find('.' + this.classPrefix + 'toc-menu')
tocContainer.attr('previewContainer', (settings.tocContainer === '') ? 'true' : 'false')
if (settings.tocContainer !== '' && tocMenu.length > 0) { tocMenu.remove() }
editormd.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel)
if (settings.tocDropdown || tocContainer.find('.' + this.classPrefix + 'toc-menu').length > 0) { editormd.tocDropdownMenu(tocContainer, (settings.tocTitle !== '') ? settings.tocTitle : this.lang.tocTitle) }
if (settings.tocContainer !== '') { previewContainer.find('.markdown-toc').css('border', 'none') } }
if (settings.tex) { if (!editormd.kaTeXLoaded && settings.autoLoadModules) { editormd.loadKaTeX(function () { editormd.$katex = katex editormd.kaTeXLoaded = true _this.katexRender() }) } else { editormd.$katex = katex this.katexRender() } }
if (settings.flowChart || settings.sequenceDiagram) { flowchartTimer = setTimeout(function () { clearTimeout(flowchartTimer) _this.flowChartAndSequenceDiagramRender() flowchartTimer = null }, 10) }
if (settings.mindMap) { _this.mindmapRender() }
if (state.loaded) { $.proxy(settings.onchange, this)() } }
return this },
/** * 聚焦光标位置 * Focusing the cursor position * * @returns {editormd} 返回editormd的实例对象 */
focus: function () { this.cm.focus()
return this },
/** * 设置光标的位置 * Set cursor position * * @param {Object} cursor 要设置的光标位置键值对象,例:{line:1, ch:0} * @returns {editormd} 返回editormd的实例对象 */
setCursor: function (cursor) { this.cm.setCursor(cursor)
return this },
/** * 获取当前光标的位置 * Get the current position of the cursor * * @returns {Cursor} 返回一个光标Cursor对象 */
getCursor: function () { return this.cm.getCursor() },
/** * 设置光标选中的范围 * Set cursor selected ranges * * @param {Object} from 开始位置的光标键值对象,例:{line:1, ch:0} * @param {Object} to 结束位置的光标键值对象,例:{line:1, ch:0} * @returns {editormd} 返回editormd的实例对象 */
setSelection: function (from, to) { this.cm.setSelection(from, to)
return this },
/** * 获取光标选中的文本 * Get the texts from cursor selected * * @returns {String} 返回选中文本的字符串形式 */
getSelection: function () { return this.cm.getSelection() },
/** * 设置光标选中的文本范围 * Set the cursor selection ranges * * @param {Array} ranges cursor selection ranges array * @returns {Array} return this */
setSelections: function (ranges) { this.cm.setSelections(ranges)
return this },
/** * 获取光标选中的文本范围 * Get the cursor selection ranges * * @returns {Array} return selection ranges array */
getSelections: function () { return this.cm.getSelections() },
/** * 替换当前光标选中的文本或在当前光标处插入新字符 * Replace the text at the current cursor selected or insert a new character at the current cursor position * * @param {String} value 要插入的字符值 * @returns {editormd} 返回editormd的实例对象 */
replaceSelection: function (value) { this.cm.replaceSelection(value)
return this },
/** * 在当前光标处插入新字符 * Insert a new character at the current cursor position * * 同replaceSelection()方法 * With the replaceSelection() method * * @param {String} value 要插入的字符值 * @returns {editormd} 返回editormd的实例对象 */
insertValue: function (value) { this.replaceSelection(value)
return this },
/** * 追加markdown * append Markdown to editor * * @param {String} md 要追加的markdown源文档 * @returns {editormd} 返回editormd的实例对象 */
appendMarkdown: function (md) { var settings = this.settings var cm = this.cm
cm.setValue(cm.getValue() + md)
return this },
/** * 设置和传入编辑器的markdown源文档 * Set Markdown source document * * @param {String} md 要传入的markdown源文档 * @returns {editormd} 返回editormd的实例对象 */
setMarkdown: function (md) { this.cm.setValue(md || this.settings.markdown)
return this },
/** * 获取编辑器的markdown源文档 * Set Editor.md markdown/CodeMirror value * * @returns {editormd} 返回editormd的实例对象 */
getMarkdown: function () { return this.cm.getValue() },
/** * 获取编辑器的源文档 * Get CodeMirror value * * @returns {editormd} 返回editormd的实例对象 */
getValue: function () { return this.cm.getValue() },
/** * 设置编辑器的源文档 * Set CodeMirror value * * @param {String} value set code/value/string/text * @returns {editormd} 返回editormd的实例对象 */
setValue: function (value) { this.cm.setValue(value)
return this },
/** * 清空编辑器 * Empty CodeMirror editor container * * @returns {editormd} 返回editormd的实例对象 */
clear: function () { this.cm.setValue('')
return this },
/** * 获取解析后存放在Textarea的HTML源码 * Get parsed html code from Textarea * * @returns {String} 返回HTML源码 */
getHTML: function () { if (!this.settings.saveHTMLToTextarea) { alert('Error: settings.saveHTMLToTextarea == false')
return false }
return this.htmlTextarea.val() },
/** * getHTML()的别名 * getHTML (alias) * * @returns {String} Return html code 返回HTML源码 */
getTextareaSavedHTML: function () { return this.getHTML() },
/** * 获取预览窗口的HTML源码 * Get html from preview container * * @returns {editormd} 返回editormd的实例对象 */
getPreviewedHTML: function () { if (!this.settings.watch) { alert('Error: settings.watch == false')
return false }
return this.previewContainer.html() },
/** * 开启实时预览 * Enable real-time watching * * @returns {editormd} 返回editormd的实例对象 */
watch: function (callback) { var settings = this.settings
if ($.inArray(settings.mode, ['gfm', 'markdown']) < 0) { return this }
this.state.watching = settings.watch = true this.preview.show()
if (this.toolbar) { var watchIcon = settings.toolbarIconsClass.watch var unWatchIcon = settings.toolbarIconsClass.unwatch
var icon = this.toolbar.find('.fa[name=watch]') icon.parent().attr('title', settings.lang.toolbar.watch) icon.removeClass(unWatchIcon).addClass(watchIcon) }
this.codeMirror.css('border-right', '1px solid #ddd').width(this.editor.width() / 2)
timer = 0
this.save().resize()
if (!settings.onwatch) { settings.onwatch = callback || function () { } }
$.proxy(settings.onwatch, this)()
return this },
/** * 关闭实时预览 * Disable real-time watching * * @returns {editormd} 返回editormd的实例对象 */
unwatch: function (callback) { var settings = this.settings this.state.watching = settings.watch = false this.preview.hide()
if (this.toolbar) { var watchIcon = settings.toolbarIconsClass.watch var unWatchIcon = settings.toolbarIconsClass.unwatch
var icon = this.toolbar.find('.fa[name=watch]') icon.parent().attr('title', settings.lang.toolbar.unwatch) icon.removeClass(watchIcon).addClass(unWatchIcon) }
this.codeMirror.css('border-right', 'none').width(this.editor.width())
this.resize()
if (!settings.onunwatch) { settings.onunwatch = callback || function () { } }
$.proxy(settings.onunwatch, this)()
return this },
/** * 显示编辑器 * Show editor * * @param {Function} [callback=function()] 回调函数 * @returns {editormd} 返回editormd的实例对象 */
show: function (callback) { callback = callback || function () { }
var _this = this this.editor.show(0, function () { $.proxy(callback, _this)() })
return this },
/** * 隐藏编辑器 * Hide editor * * @param {Function} [callback=function()] 回调函数 * @returns {editormd} 返回editormd的实例对象 */
hide: function (callback) { callback = callback || function () { }
var _this = this this.editor.hide(0, function () { $.proxy(callback, _this)() })
return this },
/** * 隐藏编辑器部分,只预览HTML * Enter preview html state * * @returns {editormd} 返回editormd的实例对象 */
previewing: function () { var _this = this var editor = this.editor var preview = this.preview var toolbar = this.toolbar var settings = this.settings var codeMirror = this.codeMirror var previewContainer = this.previewContainer
if ($.inArray(settings.mode, ['gfm', 'markdown']) < 0) { return this }
if (settings.toolbar && toolbar) { toolbar.toggle() toolbar.find('.fa[name=preview]').toggleClass('active') }
codeMirror.toggle()
var escHandle = function (event) { if (event.shiftKey && event.keyCode === 27) { _this.previewed() } }
if (codeMirror.css('display') === 'none') // 为了兼容Zepto,而不使用codeMirror.is(":hidden")
{ this.state.preview = true
if (this.state.fullscreen) { preview.css('background', '#fff') }
editor.find('.' + this.classPrefix + 'preview-close-btn').show().bind(editormd.mouseOrTouch('click', 'touchend'), function () { _this.previewed() })
if (!settings.watch) { this.save() } else { previewContainer.css('padding', '') }
previewContainer.addClass(this.classPrefix + 'preview-active')
preview.show().css({ position: '', top: 0, width: editor.width(), height: (settings.autoHeight && !this.state.fullscreen) ? 'auto' : editor.height() })
if (this.state.loaded) { $.proxy(settings.onpreviewing, this)() }
$(window).bind('keyup', escHandle) } else { $(window).unbind('keyup', escHandle) this.previewed() } },
/** * 显示编辑器部分,退出只预览HTML * Exit preview html state * * @returns {editormd} 返回editormd的实例对象 */
previewed: function () { var editor = this.editor var preview = this.preview var toolbar = this.toolbar var settings = this.settings var previewContainer = this.previewContainer var previewCloseBtn = editor.find('.' + this.classPrefix + 'preview-close-btn')
this.state.preview = false
this.codeMirror.show()
if (settings.toolbar) { toolbar.show() }
preview[(settings.watch) ? 'show' : 'hide']()
previewCloseBtn.hide().unbind(editormd.mouseOrTouch('click', 'touchend'))
previewContainer.removeClass(this.classPrefix + 'preview-active')
if (settings.watch) { previewContainer.css('padding', '20px') }
preview.css({ background: null, position: 'absolute', width: editor.width() / 2, height: (settings.autoHeight && !this.state.fullscreen) ? 'auto' : editor.height() - toolbar.height(), top: (settings.toolbar) ? toolbar.height() : 0 })
if (this.state.loaded) { $.proxy(settings.onpreviewed, this)() }
return this },
/** * 编辑器全屏显示 * Fullscreen show * * @returns {editormd} 返回editormd的实例对象 */
fullscreen: function () { var _this = this var state = this.state var editor = this.editor var preview = this.preview var toolbar = this.toolbar var settings = this.settings var fullscreenClass = this.classPrefix + 'fullscreen'
if (toolbar) { toolbar.find('.fa[name=fullscreen]').parent().toggleClass('active') }
var escHandle = function (event) { if (!event.shiftKey && event.keyCode === 27) { if (state.fullscreen) { _this.fullscreenExit() } } }
if (!editor.hasClass(fullscreenClass)) { state.fullscreen = true
$('html,body').css('overflow', 'hidden')
editor.css({ width: $(window).width(), height: $(window).height() }).addClass(fullscreenClass)
this.resize()
$.proxy(settings.onfullscreen, this)()
$(window).bind('keyup', escHandle) } else { $(window).unbind('keyup', escHandle) this.fullscreenExit() }
return this },
/** * 编辑器退出全屏显示 * Exit fullscreen state * * @returns {editormd} 返回editormd的实例对象 */
fullscreenExit: function () { var editor = this.editor var settings = this.settings var toolbar = this.toolbar var fullscreenClass = this.classPrefix + 'fullscreen'
this.state.fullscreen = false
if (toolbar) { toolbar.find('.fa[name=fullscreen]').parent().removeClass('active') }
$('html,body').css('overflow', '')
editor.css({ width: editor.data('oldWidth'), height: editor.data('oldHeight') }).removeClass(fullscreenClass)
this.resize()
$.proxy(settings.onfullscreenExit, this)()
return this },
/** * 加载并执行插件 * Load and execute the plugin * * @param {String} name plugin name / function name * @param {String} path plugin load path * @returns {editormd} 返回editormd的实例对象 */
executePlugin: function (name, path) { var _this = this var cm = this.cm var settings = this.settings
path = settings.pluginPath + path
if (typeof define === 'function') { if (typeof this[name] === 'undefined') { alert('Error: ' + name + ' plugin is not found, you are not load this plugin.')
return this }
this[name](cm)
return this }
if ($.inArray(path, editormd.loadFiles.plugin) < 0) { editormd.loadPlugin(path, function () { editormd.loadPlugins[name] = _this[name] _this[name](cm) }) } else { $.proxy(editormd.loadPlugins[name], this)(cm) }
return this },
/** * 搜索替换 * Search & replace * * @param {String} command CodeMirror serach commands, "find, fintNext, fintPrev, clearSearch, replace, replaceAll" * @returns {editormd} return this */
search: function (command) { var settings = this.settings
if (!settings.searchReplace) { alert('Error: settings.searchReplace == false') return this }
if (!settings.readOnly) { this.cm.execCommand(command || 'find') }
return this },
searchReplace: function () { this.search('replace')
return this },
searchReplaceAll: function () { this.search('replaceAll')
return this } }
editormd.fn.init.prototype = editormd.fn
/** * 锁屏 * lock screen when dialog opening * * @returns {void} */
editormd.dialogLockScreen = function () { var settings = this.settings || { dialogLockScreen: true }
if (settings.dialogLockScreen) { $('html,body').css('overflow', 'hidden') this.resize() } }
/** * 显示透明背景层 * Display mask layer when dialog opening * * @param {Object} dialog dialog jQuery object * @returns {void} */
editormd.dialogShowMask = function (dialog) { var editor = this.editor var settings = this.settings || { dialogShowMask: true }
dialog.css({ top: ($(window).height() - dialog.height()) / 2 + 'px', left: ($(window).width() - dialog.width()) / 2 + 'px' })
if (settings.dialogShowMask) { editor.children('.' + this.classPrefix + 'mask').css('z-index', parseInt(dialog.css('z-index')) - 1).show() } }
editormd.toolbarHandlers = { undo: function () { this.cm.undo() },
redo: function () { this.cm.redo() },
bold: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
cm.replaceSelection('**' + selection + '**')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 2) } },
del: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
cm.replaceSelection('~~' + selection + '~~')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 2) } },
italic: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
cm.replaceSelection('*' + selection + '*')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 1) } },
quote: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (cursor.ch !== 0) { cm.setCursor(cursor.line, 0) cm.replaceSelection('> ' + selection) cm.setCursor(cursor.line, cursor.ch + 2) } else { cm.replaceSelection('> ' + selection) }
// cm.replaceSelection("> " + selection);
// cm.setCursor(cursor.line, (selection === "") ? cursor.ch + 2 : cursor.ch + selection.length + 2);
},
ucfirst: function () { var cm = this.cm var selection = cm.getSelection() var selections = cm.listSelections()
cm.replaceSelection(editormd.firstUpperCase(selection)) cm.setSelections(selections) },
ucwords: function () { var cm = this.cm var selection = cm.getSelection() var selections = cm.listSelections()
cm.replaceSelection(editormd.wordsFirstUpperCase(selection)) cm.setSelections(selections) },
uppercase: function () { var cm = this.cm var selection = cm.getSelection() var selections = cm.listSelections()
cm.replaceSelection(selection.toUpperCase()) cm.setSelections(selections) },
lowercase: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection() var selections = cm.listSelections()
cm.replaceSelection(selection.toLowerCase()) cm.setSelections(selections) },
h1: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (cursor.ch !== 0) { cm.setCursor(cursor.line, 0) cm.replaceSelection('# ' + selection) cm.setCursor(cursor.line, cursor.ch + 2) } else { cm.replaceSelection('# ' + selection) } },
h2: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (cursor.ch !== 0) { cm.setCursor(cursor.line, 0) cm.replaceSelection('## ' + selection) cm.setCursor(cursor.line, cursor.ch + 3) } else { cm.replaceSelection('## ' + selection) } },
h3: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (cursor.ch !== 0) { cm.setCursor(cursor.line, 0) cm.replaceSelection('### ' + selection) cm.setCursor(cursor.line, cursor.ch + 4) } else { cm.replaceSelection('### ' + selection) } },
h4: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (cursor.ch !== 0) { cm.setCursor(cursor.line, 0) cm.replaceSelection('#### ' + selection) cm.setCursor(cursor.line, cursor.ch + 5) } else { cm.replaceSelection('#### ' + selection) } },
h5: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (cursor.ch !== 0) { cm.setCursor(cursor.line, 0) cm.replaceSelection('##### ' + selection) cm.setCursor(cursor.line, cursor.ch + 6) } else { cm.replaceSelection('##### ' + selection) } },
h6: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (cursor.ch !== 0) { cm.setCursor(cursor.line, 0) cm.replaceSelection('###### ' + selection) cm.setCursor(cursor.line, cursor.ch + 7) } else { cm.replaceSelection('###### ' + selection) } },
'list-ul': function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (selection === '') { cm.replaceSelection('- ' + selection) } else { var selectionText = selection.split('\n')
for (var i = 0, len = selectionText.length; i < len; i++) { selectionText[i] = (selectionText[i] === '') ? '' : '- ' + selectionText[i] }
cm.replaceSelection(selectionText.join('\n')) } },
'list-ol': function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (selection === '') { cm.replaceSelection('1. ' + selection) } else { var selectionText = selection.split('\n')
for (var i = 0, len = selectionText.length; i < len; i++) { selectionText[i] = (selectionText[i] === '') ? '' : (i + 1) + '. ' + selectionText[i] }
cm.replaceSelection(selectionText.join('\n')) } },
hr: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
cm.replaceSelection(((cursor.ch !== 0) ? '\n\n' : '\n') + '------------\n\n') },
tex: function () { if (!this.settings.tex) { alert('settings.tex === false') return this }
var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
cm.replaceSelection('$$' + selection + '$$')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 2) } },
link: function () { this.executePlugin('linkDialog', 'link-dialog/link-dialog') },
'reference-link': function () { this.executePlugin('referenceLinkDialog', 'reference-link-dialog/reference-link-dialog') },
pagebreak: function () { if (!this.settings.pageBreak) { alert('settings.pageBreak === false') return this }
var cm = this.cm var selection = cm.getSelection()
cm.replaceSelection('\r\n[========]\r\n') },
image: function () { this.executePlugin('imageDialog', 'image-dialog/image-dialog') },
code: function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
cm.replaceSelection('`' + selection + '`')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 1) } },
'code-block': function () { this.executePlugin('codeBlockDialog', 'code-block-dialog/code-block-dialog') },
'preformatted-text': function () { this.executePlugin('preformattedTextDialog', 'preformatted-text-dialog/preformatted-text-dialog') },
table: function () { this.executePlugin('tableDialog', 'table-dialog/table-dialog') },
datetime: function () { var cm = this.cm var selection = cm.getSelection() var date = new Date() var langName = this.settings.lang.name var datefmt = editormd.dateFormat() + ' ' + editormd.dateFormat((langName === 'zh-cn' || langName === 'zh-tw') ? 'cn-week-day' : 'week-day')
cm.replaceSelection(datefmt) },
emoji: function () { this.executePlugin('emojiDialog', 'emoji-dialog/emoji-dialog') },
'html-entities': function () { this.executePlugin('htmlEntitiesDialog', 'html-entities-dialog/html-entities-dialog') },
'goto-line': function () { this.executePlugin('gotoLineDialog', 'goto-line-dialog/goto-line-dialog') },
watch: function () { this[this.settings.watch ? 'unwatch' : 'watch']() },
preview: function () { this.previewing() },
fullscreen: function () { this.fullscreen() },
clear: function () { this.clear() },
search: function () { this.search() },
help: function () { this.executePlugin('helpDialog', 'help-dialog/help-dialog') },
info: function () { this.showInfoDialog() } }
editormd.keyMaps = { 'Ctrl-1': 'h1', 'Ctrl-2': 'h2', 'Ctrl-3': 'h3', 'Ctrl-4': 'h4', 'Ctrl-5': 'h5', 'Ctrl-6': 'h6', 'Ctrl-B': 'bold', // if this is string == editormd.toolbarHandlers.xxxx
'Ctrl-D': 'datetime',
'Ctrl-E': function () { // emoji
var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (!this.settings.emoji) { alert('Error: settings.emoji == false') return }
cm.replaceSelection(':' + selection + ':')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 1) } }, 'Ctrl-Alt-G': 'goto-line', 'Ctrl-H': 'hr', 'Ctrl-I': 'italic', 'Ctrl-K': 'code',
'Ctrl-L': function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
var title = (selection === '') ? '' : ' "' + selection + '"'
cm.replaceSelection('[' + selection + '](' + title + ')')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 1) } }, 'Ctrl-U': 'list-ul',
'Shift-Ctrl-A': function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
if (!this.settings.atLink) { alert('Error: settings.atLink == false') return }
cm.replaceSelection('@' + selection)
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 1) } },
'Shift-Ctrl-C': 'code', 'Shift-Ctrl-Q': 'quote', 'Shift-Ctrl-S': 'del', 'Shift-Ctrl-K': 'tex', // KaTeX
'Shift-Alt-C': function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
cm.replaceSelection(['```', selection, '```'].join('\n'))
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 3) } },
'Shift-Ctrl-Alt-C': 'code-block', 'Shift-Ctrl-H': 'html-entities', 'Shift-Alt-H': 'help', 'Shift-Ctrl-E': 'emoji', 'Shift-Ctrl-U': 'uppercase', 'Shift-Alt-U': 'ucwords', 'Shift-Ctrl-Alt-U': 'ucfirst', 'Shift-Alt-L': 'lowercase',
'Shift-Ctrl-I': function () { var cm = this.cm var cursor = cm.getCursor() var selection = cm.getSelection()
var title = (selection === '') ? '' : ' "' + selection + '"'
cm.replaceSelection('![' + selection + '](' + title + ')')
if (selection === '') { cm.setCursor(cursor.line, cursor.ch + 4) } },
'Shift-Ctrl-Alt-I': 'image', 'Shift-Ctrl-L': 'link', 'Shift-Ctrl-O': 'list-ol', 'Shift-Ctrl-P': 'preformatted-text', 'Shift-Ctrl-T': 'table', 'Shift-Alt-P': 'pagebreak', 'F9': 'watch', 'F10': 'preview', 'F11': 'fullscreen' }
/** * 清除字符串两边的空格 * Clear the space of strings both sides. * * @param {String} str string * @returns {String} trimed string */
var trim = function (str) { return (!String.prototype.trim) ? str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '') : str.trim() }
editormd.trim = trim
/** * 所有单词首字母大写 * Words first to uppercase * * @param {String} str string * @returns {String} string */
var ucwords = function (str) { return str.toLowerCase().replace(/\b(\w)|\s(\w)/g, function ($1) { return $1.toUpperCase() }) }
editormd.ucwords = editormd.wordsFirstUpperCase = ucwords
/** * 字符串首字母大写 * Only string first char to uppercase * * @param {String} str string * @returns {String} string */
var firstUpperCase = function (str) { return str.toLowerCase().replace(/\b(\w)/, function ($1) { return $1.toUpperCase() }) }
var ucfirst = firstUpperCase
editormd.firstUpperCase = editormd.ucfirst = firstUpperCase
editormd.urls = { atLinkBase: 'https://github.com/' }
editormd.regexs = { atLink: /@(\w+)/g, email: /(\w+)@(\w+)\.(\w+)\.?(\w+)?/g, emailLink: /(mailto:)?([\w\.\_]+)@(\w+)\.(\w+)\.?(\w+)?/g, emoji: /:([\w\+-]+):/g, emojiDatetime: /(\d{2}:\d{2}:\d{2})/g, twemoji: /:(tw-([\w]+)-?(\w+)?):/g, fontAwesome: /:(fa-([\w]+)(-(\w+)){0,}):/g, editormdLogo: /:(editormd-logo-?(\w+)?):/g, pageBreak: /^\[[=]{8,}\]$/ }
// Emoji 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/36x36/', ext: '.png' }
/** * 自定义marked的解析器 * Custom Marked renderer rules * * @param {Array} markdownToC 传入用于接收TOC的数组 * @returns {Renderer} markedRenderer 返回marked的Renderer自定义对象 */
editormd.markedRenderer = function (markdownToC, options) { var defaults = { toc: true, // Table of contents
tocm: false, tocStartLevel: 1, // Said from H1 to create ToC
pageBreak: true, atLink: true, // for @link
emailLink: true, // for mail address auto link
taskList: false, // Enable Github Flavored Markdown task lists
emoji: false, // :emoji: , Support Twemoji, fontAwesome, Editor.md logo emojis.
tex: false, // TeX(LaTeX), based on KaTeX
flowChart: false, // flowChart.js only support IE9+
sequenceDiagram: false // sequenceDiagram.js only support IE9+
}
var settings = $.extend(defaults, options || {}) var marked = editormd.$marked var markedRenderer = new marked.Renderer() markdownToC = markdownToC || []
var regexs = editormd.regexs var atLinkReg = regexs.atLink var emojiReg = regexs.emoji var emailReg = regexs.email var emailLinkReg = regexs.emailLink var twemojiReg = regexs.twemoji var faIconReg = regexs.fontAwesome var editormdLogoReg = regexs.editormdLogo var pageBreakReg = regexs.pageBreak
markedRenderer.emoji = function (text) { text = text.replace(editormd.regexs.emojiDatetime, function ($1) { return $1.replace(/:/g, ':') })
var matchs = text.match(emojiReg)
if (!matchs || !settings.emoji) { return text }
for (var i = 0, len = matchs.length; i < len; i++) { if (matchs[i] === ':+1:') { matchs[i] = ':\\+1:' }
text = text.replace(new RegExp(matchs[i]), function ($1, $2) { var faMatchs = $1.match(faIconReg) var name = $1.replace(/:/g, '')
if (faMatchs) { for (var fa = 0, len1 = faMatchs.length; fa < len1; fa++) { var faName = faMatchs[fa].replace(/:/g, '')
return '<i class="fa ' + faName + ' fa-emoji" title="' + faName.replace('fa-', '') + '"></i>' } } else { var emdlogoMathcs = $1.match(editormdLogoReg) var twemojiMatchs = $1.match(twemojiReg)
if (emdlogoMathcs) { for (var x = 0, len2 = emdlogoMathcs.length; x < len2; x++) { var logoName = emdlogoMathcs[x].replace(/:/g, '') return '<i class="' + logoName + '" title="Editor.md logo (' + logoName + ')"></i>' } } else if (twemojiMatchs) { for (var t = 0, len3 = twemojiMatchs.length; t < len3; t++) { var twe = twemojiMatchs[t].replace(/:/g, '').replace('tw-', '') return '<img src="' + editormd.twemoji.path + twe + editormd.twemoji.ext + '" title="twemoji-' + twe + '" alt="twemoji-' + twe + '" class="emoji twemoji" />' } } else { var src = (name === '+1') ? 'plus1' : name src = (src === 'black_large_square') ? 'black_square' : src src = (src === 'moon') ? 'waxing_gibbous_moon' : src
return '<img src="' + editormd.emoji.path + src + editormd.emoji.ext + '" class="emoji" title=":' + name + ':" alt=":' + name + ':" />' } } }) }
return text }
markedRenderer.atLink = function (text) { if (atLinkReg.test(text)) { if (settings.atLink) { text = text.replace(emailReg, function ($1, $2, $3, $4) { return $1.replace(/@/g, '_#_@_#_') })
text = text.replace(atLinkReg, function ($1, $2) { return '<a href="' + editormd.urls.atLinkBase + '' + $2 + '" title="@' + $2 + '" class="at-link">' + $1 + '</a>' }).replace(/_#_@_#_/g, '@') }
if (settings.emailLink) { text = text.replace(emailLinkReg, function ($1, $2, $3, $4, $5) { return (!$2 && $.inArray($5, 'jpg|jpeg|png|gif|webp|ico|icon|pdf'.split('|')) < 0) ? '<a href="mailto:' + $1 + '">' + $1 + '</a>' : $1 }) }
return text }
return text }
markedRenderer.link = function (href, title, text) { if (this.options.sanitize) { try { var prot = decodeURIComponent(unescape(href)).replace(/[^\w:]/g, '').toLowerCase() } catch (e) { return '' }
if (prot.indexOf('javascript:') === 0) { return '' } }
var out = '<a href="' + href + '"'
if (atLinkReg.test(title) || atLinkReg.test(text)) { if (title) { out += ' title="' + title.replace(/@/g, '@') }
return out + '">' + text.replace(/@/g, '@') + '</a>' }
if (title) { out += ' title="' + title + '"' }
out += '>' + text + '</a>'
return out }
markedRenderer.heading = function (text, level, raw) { var linkText = text var hasLinkReg = /\s*\<a\s*href\=\"(.*)\"\s*([^\>]*)\>(.*)\<\/a\>\s*/ var getLinkTextReg = /\s*\<a\s*([^\>]+)\>([^\>]*)\<\/a\>\s*/g
if (hasLinkReg.test(text)) { var tempText = [] text = text.split(/\<a\s*([^\>]+)\>([^\>]*)\<\/a\>/)
for (var i = 0, len = text.length; i < len; i++) { tempText.push(text[i].replace(/\s*href\=\"(.*)\"\s*/g, '')) }
text = tempText.join(' ') }
text = trim(text)
var escapedText = text.toLowerCase().replace(/[^\w]+/g, '-') var toc = { text: text, level: level, slug: escapedText }
var isChinese = /^[\u4e00-\u9fa5]+$/.test(text) var id = (isChinese) ? escape(text).replace(/\%/g, '') : text.toLowerCase().replace(/[^\w]+/g, '-')
markdownToC.push(toc)
var headingHTML = '<h' + level + ' id="h' + level + '-' + this.options.headerPrefix + id + '">'
headingHTML += '<a name="' + text + '" class="reference-link"></a>' headingHTML += '<span class="header-link octicon octicon-link"></span>' headingHTML += (hasLinkReg) ? this.atLink(this.emoji(linkText)) : this.atLink(this.emoji(text)) headingHTML += '</h' + level + '>'
return headingHTML }
markedRenderer.pageBreak = function (text) { if (pageBreakReg.test(text) && settings.pageBreak) { text = '<hr style="page-break-after:always;" class="page-break editormd-page-break" />' }
return text }
markedRenderer.paragraph = function (text) { var isTeXInline = /\$\$(.*)\$\$/g.test(text) var isTeXLine = /^\$\$(.*)\$\$$/.test(text) var isTeXAddClass = (isTeXLine) ? ' class="' + editormd.classNames.tex + '"' : '' var isToC = (settings.tocm) ? /^(\[TOC\]|\[TOCM\])$/i.test(text) : /^\[TOC\]$/i.test(text) var isToCMenu = /^\[TOCM\]$/.test(text)
if (!isTeXLine && isTeXInline) { text = text.replace(/(\$\$([^\$]*)\$\$)+/g, function ($1, $2) { return '<span class="' + editormd.classNames.tex + '">' + $2.replace(/\$/g, '') + '</span>' }) } else { text = (isTeXLine) ? text.replace(/\$/g, '') : text }
var tocHTML = '<div class="markdown-toc editormd-markdown-toc">' + text + '</div>'
return (isToC) ? ((isToCMenu) ? '<div class="editormd-toc-menu">' + tocHTML + '</div><br/>' : tocHTML) : ((pageBreakReg.test(text)) ? this.pageBreak(text) : '<p' + isTeXAddClass + '>' + this.atLink(this.emoji(text)) + '</p>\n') }
markedRenderer.code = function (code, lang, escaped) { if (lang === 'seq' || lang === 'sequence') { return '<div class="sequence-diagram">' + code + '</div>' } else if (lang === 'flow') { return '<div class="flowchart">' + code + '</div>' } else if (lang === 'math' || lang === 'latex' || lang === 'katex') { return '<p class="' + editormd.classNames.tex + '">' + code + '</p>' } else if (/^mindmap/i.test(lang)) { var mapId = Math.ceil(Math.random() * 1000000) return "<div class='mindmap' id='mindmap-" + mapId + "'>" + code + '</div>' } else { return marked.Renderer.prototype.code.apply(this, arguments) } }
markedRenderer.tablecell = function (content, flags) { var type = (flags.header) ? 'th' : 'td' var tag = (flags.align) ? '<' + type + ' style="text-align:' + flags.align + '">' : '<' + type + '>'
return tag + this.atLink(this.emoji(content)) + '</' + type + '>\n' }
markedRenderer.listitem = function (text) { if (settings.taskList && /^\s*\[[x\s]\]\s*/.test(text)) { text = text.replace(/^\s*\[\s\]\s*/, '<input type="checkbox" class="task-list-item-checkbox" /> ') .replace(/^\s*\[x\]\s*/, '<input type="checkbox" class="task-list-item-checkbox" checked disabled /> ')
return '<li style="list-style: none;">' + this.atLink(this.emoji(text)) + '</li>' } else { return '<li>' + this.atLink(this.emoji(text)) + '</li>' } }
return markedRenderer }
/** * * 生成TOC(Table of Contents) * Creating ToC (Table of Contents) * * @param {Array} toc 从marked获取的TOC数组列表 * @param {Element} container 插入TOC的容器元素 * @param {Integer} startLevel Hx 起始层级 * @returns {Object} tocContainer 返回ToC列表容器层的jQuery对象元素 */
editormd.markdownToCRenderer = function (toc, container, tocDropdown, startLevel) { var html = '' var lastLevel = 0 var classPrefix = this.classPrefix
startLevel = startLevel || 1
for (var i = 0, len = toc.length; i < len; i++) { var text = toc[i].text var level = toc[i].level
if (level < startLevel) { continue }
if (level > lastLevel) { html += '' } else if (level < lastLevel) { html += (new Array(lastLevel - level + 2)).join('</ul></li>') } else { html += '</ul></li>' }
html += '<li><a class="toc-level-' + level + '" href="#' + text + '" level="' + level + '">' + text + '</a><ul>' lastLevel = level }
var tocContainer = container.find('.markdown-toc')
if ((tocContainer.length < 1 && container.attr('previewContainer') === 'false')) { var tocHTML = '<div class="markdown-toc ' + classPrefix + 'markdown-toc"></div>'
tocHTML = (tocDropdown) ? '<div class="' + classPrefix + 'toc-menu">' + tocHTML + '</div>' : tocHTML
container.html(tocHTML)
tocContainer = container.find('.markdown-toc') }
if (tocDropdown) { tocContainer.wrap('<div class="' + classPrefix + 'toc-menu"></div><br/>') }
tocContainer.html('<ul class="markdown-toc-list"></ul>').children('.markdown-toc-list').html(html.replace(/\r?\n?\<ul\>\<\/ul\>/g, ''))
return tocContainer }
/** * * 生成TOC下拉菜单 * Creating ToC dropdown menu * * @param {Object} container 插入TOC的容器jQuery对象元素 * @param {String} tocTitle ToC title * @returns {Object} return toc-menu object */
editormd.tocDropdownMenu = function (container, tocTitle) { tocTitle = tocTitle || 'Table of Contents'
var zindex = 400 var tocMenus = container.find('.' + this.classPrefix + 'toc-menu')
tocMenus.each(function () { var $this = $(this) var toc = $this.children('.markdown-toc') var icon = '<i class="fa fa-angle-down"></i>' var btn = '<a href="javascript:;" class="toc-menu-btn">' + icon + tocTitle + '</a>' var menu = toc.children('ul') var list = menu.find('li')
toc.append(btn)
list.first().before('<li><h1>' + tocTitle + ' ' + icon + '</h1></li>')
$this.mouseover(function () { menu.show()
list.each(function () { var li = $(this) var ul = li.children('ul')
if (ul.html() === '') { ul.remove() }
if (ul.length > 0 && ul.html() !== '') { var firstA = li.children('a').first()
if (firstA.children('.fa').length < 1) { firstA.append($(icon).css({ float: 'right', paddingTop: '4px' })) } }
li.mouseover(function () { ul.css('z-index', zindex).show() zindex += 1 }).mouseleave(function () { ul.hide() }) }) }).mouseleave(function () { menu.hide() }) })
return tocMenus }
/** * 简单地过滤指定的HTML标签 * Filter custom html tags * * @param {String} html 要过滤HTML * @param {String} filters 要过滤的标签 * @returns {String} html 返回过滤的HTML */
editormd.filterHTMLTags = function (html, filters) { if (typeof html !== 'string') { html = new String(html) }
if (typeof filters !== 'string') { return html }
var expression = filters.split('|') var filterTags = expression[0].split(',') var attrs = expression[1]
for (var i = 0, len = filterTags.length; i < len; i++) { var tag = filterTags[i]
html = html.replace(new RegExp('\<\s*' + tag + '\s*([^\>]*)\>([^\>]*)\<\s*\/' + tag + '\s*\>', 'igm'), '') }
// return html;
if (typeof attrs !== 'undefined') { var htmlTagRegex = /\<(\w+)\s*([^\>]*)\>([^\>]*)\<\/(\w+)\>/ig
if (attrs === '*') { html = html.replace(htmlTagRegex, function ($1, $2, $3, $4, $5) { return '<' + $2 + '>' + $4 + '</' + $5 + '>' }) } else if (attrs === 'on*') { html = html.replace(htmlTagRegex, function ($1, $2, $3, $4, $5) { var el = $('<' + $2 + '>' + $4 + '</' + $5 + '>') var _attrs = $($1)[0].attributes var $attrs = {}
$.each(_attrs, function (i, e) { if (e.nodeName !== '"') $attrs[e.nodeName] = e.nodeValue })
$.each($attrs, function (i) { if (i.indexOf('on') === 0) { delete $attrs[i] } })
el.attr($attrs)
var text = (typeof el[1] !== 'undefined') ? $(el[1]).text() : ''
return el[0].outerHTML + text }) } else if (attrs === 'filterXSS') { var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'dd', 'del', 'details', 'div', 'dl', 'dt', 'em', 'font', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'i', 'img', 'ins', 'li', 'mark', 'nav', 'ol', 'p', 'pre', 's', 'section', 'small', 'span', 'sub', 'sup', 'strong', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'tt', 'u', 'ul', 'video', 'input'], tagAttrs = ['target', 'title', 'shape', 'coords', 'href', 'alt', 'autoplay', 'controls', 'loop', 'preload', 'src', 'dir', 'cite', 'align', 'valign', 'span', 'width', 'height', 'datetime', 'open', 'color', 'size', 'face', 'border', 'rowspan', 'colspan', 'style', 'class', 'id', 'name', 'type', 'checked', 'disabled'], whiteList = (function () { var result = {} for (var i = 0, len = tags.length; i < len; i++) { result[tags[i]] = tagAttrs }; return result })() html = filterXSS(html, { whiteList: whiteList }) } else { html = html.replace(htmlTagRegex, function ($1, $2, $3, $4) { var filterAttrs = attrs.split(',') var el = $($1) el.html($4)
$.each(filterAttrs, function (i) { el.attr(filterAttrs[i], null) })
return el[0].outerHTML }) } }
return html }
/** * 将Markdown文档解析为HTML用于前台显示 * Parse Markdown to HTML for Font-end preview. * * @param {String} id 用于显示HTML的对象ID * @param {Object} [options={}] 配置选项,可选 * @returns {Object} div 返回jQuery对象元素 */
editormd.markdownToHTML = function (id, options) { var defaults = { gfm: true, toc: true, tocm: false, tocStartLevel: 1, tocTitle: '目录', tocDropdown: false, tocContainer: '', markdown: '', markdownSourceCode: false, htmlDecode: false, autoLoadKaTeX: true, pageBreak: true, atLink: true, // for @link
emailLink: true, // for mail address auto link
tex: false, taskList: false, // Github Flavored Markdown task lists
emoji: false, flowChart: false, sequenceDiagram: false, previewCodeHighlight: true, mindMap: true }
editormd.$marked = marked
var div = $('#' + id) var settings = div.settings = $.extend(true, defaults, options || {}) var saveTo = div.find('textarea')
if (saveTo.length < 1) { div.append('<textarea></textarea>') saveTo = div.find('textarea') }
var markdownDoc = (settings.markdown === '') ? saveTo.val() : settings.markdown var markdownToC = []
var rendererOptions = { toc: settings.toc, tocm: settings.tocm, tocStartLevel: settings.tocStartLevel, taskList: settings.taskList, emoji: settings.emoji, tex: settings.tex, pageBreak: settings.pageBreak, atLink: settings.atLink, // for @link
emailLink: settings.emailLink, // for mail address auto link
flowChart: settings.flowChart, sequenceDiagram: settings.sequenceDiagram, previewCodeHighlight: settings.previewCodeHighlight }
var markedOptions = { renderer: editormd.markedRenderer(markdownToC, rendererOptions), gfm: settings.gfm, tables: true, breaks: true, pedantic: false, sanitize: !(settings.htmlDecode), // 是否忽略HTML标签,即是否开启HTML标签解析,为了安全性,默认不开启
smartLists: true, smartypants: true }
// markdownDoc = new String(markdownDoc)
// console.log(saveTo.val())
// console.log(markdownDoc)
var markdownParsed = marked(markdownDoc, markedOptions)
markdownParsed = editormd.filterHTMLTags(markdownParsed, settings.htmlDecode)
if (settings.markdownSourceCode) { saveTo.text(markdownDoc) } else { saveTo.remove() }
div.addClass('markdown-body ' + this.classPrefix + 'html-preview').append(markdownParsed)
var tocContainer = (settings.tocContainer !== '') ? $(settings.tocContainer) : div
if (settings.tocContainer !== '') { tocContainer.attr('previewContainer', false) }
if (settings.toc) { div.tocContainer = this.markdownToCRenderer(markdownToC, tocContainer, settings.tocDropdown, settings.tocStartLevel)
if (settings.tocDropdown || div.find('.' + this.classPrefix + 'toc-menu').length > 0) { this.tocDropdownMenu(div, settings.tocTitle) }
if (settings.tocContainer !== '') { div.find('.editormd-toc-menu, .editormd-markdown-toc').remove() } }
if (settings.previewCodeHighlight) { div.find('pre').addClass('prettyprint linenums') prettyPrint() }
if (!editormd.isIE8) { if (settings.flowChart) { div.find('.flowchart').flowChart() // tag@a:plantuml
$(div).plantuml() }
if (settings.sequenceDiagram) { div.find('.sequence-diagram').sequenceDiagram({ theme: 'simple' }) } }
if (settings.tex) { var katexHandle = function () { div.find('.' + editormd.classNames.tex).each(function () { var tex = $(this) katex.render(tex.html().replace(/</g, '<').replace(/>/g, '>'), tex[0]) tex.find('.katex').css('font-size', '1.6em') }) }
if (settings.autoLoadKaTeX && !editormd.$katex && !editormd.kaTeXLoaded) { this.loadKaTeX(function () { editormd.$katex = katex editormd.kaTeXLoaded = true katexHandle() }) } else { katexHandle() } }
if (settings.mindMap) { // 用立即执行函数来处理脑图
(function () { div.find('.mindmap').each(function () { var data = window.markmap.transform($(this).text().trim()) $(this).html('') var svgId = this.id + '-svg' $(this).append($('<svg style="width: 100%;height:500px" id="' + svgId + '"></svg>')) window.markmap.markmap('svg#' + svgId, data) }) })() }
div.getMarkdown = function () { return saveTo.val() }
return div }
// Editor.md themes, change toolbar themes etc.
// added @1.5.0
editormd.themes = ['default', 'dark']
// Preview area themes
// added @1.5.0
editormd.previewThemes = ['default', 'dark']
// CodeMirror / editor area themes
// @1.5.0 rename -> editorThemes, old version -> themes
editormd.editorThemes = [ 'default', '3024-day', '3024-night', 'ambiance', 'ambiance-mobile', 'base16-dark', 'base16-light', 'blackboard', 'cobalt', 'eclipse', 'elegant', 'erlang-dark', 'lesser-dark', 'mbo', 'mdn-like', 'midnight', 'monokai', 'neat', 'neo', 'night', 'paraiso-dark', 'paraiso-light', 'pastel-on-dark', 'rubyblue', 'solarized', 'the-matrix', 'tomorrow-night-eighties', 'twilight', 'vibrant-ink', 'xq-dark', 'xq-light' ]
editormd.loadPlugins = {}
editormd.loadFiles = { js: [], css: [], plugin: [] }
/** * 动态加载Editor.md插件,但不立即执行 * Load editor.md plugins * * @param {String} fileName 插件文件路径 * @param {Function} [callback=function()] 加载成功后执行的回调函数 * @param {String} [into="head"] 嵌入页面的位置 */
editormd.loadPlugin = function (fileName, callback, into) { callback = callback || function () { }
this.loadScript(fileName, function () { editormd.loadFiles.plugin.push(fileName) callback() }, into) }
/** * 动态加载CSS文件的方法 * Load css file method * * @param {String} fileName CSS文件名 * @param {Function} [callback=function()] 加载成功后执行的回调函数 * @param {String} [into="head"] 嵌入页面的位置 */
editormd.loadCSS = function (fileName, callback, into) { into = into || 'head' callback = callback || function () { }
var css = document.createElement('link') css.type = 'text/css' css.rel = 'stylesheet' css.onload = css.onreadystatechange = function () { editormd.loadFiles.css.push(fileName) callback() }
css.href = fileName + '.css'
if (into === 'head') { document.getElementsByTagName('head')[0].appendChild(css) } else { document.body.appendChild(css) } }
editormd.isIE = (navigator.appName == 'Microsoft Internet Explorer') editormd.isIE8 = (editormd.isIE && navigator.appVersion.match(/8./i) == '8.')
/** * 动态加载JS文件的方法 * Load javascript file method * * @param {String} fileName JS文件名 * @param {Function} [callback=function()] 加载成功后执行的回调函数 * @param {String} [into="head"] 嵌入页面的位置 */
editormd.loadScript = function (fileName, callback, into) { into = into || 'head' callback = callback || function () { }
var script = null script = document.createElement('script') script.id = fileName.replace(/[\./]+/g, '-') script.type = 'text/javascript' script.src = fileName + '.js'
if (editormd.isIE8) { script.onreadystatechange = function () { if (script.readyState) { if (script.readyState === 'loaded' || script.readyState === 'complete') { script.onreadystatechange = null editormd.loadFiles.js.push(fileName) callback() } } } } else { script.onload = function () { editormd.loadFiles.js.push(fileName) callback() } }
if (into === 'head') { document.getElementsByTagName('head')[0].appendChild(script) } else { document.body.appendChild(script) } }
// 使用国外的CDN,加载速度有时会很慢,或者自定义URL
// You can custom KaTeX load url.
editormd.katexURL = { css: '//cdn.staticfile.org/KaTeX/0.3.0/katex.min', js: '//cdn.staticfile.org/KaTeX/0.3.0/katex.min' }
editormd.kaTeXLoaded = false
/** * 加载KaTeX文件 * load KaTeX files * * @param {Function} [callback=function()] 加载成功后执行的回调函数 */
editormd.loadKaTeX = function (callback) { editormd.loadCSS(editormd.katexURL.css, function () { editormd.loadScript(editormd.katexURL.js, callback || function () { }) }) }
/** * 锁屏 * lock screen * * @param {Boolean} lock Boolean 布尔值,是否锁屏 * @returns {void} */
editormd.lockScreen = function (lock) { $('html,body').css('overflow', (lock) ? 'hidden' : '') }
/** * 动态创建对话框 * Creating custom dialogs * * @param {Object} options 配置项键值对 Key/Value * @returns {dialog} 返回创建的dialog的jQuery实例对象 */
editormd.createDialog = function (options) { var defaults = { name: '', width: 420, height: 240, title: '', drag: true, closed: true, content: '', mask: true, maskStyle: { backgroundColor: '#fff', opacity: 0.1 }, lockScreen: true, footer: true, buttons: false }
options = $.extend(true, defaults, options)
var $this = this var editor = this.editor var classPrefix = editormd.classPrefix var guid = (new Date()).getTime() var dialogName = ((options.name === '') ? classPrefix + 'dialog-' + guid : options.name) var mouseOrTouch = editormd.mouseOrTouch
var html = '<div class="' + classPrefix + 'dialog ' + dialogName + '">'
if (options.title !== '') { html += '<div class="' + classPrefix + 'dialog-header"' + ((options.drag) ? ' style="cursor: move;"' : '') + '>' html += '<strong class="' + classPrefix + 'dialog-title">' + options.title + '</strong>' html += '</div>' }
if (options.closed) { html += '<a href="javascript:;" class="fa fa-close ' + classPrefix + 'dialog-close"></a>' }
html += '<div class="' + classPrefix + 'dialog-container">' + options.content
if (options.footer || typeof options.footer === 'string') { html += '<div class="' + classPrefix + 'dialog-footer">' + ((typeof options.footer === 'boolean') ? '' : options.footer) + '</div>' }
html += '</div>'
html += '<div class="' + classPrefix + 'dialog-mask ' + classPrefix + 'dialog-mask-bg"></div>' html += '<div class="' + classPrefix + 'dialog-mask ' + classPrefix + 'dialog-mask-con"></div>' html += '</div>'
editor.append(html)
var dialog = editor.find('.' + dialogName)
dialog.lockScreen = function (lock) { if (options.lockScreen) { $('html,body').css('overflow', (lock) ? 'hidden' : '') $this.resize() }
return dialog }
dialog.showMask = function () { if (options.mask) { editor.find('.' + classPrefix + 'mask').css(options.maskStyle).css('z-index', editormd.dialogZindex - 1).show() } return dialog }
dialog.hideMask = function () { if (options.mask) { editor.find('.' + classPrefix + 'mask').hide() }
return dialog }
dialog.loading = function (show) { var loading = dialog.find('.' + classPrefix + 'dialog-mask') loading[(show) ? 'show' : 'hide']()
return dialog }
dialog.lockScreen(true).showMask()
dialog.show().css({ zIndex: editormd.dialogZindex, border: (editormd.isIE8) ? '1px solid #ddd' : '', width: (typeof options.width === 'number') ? options.width + 'px' : options.width, height: (typeof options.height === 'number') ? options.height + 'px' : options.height })
var dialogPosition = function () { dialog.css({ top: ($(window).height() - dialog.height()) / 2 + 'px', left: ($(window).width() - dialog.width()) / 2 + 'px' }) }
dialogPosition()
$(window).resize(dialogPosition)
dialog.children('.' + classPrefix + 'dialog-close').bind(mouseOrTouch('click', 'touchend'), function () { dialog.hide().lockScreen(false).hideMask() })
if (typeof options.buttons === 'object') { var footer = dialog.footer = dialog.find('.' + classPrefix + 'dialog-footer')
for (var key in options.buttons) { var btn = options.buttons[key] var btnClassName = classPrefix + key + '-btn'
footer.append('<button class="' + classPrefix + 'btn ' + btnClassName + '">' + btn[0] + '</button>') btn[1] = $.proxy(btn[1], dialog) footer.children('.' + btnClassName).bind(mouseOrTouch('click', 'touchend'), btn[1]) } }
if (options.title !== '' && options.drag) { var posX, posY var dialogHeader = dialog.children('.' + classPrefix + 'dialog-header')
if (!options.mask) { dialogHeader.bind(mouseOrTouch('click', 'touchend'), function () { editormd.dialogZindex += 2 dialog.css('z-index', editormd.dialogZindex) }) }
dialogHeader.mousedown(function (e) { e = e || window.event // IE
posX = e.clientX - parseInt(dialog[0].style.left) posY = e.clientY - parseInt(dialog[0].style.top)
document.onmousemove = moveAction })
var userCanSelect = function (obj) { obj.removeClass(classPrefix + 'user-unselect').off('selectstart') }
var userUnselect = function (obj) { obj.addClass(classPrefix + 'user-unselect').on('selectstart', function (event) { // selectstart for IE
return false }) }
var moveAction = function (e) { e = e || window.event // IE
var left, top, nowLeft = parseInt(dialog[0].style.left), nowTop = parseInt(dialog[0].style.top)
if (nowLeft >= 0) { if (nowLeft + dialog.width() <= $(window).width()) { left = e.clientX - posX } else { left = $(window).width() - dialog.width() document.onmousemove = null } } else { left = 0 document.onmousemove = null }
if (nowTop >= 0) { top = e.clientY - posY } else { top = 0 document.onmousemove = null }
document.onselectstart = function () { return false }
userUnselect($('body')) userUnselect(dialog) dialog[0].style.left = left + 'px' dialog[0].style.top = top + 'px' }
document.onmouseup = function () { userCanSelect($('body')) userCanSelect(dialog)
document.onselectstart = null document.onmousemove = null }
dialogHeader.touchDraggable = function () { var offset = null var start = function (e) { var orig = e.originalEvent var pos = $(this).parent().position()
offset = { x: orig.changedTouches[0].pageX - pos.left, y: orig.changedTouches[0].pageY - pos.top } }
var move = function (e) { e.preventDefault() var orig = e.originalEvent
$(this).parent().css({ top: orig.changedTouches[0].pageY - offset.y, left: orig.changedTouches[0].pageX - offset.x }) }
this.bind('touchstart', start).bind('touchmove', move) }
dialogHeader.touchDraggable() }
editormd.dialogZindex += 2
return dialog }
/** * 鼠标和触摸事件的判断/选择方法 * MouseEvent or TouchEvent type switch * * @param {String} [mouseEventType="click"] 供选择的鼠标事件 * @param {String} [touchEventType="touchend"] 供选择的触摸事件 * @returns {String} EventType 返回事件类型名称 */
editormd.mouseOrTouch = function (mouseEventType, touchEventType) { mouseEventType = mouseEventType || 'click' touchEventType = touchEventType || 'touchend'
var eventType = mouseEventType
var userAgentInfo = navigator.userAgent var Agents = new Array('Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod') var flag = true for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false break } } if (!flag) { eventType = touchEventType }
return eventType }
/** * 日期时间的格式化方法 * Datetime format method * * @param {String} [format=""] 日期时间的格式,类似PHP的格式 * @returns {String} datefmt 返回格式化后的日期时间字符串 */
editormd.dateFormat = function (format) { format = format || ''
var addZero = function (d) { return (d < 10) ? '0' + d : d }
var date = new Date() var year = date.getFullYear() var year2 = year.toString().slice(2, 4) var month = addZero(date.getMonth() + 1) var day = addZero(date.getDate()) var weekDay = date.getDay() var hour = addZero(date.getHours()) var min = addZero(date.getMinutes()) var second = addZero(date.getSeconds()) var ms = addZero(date.getMilliseconds()) var datefmt = ''
var ymd = year2 + '-' + month + '-' + day var fymd = year + '-' + month + '-' + day var hms = hour + ':' + min + ':' + second
switch (format) { case 'UNIX Time': datefmt = date.getTime() break
case 'UTC': datefmt = date.toUTCString() break
case 'yy': datefmt = year2 break
case 'year': case 'yyyy': datefmt = year break
case 'month': case 'mm': datefmt = month break
case 'cn-week-day': case 'cn-wd': var cnWeekDays = ['日', '一', '二', '三', '四', '五', '六'] datefmt = '星期' + cnWeekDays[weekDay] break
case 'week-day': case 'wd': var weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] datefmt = weekDays[weekDay] break
case 'day': case 'dd': datefmt = day break
case 'hour': case 'hh': datefmt = hour break
case 'min': case 'ii': datefmt = min break
case 'second': case 'ss': datefmt = second break
case 'ms': datefmt = ms break
case 'yy-mm-dd': datefmt = ymd break
case 'yyyy-mm-dd': datefmt = fymd break
case 'yyyy-mm-dd h:i:s ms': case 'full + ms': datefmt = fymd + ' ' + hms + ' ' + ms break
case 'full': case 'yyyy-mm-dd h:i:s': default: datefmt = fymd + ' ' + hms break }
return datefmt }
return editormd }))
|