Editor.md 插件开发指南：自定义扩展功能详解

一、插件开发概述

Editor.md 作为一款功能强大的 Markdown 编辑器，提供了灵活的插件扩展机制。通过自定义插件，开发者可以为其添加各种新功能，满足特定业务场景的需求。本文将详细介绍如何为 Editor.md 开发自定义插件。

二、插件目录结构

标准的 Editor.md 插件应遵循以下目录结构：

editor.md/
    plugins/
        plugin-name/          # 插件目录
            plugin-name.js    # 插件主文件
            ...               # 其他资源文件

三、插件开发基础模板

以下是一个完整的插件开发模板，支持多种模块加载方式：

(function() {
    var factory = function (exports) {
        var $ = jQuery;  // 如果使用模块加载器(Require.js/Sea.js)

        // 定义全局方法
        exports.customMethod = function() {
            // 方法实现...
        };

        // 定义插件方法
        exports.fn.youPluginName = function() {
            /*
            var _this = this;      // 当前 Editor.md 实例对象
            var lang = this.lang;  // 语言包
            var settings = this.settings;  // 配置项
            var editor = this.editor;     // 编辑器实例
            var cursor = cm.getCursor();  // 获取光标位置
            var selection = cm.getSelection(); // 获取选中文本

            cm.focus();  // 聚焦编辑器
            */
            
            // 插件逻辑实现...
        };
    };

    // 支持多种模块加载方式
    if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        module.exports = factory;  // CommonJS/Node.js
    }
    else if (typeof define === "function") {
        if (define.amd) {  // AMD/Require.js
            define(["editormd"], function(editormd) {
                factory(editormd);
            });
        } else {  // CMD/Sea.js
            define(function(require) {
                var editormd = require("./../../editormd");
                factory(editormd);
            });
        }
    } else {
        factory(window.editormd);  // 浏览器全局变量
    }
})();

四、插件使用方式

开发完成后，可以通过以下方式使用插件：

1. 引入插件文件

<script src="../plugins/you-plugin-name/you-plugin-name.js"></script>

2. 初始化时调用插件

var testEditor = editormd("test-editormd", {
    path: '../lib/',
    onload: function() {
        this.youPluginName();  // 直接调用插件方法
        this.executePlugin("somePluginName", "you-plugin-name/you-plugin-name"); // 动态加载并执行插件
    }
});

3. 事件触发调用

$("#btn").click(function(){
    testEditor.youPluginName();
});

五、插件开发核心API

在插件内部，可以通过以下关键对象和方法：

1. this对象：指向当前 Editor.md 实例

   • this.lang：获取语言包
   • this.settings：获取编辑器配置
   • this.editor：获取编辑器实例

2. CodeMirror API：

   • cm.getCursor()：获取光标位置
   • cm.getSelection()：获取选中文本
   • cm.focus()：聚焦编辑器

六、实际开发示例

以下是一个简单的图片对话框插件实现思路：

exports.fn.imageDialog = function() {
    var _this = this;
    var cm = this.cm;
    var selection = cm.getSelection();
    
    // 创建对话框
    var dialog = $('<div class="editormd-image-dialog">...</div>');
    
    // 处理图片插入逻辑
    dialog.find(".insert-btn").click(function(){
        var url = dialog.find(".image-url").val();
        cm.replaceSelection("![](" + url + ")");
        dialog.remove();
    });
    
    $("body").append(dialog);
};

七、插件开发最佳实践

1. 命名规范：插件名应使用小写字母和连字符，如 image-dialog
2. 模块化设计：确保插件支持多种模块加载方式
3. 错误处理：添加必要的错误检查和处理逻辑
4. 样式隔离：使用特定前缀避免样式冲突
5. 文档说明：为插件编写详细的使用文档

通过以上指南，开发者可以轻松为 Editor.md 创建功能丰富的扩展插件，满足各种定制化需求。