一、Basic总结

使用editor

①、资源文件夹

editor.md-master 解压下的资源夹

css 文件夹
fonts 文件夹
images文件夹
lib 文件夹
plugins文件
editormd.min.js 文件
jquery.min.js（editor.md-master/examples/js文件夹）

②、配置文件

导入css

    <!-- 寻找路径：editor.md-master/examples/css -->
    <link rel="stylesheet" href="../css/style.css">
    <!-- 寻找路径：editor.md-master/css -->
    <link rel="stylesheet" href="../css/editormd.css">

导入js

    <!-- 寻找路径：editor.md-master/examples/js -->
    <script src="../js/jquery.min.js"></script>
    <!-- 寻找路径：editor.md-master/ -->
    <script src="../js/editormd.min.js"></script>
    <!-- 寻找路径：editor.md-master/ -->
    <script src="../plugins/html-entities-dialog/html-entities-dialog.js"></script>

了解为啥需要fonts文件夹、images文件夹

editor.md-master/css的样式文件中(例子：fonts文件)

/* 路径：editor.md-master/fonts */
@font-face {
    
    
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), 
}

editor结构

①、创建editormd对象

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的元素id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("test-editormd", {
    
    
        // editormd对象属性
    });
})

②、editormd对象属性

常用属性

属性	作用	示例
width	文本显示宽度	width: “90%”,
height	文本显示高度	height: 640,
path	lib文件夹位置	path: “…/lib/”,
theme	设置工具栏主题	theme: “dark”,
previewTheme	设置实时预览主题	previewTheme: “dark”,
editorTheme	设置文本输入主题	editorTheme: “pastel-on-dark”,
autoHeight	设置自动高度	autoHeight: true,
delay	设置延迟解析和预览	delay: 1000,
readOnly	只读模式	readOnly: true,
styleActiveLine	光标不移动	styleActiveLine : false,
codeFold	代码折叠	codeFold: true,
toolbarAutoFixed	工具栏固定	toolbarAutoFixed:false,
syncScrolling	设置预览页和编辑页滚动（false:禁用）	syncScrolling:false
pageBreak	开启分页符解析	pageBreak : true,
sequenceDiagram	开启时序图/序列图，默认关闭	sequenceDiagram : true
flowChart	开启流程图，默认关闭	flowChart : true,
tex	开启科学公式TeX语言支持，默认关闭	tex:true
emoji	开启字体图标解析	emoji: true,
htmlDecode	解码所有html标记和属性	htmlDecode: true,
toc	开启Toc目录,默认开启	toc:true,
tocStartLevel	从第n个标题生效目录，如：h2(##)开始	tocStartLevel: 2
tocm	开启[TOCM]目录	tocm: true,
tocContainer	自定义 ToC 容器层(目录显示位置)	tocContainer: “#custom-toc-container”,
tocDropdown	目录是否折叠	tocDropdown: true
tocTitle	自定义目录的名字	tocTitle: “目录 Table of Contents”,
taskList	GFM任务列表	taskList : true
imageUpload	开启图片文件上传	imageUpload: true,
imageFormats	上传图片格式	imageFormats: [“jpg”, “jpeg”, “gif”, “png”, “bmp”, “webp”],
imageUploadURL	上传请求地址（路由）	imageUploadURL: “/upload”,
crossDomainUpload	允许跨域请求	crossDomainUpload: true,
uploadCallbackURL	上传成功跳转地址	uploadCallbackURL: “http://localhost/editor.md///upload_callback.html?test=dfdf”

其他属性

属性	作用	示例
dialogLockScreen	设置弹出层对话框不锁屏，全局通用，默认为true	dialogLockScreen : false,
dialogShowMask	设置弹出层对话框显示透明遮罩层，全局通用，默认为true	dialogShowMask : false,
dialogDraggable	设置弹出层对话框不可拖动，全局通用，默认为true	dialogDraggable : false,
dialogMaskOpacity	设置透明遮罩层的透明度，全局通用，默认值为0.1	dialogMaskOpacity : 0.4,
dialogMaskBgColor	设置透明遮罩层的背景颜色，全局通用，默认为#fff	dialogMaskBgColor : “#000”,
previewCodeHighlight	关闭预览 HTML 的代码块高亮，默认开启	previewCodeHighlight : false,
watch	关闭实时预览	watch : false,
toolbar	关闭工具栏	toolbar : false,
saveHTMLToTextarea	保存 HTML 到 Textarea	saveHTMLToTextarea: true,
markdown	回调函数markdown文件	markdown: md,
appendMarkdown	回调函数markdown文件	appendMarkdown : md,
markdownSourceCode	是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签	markdownSourceCode : true,

③、editormd对象方法

常用方法

方法	作用	示例
gotoLine(num)	跳转光标定位到指定行	testEditor.gotoLine(90);
show()	显示编辑器	testEditor.show();
hide()	隐藏编辑器	testEditor.hide();
getMarkdown()	获取 Markdown 代码	testEditor.getMarkdown();
getHTML()	获取转HTML 代码	testEditor.getHTML()
watch()	打开实时预览	testEditor.watch();
unwatch()	关闭实时预览	testEditor.unwatch();
previewing()	全窗口显示（esc还原）	testEditor.previewing();
fullscreen()	全屏显示（esc还原）	testEditor.fullscreen();
showToolbar()	显示工具栏	testEditor.showToolbar();
hideToolbar()	隐藏工具栏	testEditor.hideToolbar();
remove	移除editor.md	testEditormd.editor.remove();
getPreviewedHTML()	获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用	testEditor.getPreviewedHTML();
config()	设置editormd对象属性	testEditor.config({tocDropdown: true,tocTitle: “目录 Table of Contents”,});

其他方法

方法	作用	示例
setXXX	设置editor对象属性
setToolbarAutoFixed	是否固定工具栏	testEditor.setToolbarAutoFixed(true);
getXXX	获取editor对象属性
getMarkdown()	获取 Markdown 代码	testEditor.getMarkdown();

④、editormd对象事件

事件	作用
onload	editormd对象加载完成后触发
onchange	editormd对象文本内容改变触发
onfullscreen	editormd对象文本编辑器进入全屏触发
onfullscreenExit	editormd对象文本编辑器退出全屏时触发
onresize	editormd对象文本编辑器尺寸改变触发
onpreviewing	editormd对象文本编辑器全窗口预览触发
onpreviewed	editormd对象文本编辑器退出全窗口预览触发
onwatch	editormd对象文本编辑器开启实时预览触发
onunwatch	editormd对象文本编辑器关闭实时预览触发
onscroll	editormd对象文本编辑器滚动时触发
onpreviewscroll	editormd对象文本编辑器预览视图滚动时触发

设置文本获取/设置

$("#get-md-btn").click(function() {
    
    
    alert(testEditor.getMarkdown());
});
$("#get-md-btn2").click(function() {
    
    
    testEditor.appendMarkdown("tesadfa")
});
$("#get-md-btn3").click(function() {
    
    
    testEditor.setMarkdown("setMarkdown")
});

二、编辑器业务实现

表单取值

①、getMarkdown

获取Markdown文本内容

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
    });
})
testEditor.getMarkdown()

