6

editor.md 插件支持

 8 months ago
source link: https://liqiang.io/post/plugin-support-for-editor-md
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

添加插件的步骤

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




  1. [[email protected]]# tree
  2. editor.md/
  3.     plugins/
  4.         hello-world/
  5.             ....



编写插件框架



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





  1. [[email protected]]# 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";
  6.         exports.fn.helloWorld = function() {
  7.             var _this       = this;
  8.             var lang        = this.lang;
  9.             var editor      = this.editor;
  10.             var settings    = this.settings;
  11.             var path        = settings.pluginPath + pluginName + "/";
  12.             var classPrefix = this.classPrefix;
  13.             var dialogName  = classPrefix + pluginName, dialog;
  14.             if (editor.find("." + dialogName).length < 1)
  15.             {            
  16.                 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>";
  17.                 dialog = this.createDialog({
  18.                     name       : dialogName,
  19.                     title      : "Hello world",
  20.                     width      : 840,
  21.                     height     : 540,
  22.                     mask       : settings.dialogShowMask,
  23.                     drag       : settings.dialogDraggable,
  24.                     content    : dialogContent,
  25.                     lockScreen : settings.dialogLockScreen,
  26.                     maskStyle  : {
  27.                         opacity         : settings.dialogMaskOpacity,
  28.                         backgroundColor : settings.dialogMaskBgColor
  29.                     },
  30.                     buttons    : {
  31.                         close : [lang.buttons.close, function() {      
  32.                             this.hide().lockScreen(false).hideMask();
  33.                             return false;
  34.                         }]
  35.                     }
  36.                 });
  37.             }
  38.             dialog = editor.find("." + dialogName);
  39.             this.dialogShowMask(dialog);
  40.             this.dialogLockScreen();
  41.             dialog.show();
  42.         };
  43.     };
  44.     // CommonJS/Node.js
  45.     if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  46.     {
  47.         module.exports = factory;
  48.     }
  49.     else if (typeof define === "function")  // AMD/CMD/Sea.js
  50.     {
  51.         if (define.amd) { // for Require.js
  52.             define(["editormd"], function(editormd) {
  53.                 factory(editormd);
  54.             });
  55.         } else { // for Sea.js
  56.             define(function(require) {
  57.                 var editormd = require("./../../editormd");
  58.                 factory(editormd);
  59.             });
  60.         }
  61.     } 
  62.     else
  63.     {
  64.         factory(window.editormd);
  65.     }
  66. })();



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


56529fd67c1b.png


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


  1. 你需要将你的插件文件引入到 html 中（这里以常规的 html/js 来说，没有包含打包工具等）
  2. 调用你插件的名字，例如：






  1. [[email protected]]# 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>
  18.     <script src="editor.md/editormd.min.js"></script>
  19.     <script src="editor.md/plugins/hello-world/hello-world.js"></script>
  20.     <script type="text/javascript">
  21.       var mdEditor = 0;
  22.       $(function () {
  23.         mdEditor = editormd("editor", {
  24.           width: "100rem",
  25.           height: "50rem",
  26.           markdown: "xxxx", // dynamic set Markdown text
  27.           path: "editor.md/lib/", // Autoload modules mode, codemirror, marked... dependents libs path
  28.         });
  29.       });
  30.     </script>
  31.     <script>
  32.       $("#btn").click(function () {
  33.         mdEditor.helloWorld();
  34.       });
  35.     </script>
  36.   </body>
  37. </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.                         }],
  7.                         cancel : [lang.buttons.cancel, function() {
  8.                             this.hide().lockScreen(false).hideMask();
  9.                             this.remove();                            //删除对话框
  10.                             return false;
  11.                         }]
  12.                     }


    


        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK