添加插件的步骤

定义插件

在插件目录下创建一个名为你插件名称的目录：

  1. [root@liqiang.io]# tree
  2. editor.md/
  3.     plugins/
  4.         hello-world/
  5.             ....

编写插件框架

然后在插件目录下创建一个你插件名称 plugin-name.js 的文件，理论上这个文件名是随意的，但是，按照习惯，我们保持这个文件名和插件名相同，同时复制以下框架内容：

  1. [root@liqiang.io]# cat hello-world.js
  2. (function() {
  3.     var factory = function (exports) {
  4.         var $ = jQuery;           // if using module loader(Require.js/Sea.js).
  5.         var pluginName = "helloworld-dialog";
  8.         exports.fn.helloWorld = function() {
  9.             var _this       = this;
  10.             var lang        = this.lang;
  11.             var editor      = this.editor;
  12.             var settings    = this.settings;
  13.             var path        = settings.pluginPath + pluginName + "/";
  14.             var classPrefix = this.classPrefix;
  15.             var dialogName  = classPrefix + pluginName, dialog;
  17.             if (editor.find("." + dialogName).length < 1)
  18.             {            
  19.                 var dialogContent = "<div class=\"markdown-body\" style=\"font-family:微软雅黑, Helvetica, Tahoma, STXihei,Arial;height:390px;overflow:auto;font-size:14px;border-bottom:1px solid #ddd;padding:0 20px 20px 0;\"></div>";
  21.                 dialog = this.createDialog({
  22.                     name       : dialogName,
  23.                     title      : "Hello world",
  24.                     width      : 840,
  25.                     height     : 540,
  26.                     mask       : settings.dialogShowMask,
  27.                     drag       : settings.dialogDraggable,
  28.                     content    : dialogContent,
  29.                     lockScreen : settings.dialogLockScreen,
  30.                     maskStyle  : {
  31.                         opacity         : settings.dialogMaskOpacity,
  32.                         backgroundColor : settings.dialogMaskBgColor
  33.                     },
  34.                     buttons    : {
  35.                         close : [lang.buttons.close, function() {      
  36.                             this.hide().lockScreen(false).hideMask();
  38.                             return false;
  39.                         }]
  40.                     }
  41.                 });
  42.             }
  44.             dialog = editor.find("." + dialogName);
  46.             this.dialogShowMask(dialog);
  47.             this.dialogLockScreen();
  48.             dialog.show();
  49.         };
  50.     };
  51.     // CommonJS/Node.js
  52.     if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  53.     {
  54.         module.exports = factory;
  55.     }
  56.     else if (typeof define === "function")  // AMD/CMD/Sea.js
  57.     {
  58.         if (define.amd) { // for Require.js
  59.             define(["editormd"], function(editormd) {
  60.                 factory(editormd);
  61.             });
  62.         } else { // for Sea.js
  63.             define(function(require) {
  64.                 var editormd = require("./../../editormd");
  65.                 factory(editormd);
  66.             });
  67.         }
  68.     } 
  69.     else
  70.     {
  71.         factory(window.editormd);
  72.     }
  73. })();

现在这个插件其实已经可以开始使用了，因为我们没有实现任何逻辑，所以这个插件的弹出窗口不会有什么内容，就是一个空白页：

使用插件

要将插件集成到我们的 editor 里面去，那么：

  1. 你需要将你的插件文件引入到 html 中（这里以常规的 html/js 来说，没有包含打包工具等）
  2. 调用你插件的名字，例如：
  1. [root@liqiang.io]# cat test.html
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <meta charset="utf-8" />
  6.     <title>Hello Editor.md!</title>
  7.   </head>
  8.   <body>
  9.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
  10.     <div>
  11.       <button id="btn">click me</button>
  12.     </div>
  13.     <div id="editor" style="width: 90%; height: 720px">
  14.       <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
  15.       <textarea style="display: none">### Hello Editor.md !</textarea>
  16.     </div>
  17.     <script src="js/jquery.min.js"></script>
  19.     <script src="editor.md/editormd.min.js"></script>
  20.     <script src="editor.md/plugins/hello-world/hello-world.js"></script>
  21.     <script type="text/javascript">
  22.       var mdEditor = 0;
  23.       $(function () {
  24.         mdEditor = editormd("editor", {
  25.           width: "100rem",
  26.           height: "50rem",
  27.           markdown: "xxxx", // dynamic set Markdown text
  28.           path: "editor.md/lib/", // Autoload modules mode, codemirror, marked... dependents libs path
  29.         });
  30.       });
  31.     </script>
  33.     <script>
  34.       $("#btn").click(function () {
  35.         mdEditor.helloWorld();
  36.       });
  37.     </script>
  38.   </body>
  39. </html>

这里设置了一个 button 的点击响应函数，当你点击了 button 之后，就会执行你的插件，然后弹出这个窗口了。

自定义窗口

增加按钮

Dialog 的按钮是通过插件的 buttons 属性控制的，你可以设置 ”确认“、”取消“的按钮，当然这些都不是强制的名字，你可以自定义自己想要的按钮。一个示例：

  1.                     buttons : {
  2.                         enter : [lang.buttons.enter, function() {
  3.                             this.hide().lockScreen(false).hideMask();
  4.                             this.remove();                             //删除对话框
  5.                             return false;
  6.                         }],
  8.                         cancel : [lang.buttons.cancel, function() {
  9.                             this.hide().lockScreen(false).hideMask();
  10.                             this.remove();                            //删除对话框
  11.                             return false;
  12.                         }]
  13.                     }