②、getHTML

获取HTML代码

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
    });
})
testEditor.getHTML()

③、getPreviewedHTML

获取HTML代码

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        saveHTMLToTextarea: true // 保存 HTML 到 textarea
    });
})
testEditor.getPreviewedHTML()

设置编辑器自动高度

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        width: "90%",
        height: 640,
        path: '../lib/',
        // 设置自动高度
        autoHeight: true,
    });
})

移除editor.md

$("#remove-btn").click(function() {
    
    
    testEditormd.editor.remove();
});

延迟解析预览

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 延迟预览
        delay: 1000,
    });
})

只读模式

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 设置只读模式
        readOnly: true,
        // 光标不移动
        styleActiveLine : false,   // disable active line
    });
})

工具栏的固定

$("#enable-btn").bind("click", function() {
    
    
testEditor.setToolbarAutoFixed(true);
// or
//testEditor.config("toolbarAutoFixed", true);
});

预览页编辑页滚动

var testEditor;
$(function() {
    
    
    testEditor = editormd("test-editormd", {
    
    
        width: "90%",
        height: 360,
        path: "../lib/"
    });
    /**
    * 滚动
    */
    $(".bisync-btn").click(function() {
    
    
        testEditor.config("syncScrolling", true);
    });
    /**
    * 滚动
    */
    $(".single-btn").click(function() {
    
    
        testEditor.config("syncScrolling", "single");
    });
    /**
    * 禁用
    */
    $(".disabled-btn").click(function() {
    
    
        testEditor.config("syncScrolling", false);
    });
});

