|
|
/* * Editor.md * * @file editormd.amd.js * @version v1.5.0 * @description Open source online markdown editor. * @license MIT License * @author Pandao * {@link https://github.com/pandao/editor.md}
* @updateTime 2015-06-09 */
;(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
{ var cmModePath = "codemirror/mode/"; var cmAddonPath = "codemirror/addon/";
var codeMirrorModules = [ "jquery", "marked", "prettify", "katex", "raphael", "underscore", "flowchart", "jqueryflowchart", "sequenceDiagram",
"codemirror/lib/codemirror", cmModePath + "css/css", cmModePath + "sass/sass", cmModePath + "shell/shell", cmModePath + "sql/sql", cmModePath + "clike/clike", cmModePath + "php/php", cmModePath + "xml/xml", cmModePath + "markdown/markdown", cmModePath + "javascript/javascript", cmModePath + "htmlmixed/htmlmixed", cmModePath + "gfm/gfm", cmModePath + "http/http", cmModePath + "go/go", cmModePath + "dart/dart", cmModePath + "coffeescript/coffeescript", cmModePath + "nginx/nginx", cmModePath + "python/python", cmModePath + "perl/perl", cmModePath + "lua/lua", cmModePath + "r/r", cmModePath + "ruby/ruby", cmModePath + "rst/rst", cmModePath + "smartymixed/smartymixed", cmModePath + "vb/vb", cmModePath + "vbscript/vbscript", cmModePath + "velocity/velocity", cmModePath + "xquery/xquery", cmModePath + "yaml/yaml", cmModePath + "erlang/erlang", cmModePath + "jade/jade",
cmAddonPath + "edit/trailingspace", cmAddonPath + "dialog/dialog", cmAddonPath + "search/searchcursor", cmAddonPath + "search/search", cmAddonPath + "scroll/annotatescrollbar", cmAddonPath + "search/matchesonscrollbar", cmAddonPath + "display/placeholder", cmAddonPath + "edit/closetag", cmAddonPath + "fold/foldcode", cmAddonPath + "fold/foldgutter", cmAddonPath + "fold/indent-fold", cmAddonPath + "fold/brace-fold", cmAddonPath + "fold/xml-fold", cmAddonPath + "fold/markdown-fold", cmAddonPath + "fold/comment-fold", cmAddonPath + "mode/overlay", cmAddonPath + "selection/active-line", cmAddonPath + "edit/closebrackets", cmAddonPath + "display/fullscreen", cmAddonPath + "search/match-highlighter" ];
define(codeMirrorModules, factory); } else { define(["jquery"], factory); // for Sea.js
} } else { window.editormd = factory(); } }(function() {
if (typeof define == "function" && define.amd) { $ = arguments[0]; marked = arguments[1]; prettify = arguments[2]; katex = arguments[3]; Raphael = arguments[4]; _ = arguments[5]; flowchart = arguments[6]; CodeMirror = arguments[9]; } "use strict"; var $ = (typeof (jQuery) !== "undefined") ? jQuery : Zepto;
if (typeof ($) === "undefined") { return ; } /** * 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, 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) ? true : false; 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; }, /** * 解析和渲染流程图及时序图 * 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(); }
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, }; var markedOptions = this.markedOptions = { renderer : editormd.markedRenderer(markdownToC, rendererOptions), gfm : true, tables : true, breaks : true, pedantic : false, sanitize : (settings.htmlDecode) ? false : true, // 关闭忽略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 (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\])$/.test(text) : /^\[TOC\]$/.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 {
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 { 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 }; 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) ? false : true, // 是否忽略HTML标签，即是否开启HTML标签解析，为了安全性，默认不开启
smartLists : true, smartypants : true }; markdownDoc = new String(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(); }
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(); } } 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;
try { document.createEvent("TouchEvent"); eventType = touchEventType; } catch(e) {}
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;
}));
|