外部使用工具栏

①、操作方法

/**
* 1. 撤销操作
*/
$("#undo").bind('click', function() {
    
    
    $.proxy(testEditor.toolbarHandlers.undo, testEditor)();
});
/**
* 2. 加粗：**xxx**
*/
$("#insert-bold").bind('click', function() {
    
    
    $.proxy(testEditor.toolbarHandlers.bold, testEditor)();
    testEditor.focus();
});
/**
* 3. 设置标题：h3
*/
$("#insert-h6").bind('click', function() {
    
    
    $.proxy(testEditor.toolbarHandlers.h3, testEditor)();
    testEditor.focus();
});
/**
* 4. 设置重点： ``
*/
$("#insert-inline-code").bind('click', function() {
    
    
    $.proxy(testEditor.toolbarHandlers.code, testEditor)();
    testEditor.focus();
});

②、对话框

/**
* 1. 链接对话框
* the Second method : using manually loaded dialog plugin
*/
$("#open-html-entities-dialog").bind('click', function() {
    
    
    testEditor.htmlEntitiesDialog();
});
/**
* 2. 打开图片连接对话框
*/
$("#open-image-dialog").bind('click', function() {
    
    
    testEditor.executePlugin("imageDialog", "../plugins/image-dialog/image-dialog"); // load and execute plugin
});
/**
* 3. 打开帮助对话框
*/
$("#open-help-dialog").bind('click', function() {
    
    
    $.proxy(testEditor.toolbarHandlers.help, testEditor)();
});

★★★编辑器文本相关操作

①、设置光标位置

/**
* 1. 设置光标位置
*/
$("#btn1").click(function() {
    
    
    testEditormd.setCursor({
    
    
        line: 1,
        ch: 2
    });
    testEditormd.focus();
});

②、获取光标位置

/**
* 2. 获取光标位置
*/
$("#btn2").click(function() {
    
    
    console.log("getCursor =>", testEditormd.getCursor());
    testEditormd.focus();
});

③、设置选中文本

/**
* 3. 设置选中文本
*/
$("#btn3").click(function() {
    
    
    testEditormd.setSelection({
    
    
        line: 1,
        ch: 0
    }, {
    
    
        line: 5,
        ch: 100
    });
    testEditormd.focus();
});

④、获取选中文本内容

/**
* 4. 获取选中文本内容
*/
$("#btn4").click(function() {
    
    
    console.log("getSelection =>", testEditormd.getSelection());
    testEditormd.focus();
});

⑤、替换选中文本

/**
* 5. 替换选中文本
*/
$("#btn5").click(function() {
    
    
    testEditormd.replaceSelection("$$$$$$$$$");
    testEditormd.focus();
});

⑥、光标位置插入文本

/**
* 6. 光标位置插入文本
*/
$("#btn6").click(function() {
    
    
    testEditormd.insertValue("????");
    testEditormd.focus();
});

三、★★★编辑器工具实现

自定义工具栏

字体图标：https://fontawesome.com.cn/

①、定义工具栏要显示的图标

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        /**
        * 1. 返回显示的图标:显示的字体图标类（FontAawsome）
        */
        toolbarIcons: function() {
    
    
            // 工具栏显示的图标
            return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon", "file"]
        },
    });
});

②、定义要显示的图标

FontAawsome字体图标：①中的testIcon等自定义名称

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        /**
        * 2. 设置图标样式，设置图标类名（FontAawsome）
        *  例如：toolbarIcons函数中返回的占位字符串，testIcon，testIcon2
        */
        toolbarIconsClass: {
    
    
            // testIcon: "fa-gears" // 指定一个FontAawsome的图标类
            testIcon: "fa-hand-o-down",
            // testIcon2: "fa-hand-o-left"
        },
    });
});

③、设置默认显示

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        /**
        * 3. 设置图标默认显示，如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
        * 例如：toolbarIcons函数中返回的占位字符串，testIcon，testIcon2
        */
        toolbarIconTexts: {
    
    
            testIcon2: "测试按钮Test button" // 如果没有图标，直接插入内容，可以是字符串或HTML标签
        },
    });
});

④、设置自定义工具的功能

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        /**
        * 4. 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
        * 例如：toolbarIcons函数中返回的占位字符串，file，faicon(FontAawsome)
        */
        toolbarCustomIcons: {
    
    
            file: "<input type=\"file\" accept=\".md\" />",
            faicon: "<i class=\"fa fa-star\" οnclick=\"alert('faicon');\"></i>"
        },
    });
});

⑤、设置自定义按钮的事件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        /**
        * 5. 自定义工具栏按钮的事件处理
        * 例如：toolbarIcons函数中返回的占位字符串，testIcon，testIcon2
        */
        toolbarHandlers: {
    
    
            /**
            * @param {Object}      cm         CodeMirror对象,可以获取下面的对象
            * @param {Object}      icon       图标按钮jQuery元素对象，可以获取图标的内容
            * @param {Object}      cursor     CodeMirror的光标对象，可获取光标所在行和位置
            * @param {String}      selection  编辑器选中的文本
            */
            testIcon: function(cm, icon, cursor, selection) {
    
    
                //var cursor    = cm.getCursor();     //获取当前光标对象，同cursor参数
                //var selection = cm.getSelection();  //获取当前选中的文本，同selection参数
                // 替换选中文本，如果没有选中文本，则直接插入
                cm.replaceSelection("[" + selection + ":testIcon]");
                // 如果当前没有选中的文本，将光标移到要输入的位置
                if (selection === "") {
    
    
                    cm.setCursor(cursor.line, cursor.ch + 1);
                }
                // this == 当前editormd实例
                console.log("testIcon =>", this, cm, icon, cursor, selection);
            },
            testIcon2: function(cm, icon, cursor, selection) {
    
    
                cm.replaceSelection("[" + selection + ":testIcon2](" + icon.html() + ")");
                console.log("testIcon2 =>", this, icon.html());
            }
        },
    });
});

⑥、设置悬浮提示内容

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        /**
        * 6. 设置鼠标悬浮图标显示的提示内容
        */
        lang: {
    
    
            toolbar: {
    
    
                file: "上传文件",
                testIcon: "自定义按钮testIcon", // 自定义按钮的提示文本，即title属性
                testIcon2: "自定义按钮testIcon2",
                undo: "撤销 (Ctrl+Z)"
            }
        },
    });
});

自定义编辑器主题

①、工具栏主题

定义主题样式

格式：.editormd-theme-xxx

		/**
          文本编辑边框颜色设置
        */
        .editormd-theme-red {
    
    
            border-color: red;
        }
        /**
          工具栏背景颜色设置
        */
        .editormd-theme-red .editormd-toolbar {
    
    
            background: red;
            border-color: red;
        }
        /**
          字体图标边框颜色设置
        */
        .editormd-theme-red .editormd-menu>li>a {
    
    
            color: #777;
            border-color: red;
        }
        /**
          | 线分隔颜色设置
        */
        .editormd-theme-red .editormd-menu>li.divider {
    
    
            border-right: 1px solid red;
        }
        /**
          鼠标悬浮字体样式颜色设置
        */
        .editormd-theme-red .editormd-menu>li>a:hover,
        .editormd-menu>li>a.active {
    
    
            border-color: red;
            background: red;
        }

使用定义主题样式

css后缀（.editormd-theme-red）: red

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        theme: "red",
    });
})

②、编辑页主题

看源码，我是菜鸟，不会弄

③、预览页主题

看源码，我是菜鸟，不会弄

自定义键盘快捷键

①、设置自定义键盘按键

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        /**
        * 1. 设置自定义键盘按键
        */
        disabledKeyMaps: [
            "Ctrl-B", "F11", "F10" // disable some default keyboard shortcuts handle
        ],
    });
})

②、添加/移除键盘事件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        /**
        * 2. 定义触发键，触发函数
        */
        onload: function() {
    
    
            var keyMap = {
    
    
                "Ctrl-S": function(cm) {
    
    
                    alert("Ctrl+S");
                },
                "Ctrl-A": function(cm) {
    
     // default Ctrl-A selectAll
                    alert("Ctrl+A");
                    cm.execCommand("selectAll");
                },
            };
            var keyMap2 = {
    
    
                "Ctrl-T": function(cm) {
    
    
                    alert("Ctrl+T");
                }
            };
            /**
            * 3. 添加事件、移除事件
            */
            this.addKeyMap(keyMap);
            this.addKeyMap(keyMap2);
            this.removeKeyMap(keyMap2); // remove signle key
        }
    });
})

自定义插件

①、定义自定义插件

plugins/test-plugin/test-plugin下的文件

$(function() {
    
    
    var factory = function (exports) {
    
    
		var $            = jQuery;           // if using module loader(Require.js/Sea.js).
		exports.testPlugin = function(){
    
    
			alert("testPlugin");
		};
		exports.fn.testPluginMethodA = function() {
    
    
			alert("testPluginMethodA");
		};
	};
	// 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
			define(["editormd"], function(editormd) {
    
    
                factory(editormd);
            });
		} else {
    
     // for Sea.js
			define(function(require) {
    
    
                var editormd = require("./../../editormd");
                factory(editormd);
            });
		}
	} 
	else
	{
    
    
        factory(window.editormd);
	}

})();

②、使用自定义插件

editormd.loadPlugin("../plugins/test-plugin/test-plugin", function(){
    
    
    editormd.testPlugin();
});

扩展成员方法和属性

设置

①、设置属性

function EditormdExtend() {
    
    
    // one by one setting
    this.set("propertyA", "propertyA");
    // mutil
    this.extend({
    
    
        propertyC: "propertyC", 
        propertyB: "propertyB",
        methodD: function() {
    
    
            console.log("methodD");
        }
    });
}

②、设置方法

function EditormdExtend() {
    
    
    // 方式一
    this.extend("methodC", function() {
    
    
        console.log("methodC");
    });
    // 方式二
    testEditor.extend("methodA", function() {
    
    
        console.log("methodA");
    });
    // 方式三
    this.set("methodE", function() {
    
    
        console.log("mothodE", this);
    });
// mutil
    this.extend({
    
    
        propertyC: "propertyC", // override, you can override other default method.
        propertyB: "propertyB",
        methodD: function() {
    
    
            console.log("methodD");
        }
    });
    // 方式四 
    this.methodB = function() {
    
    
        console.log("methodB");
    };
}

③、统一设置

function EditormdExtend() {
    
    
    // mutil
    this.extend({
    
    
        propertyC: "propertyC", // override, you can override other default method.
        propertyB: "propertyB",
        methodD: function() {
    
    
            console.log("methodD");
        }
    });
    // 调用方法
    testEditor.methodD();
    this.methodD();
    editormd.methodOne();
    // 调用属性
    console.log(this, this.propertyA, this.propertyB);
}

加载

var testEditor;
$(function() {
    
    
    editormd.methodOne = function() {
    
    
        console.log("editormd.methodOne");
    };
    testEditor = editormd("test-editormd", {
    
    
        width: "90%",
        height: 720,
        path: '../lib/',
        onload: function() {
    
    
            this.customMethod();
            // 加载配置属性方法
            $.proxy(EditormdExtend, this)();
        },
    });
    editormd.methodOne();
});

四、其他

识别和解析HTML标签

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 解码所有html标记和属性
        htmlDecode: true,
    });
})

②、使用

解析文本内代码可以生效在页面

&lt;style type="text/style"&gt;
body{background:skyblue;}
&lt;/style&gt;

&lt;script type="text/javscript"&gt;
alert("script");
&lt;/script&gt;

自动生成目录

①、配置文件

#custom-toc-container {
    
    
     border: 1px solid #ddd;
     width: 90%;
     margin: 0 auto 15px;
     // 可见
     overflow: visible;
}
#custom-toc-container > .markdown-toc {
    
    
    padding: 10px;
}

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启Toc目录,默认开启
        toc: true,
        // 从第n个标题生效目录，如下 h2(##)开始
        tocStartLevel: 2 
    });
})

②、使用

tocContainer：指定的位置（标签id），默认[toc]

tocDropdown：目录是否折叠

tocTitle：自定义目录的名字

tocm：开启[tocm]目录解析

/**
* 1. 生成目录树
*  tocContainer：指定的位置，默认[toc]
*  tocDropdown: 目录是否折叠
*/
$("#insert-btn").click(function() {
    
    
    testEditor.config({
    
    
        tocContainer: "#custom-toc-container",
        tocDropdown: false
    });
});

GFM任务列表

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 任务列表
        taskList : true
    });
})

②、使用

// 选中
- [x]

// 未选中
- [ ]

@链接

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 关闭 @link
        atLink: false, 
        // 关闭 [email protected]
        emailLink: false, // disable email address auto link
    });
})

②、使用

@ link
123456@qq.com

图标相关

配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启图标显示解析
        emoji: true
    });
})

使用

①、Emoji

查询地址

https://www.webfx.com/tools/emoji-cheat-sheet/

下载地址

https://github.com/muan/emoji

配置emoji路径

// You can custom Emoji's graphics files url path
editormd.emoji = {
    
    
    path: "http://www.emoji-cheat-sheet.com/graphics/emojis/",
    ext: ".png"
};

②、Twemoji表情

下载地址

https://github.com/twitter/twemoji

配置twemoji路径

// Twitter Emoji (Twemoji)  graphics files url path    
editormd.twemoji = {
    
    
    path: "http://twemoji.maxcdn.com/72x72/",
    ext: ".png"
};

使用

// 格式
:tw-xxxx:

// 示例
:tw-1f504: 
:tw-30-20e3:
:tw-31-20e3: 
:tw-32-20e3: 
:tw-33-20e3: 
:tw-34-20e3: 
:tw-35-20e3: 
:tw-36-20e3: 
:tw-37-20e3: 
:tw-38-20e3: 
:tw-39-20e3: 
:tw-1f51f:

③、Font Awesome图标

查询图标

https://fontawesome.com/icons

https://fontawesome.com/icons/categories/humanitarian

使用

// 格式
:fa-xxxx:

// 示例
:fa-wifi: 
:fa-twitter: 
:fa-google-plus: 
:fa-git-square: 
:fa-github-alt: 
:fa-external-link-square:

科学公式TeX

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启科学公式
        tex  : true
    });
})

②、使用

$$文本内容$$

流程图

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启流程图
        flowChart : true,
    });
})

②、使用

```mermaid
flowchat
st=>start: User login
op=>operation: Operation
cond=>condition: Successful Yes or No?
e=>end: Into admin

st->op->cond
cond(yes)->e
cond(no)->op
```

时序图/序列图

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启时序图/序列图
        sequenceDiagram : true,
    });
})

②、使用

方式一

```seq
A->B: Message
B->C: Message
C->A: Message
```

方式二

```mermaid
sequenceDiagram
Andrew->>China: Says Hello 
Note right of China: China thinks\nabout it 
China-->>Andrew: How are you? 
Andrew->>China: I am good thanks!
```

分页符

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启分页符解析
        pageBreak : true,
    });
})

②、使用

[========]

五、图片相关操作

图片上传

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启图片文件上传
        imageUpload: true,
        // 上传图片格式
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        // 上传请求地址（路由）
        imageUploadURL: "/upload",
    });
})
testEditor.getMarkdown()

②、客户端返回结果

/*
上传的后台只需要返回一个 JSON 数据，结构如下：
*/
{
    
    
    success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
    message : "提示的信息，上传成功或上传失败及错误信息等。",
    url     : "图片地址"        // 上传成功时才返回
}

图片跨域上传

①、配置文件

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启图片文件上传
        imageUpload: true,
        // 上传图片格式
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        // 上传请求地址（路由）
        imageUploadURL: "/upload",
        // 允许跨域请求
        crossDomainUpload: true,
        uploadCallbackURL: "http://localhost/editor.md/upload_callback.html?test=dfdf"
    });
})
testEditor.getMarkdown()

②、客户端返回结果

/*
上传的后台只需要返回一个 JSON 数据，结构如下：
*/
{
    
    
    success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
    message : "提示的信息，上传成功或上传失败及错误信息等。",
    url     : "图片地址"        // 上传成功时才返回
}

六、事件处理

事件注册和解除方法

①、解除事件(off)

var testEditor;
$(function() {
    
    
    testEditor = editormd("test-editormd", {
    
    
        width: "90%",
        height: 720,
        path: '../lib/',
        tex: true,
        htmlDecode: true,
        flowChart: true,
        taskList: true,
        sequenceDiagram: true,
        onscroll: function(event) {
    
    
            console.clear();
            console.log("onscroll =>", this, this.id, this.settings, event);
        },
        onpreviewscroll: function(event) {
    
    
            console.clear();
            console.log("onpreviewscroll =>", this, this.id, this.settings, event);
        },
        onload: function() {
    
    
            /**
            * 1. 解除事件绑定 off
            */
            this.off("previewscroll");
        }
    });
});

②、重写事件(on)

var testEditor;
$(function() {
    
    
testEditor = editormd("test-editormd", {
    
    
    width: "90%",
    height: 720,
    path: '../lib/',
    tex: true,
    htmlDecode: true,
    flowChart: true,
    taskList: true,
    sequenceDiagram: true,
    onscroll: function(event) {
    
    
        console.clear();
        console.log("onscroll =>", this, this.id, this.settings, event);
    },
    onpreviewscroll: function(event) {
    
    
        console.clear();
        console.log("onpreviewscroll =>", this, this.id, this.settings, event);
    },
    onload: function() {
    
    
        /**
        * 2. 重写事件 on
        * Override settings.onpreviewscroll
        */
        this.on("previewscroll", function() {
    
    
            console.clear();
            console.log("on() => Override settings.onpreviewscroll =>", this, this.id, event, (new Date).getTime());
        });
        // defined event bind
        this.on("resize", function() {
    
    
            console.clear();
            console.log("onresize =>", this, this.id, event, (new Date).getTime());
        });
    }
});

加载完成事件处理

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 事件加载完成触发事件
        onload: function() {
    
    
            alert("onloaded");
            console.log("onloaded =>", this, this.id, this.settings);
        }
    });
})

变化监听处理

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        onchange: function() {
    
    
            $("#output").html("onchange : this.id =>" + this.id + ", markdown =>" + this.getValue());
            console.log("onchange =>", this, this.id, this.settings, this.state);
        }
    });
})

全屏事件处理

①、进入全屏触发

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 编辑器进入全屏触发
        onfullscreen: function() {
    
    
            alert("onfullscreen");
            console.log("onfullscreen =>", this, this.id, this.settings);
        },
    });
})

②、退出全屏触发

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 编辑器退出全屏时触发
        onfullscreenExit: function() {
    
    
            alert("onfullscreenExit");
            console.log("onfullscreenExit =>", this, this.id, this.settings);
        }
    });
})

Onresize

编辑器尺寸改变触发

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 编辑器尺寸改变触发
        onresize: function() {
    
    
            this.setMarkdown("state.loaded > bind onresize > window.onresize, editormd watch/unwatch/fullscreen/fullscreenExit/toolbar show|hide " + (new Date).getTime());
            console.log("onresize =>", this, this.id, this.settings);
        }
    });
})

Onpreviewing/Onpreviewed

①、全窗口预览

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 编辑器全窗口预览触发
        onpreviewing: function() {
    
    
            console.log("onpreviewing =>", this, this.id, this.settings);
        },
    });
})

②、退出全窗口预览

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 编辑器退出全窗口预览
        onpreviewed: function() {
    
    
            console.log("onpreviewed =>", this, this.id, this.settings);
        }
    });
})

Onwatch/Onunwatch

①、开启实时预览触发

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 开启实时预览触发
        onwatch: function() {
    
    
            console.log("onwatch =>", this, this.id, this.settings);
        },
    });
})

②、关闭实时预览触发

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 关闭实时预览触发
        onunwatch: function() {
    
    
            console.log("onunwatch =>", this, this.id, this.settings);
        }
    });
})

Onscroll/Onpreviewscroll

①、文本编辑器滚动时触发

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 文本编辑器滚动时触发
        onscroll: function(event) {
    
    
            console.clear();
            console.log("onscroll =>", this, this.id, this.settings, event);
        },
    });
})

②、预览视图滚动时触发

var testEditor;
$(function() {
    
    
    /**
     * 参数一：操控的文本id
     * 参数二：edittormd对象属性对象
     */
    testEditor = editormd("文本输入id", {
    
    
        // editormd对象属性
        // 预览视图滚动时触发
        onpreviewscroll: function(event) {
    
    
            console.clear();
            console.log("onpreviewscroll =>", this, this.id, this.settings, event);
        }
    });
})

示例：创建一个笔记本

①、mysql表创建

CREATE TABLE article(
	id int(10) NOT NULL AUTO_INCREMENT COMMENT '文章唯一id',
	title varchar(100) NOT NULL COMMENT '标题',
	content longtext NOT NULL COMMENT '文章内容'
	PRIMARY KEY (id)
)ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8

②、editormd对象构建

var testEditor;

    //window.onload = function(){ }
    $(function() {
    
    
        testEditor = editormd("article-content", {
    
    
            width : "95%",
            height : 500,
            syncScrolling : "single",
            path : "../editormd/lib/",
            // 自定义的增强配置！
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            emoji: true, // 开启表情的功能！ 图片的本地配置！
            // theme: "light",//工具栏主题
            // previewTheme: "dark",//预览主题
            // editorTheme: "pastel-on-dark",//编辑主题
            // markdown的配置！
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //图片上传
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/article/upload", // 文件上传的处理请求！
            onload : function() {
    
    
                console.log('onload', this);
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons : function() {
    
    
                return ["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",
                    "releaseIcon", "index"]
            },
            /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
            toolbarIconTexts : {
    
    
                releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                index : "<span bgcolor=\"red\">返回首页</span>",
            },
            /*给自定义按钮指定回调函数*/
            toolbarHandlers:{
    
    
                releaseIcon : function(cm, icon, cursor, selection) {
    
    
                    //表单提交
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
                    mdEditorForm.submit();
                },
                index : function(){
    
    
                    window.location.href = '/';
                },
            }
        });
    });

// 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//图片上传
imageUpload : true,
imageFormats : [“jpg”, “jpeg”, “gif”, “png”, “bmp”, “webp”],
imageUploadURL : “/article/upload”, // 文件上传的处理请求！
onload : function() {
console.log(‘onload’, this);
},
/指定需要显示的功能按钮/
toolbarIcons : function() {
return [“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”,
“releaseIcon”, “index”]
},
/自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页/
toolbarIconTexts : {
releaseIcon : “<span bgcolor=“gray”>发布”,
index : “<span bgcolor=“red”>返回首页”,
},
/给自定义按钮指定回调函数/
toolbarHandlers:{
releaseIcon : function(cm, icon, cursor, selection) {
//表单提交
mdEditorForm.method = “post”;
mdEditorForm.action = “/article/addArticle”;//提交至服务器的路径
mdEditorForm.submit();
},
index : function(){
window.location.href = ‘/’;
},
}
});
});

editot.md学习笔记

一、Basic总结

使用editor

①、资源文件夹

②、配置文件

editor结构

①、创建editormd对象

②、editormd对象属性

常用属性

其他属性

③、editormd对象方法

常用方法

其他方法

④、editormd对象事件

设置文本获取/设置

二、编辑器业务实现

表单取值

①、getMarkdown

②、getHTML

③、getPreviewedHTML

设置编辑器自动高度

移除editor.md

延迟解析预览

只读模式

工具栏的固定

预览页编辑页滚动

外部使用工具栏

①、操作方法

②、对话框

★★★编辑器文本相关操作

①、设置光标位置

②、获取光标位置

③、设置选中文本

④、获取选中文本内容

⑤、替换选中文本

⑥、光标位置插入文本

三、★★★编辑器工具实现

自定义工具栏

①、定义工具栏要显示的图标

②、定义要显示的图标

③、设置默认显示

④、设置自定义工具的功能

⑤、设置自定义按钮的事件

⑥、设置悬浮提示内容

自定义编辑器主题

①、工具栏主题

定义主题样式

使用定义主题样式

②、编辑页主题

③、预览页主题

自定义键盘快捷键

①、设置自定义键盘按键

②、添加/移除键盘事件

自定义插件

①、定义自定义插件

②、使用自定义插件

扩展成员方法和属性

设置

①、设置属性

②、设置方法

③、统一设置

加载

四、其他

识别和解析HTML标签

①、配置文件

②、使用

自动生成目录

①、配置文件

②、使用

GFM任务列表

①、配置文件

②、使用

@链接

①、配置文件

②、使用

图标相关

配置文件

使用

①、Emoji

②、Twemoji表情