插件地址

官方地址：https://pandao.github.io/editor.md/
使用示例：http://editor.md.ipandao.com/examples/index.html
github地址：https://github.com/pandao/editor.md

引入依赖

在入口htm文件中引入相关依赖，设置div

  1. <script src="jquery.min.js"></script>
  2. <script src="./plug/editormd/editormd.min.js"></script>
  3. <link rel="stylesheet" href="./plug/editormd/css/editormd.min.css" />
  4. <div id="test-editor">
  5.   <textarea style="display:none;">### 关于 Editor.md</textarea>
  6. </div>

初始化编辑器

如果是使用react或vue等框架，因为editormd已经挂载到全局，使用window.editormd获取对象

  1. <script type="text/javascript">
  2.   $(function() {
  3.     var editor = editormd("test-editor", {
  4.       // width  : "100%",
  5.       // height : "100%",
  6.       path   : "editormd/lib/", // 必须设置，编辑器相关模块
  7.       markdown: 'hello world', // 初始内容
  8.       emoji: true, // 表情
  9.       saveHTMLToTextarea: true,
  11.       // 工具栏设置
  12.            toolbarIcons: function () {
  13.                 // Or return editormd.toolbarModes[name]; // full, simple, mini
  14.                 // Using "||" set icons align right.
  15.                 return ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"]
  16.             },
  17.             toolbarIconsClass: { // 指定一个FontAawsome的图标类
  18.                 testIcon: "fa-gears"
  19.             },
  20.             toolbarIconTexts: { // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
  21.                 testIcon2: "测试按钮"
  22.             },
  23.             toolbarCustomIcons: { // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标（所有默认事件失效）
  24.                 file: `<input type="file" accept=".md" />`,
  25.                 faicon: `<i class="fa fa- star" onclick="alert('faicon'); "></i>`
  26.             },
  27.             toolbarHandlers: { // 自定义工具栏按钮的事件处理
  28.                 /**
  29.                  * @param {Object}      cm         CodeMirror对象
  30.                  * @param {Object}      icon       图标按钮jQuery元素对象
  31.                  * @param {Object}      cursor     CodeMirror的光标对象，可获取光标所在行和位置
  32.                  * @param {String}      selection  编辑器选中的文本
  33.                  */
  34.                 testIcon: function (cm, icon, cursor, selection) {
  36.                     //var cursor    = cm.getCursor();     //获取当前光标对象，同cursor参数
  37.                     //var selection = cm.getSelection();  //获取当前选中的文本，同selection参数
  39.                     // 替换选中文本，如果没有选中文本，则直接插入
  40.                     cm.replaceSelection("[" + selection + ":testIcon]");
  42.                     // 如果当前没有选中的文本，将光标移到要输入的位置
  43.                     if (selection === "") {
  44.                         cm.setCursor(cursor.line, cursor.ch + 1);
  45.                     }
  47.                     // this == 当前editormd实例
  48.                     console.log("testIcon =>", this, cm, icon, cursor, selection);
  49.                 },
  51.                 testIcon2: function (cm, icon, cursor, selection) {
  52.                     cm.replaceSelection("[" + selection + ":testIcon2](" + icon.html() + ")");
  53.                     console.log("testIcon2 =>", this, icon.html());
  54.                 }
  55.             },
  56.             lang: { // 自定义按钮的提示文本，即title属性
  57.                 toolbar: {
  58.                     file: "上传文件",
  59.                     testIcon: "自定义按钮testIcon",
  60.                     testIcon2: "自定义按钮testIcon2",
  61.                     undo: "撤销 (Ctrl+Z)"
  62.                 }
  63.             },
  65.       // 本地图片上传（跨域请参考官网）
  66.       imageUpload: true, // 设置本地上传按钮
  67.       imageFormats: ['jpg', 'JPG', 'gif', 'GIF', 'png', 'PNG'] // 虽然计算机不区分大小写
  68.       imageUploadURL: 'upload/file' // 上传地址
  70.       // 编辑器加载完成或图片上传完成
  71.             onload: function () {
  72.                 $("[type=\"file\"]").bind("change", function () {
  73.                     alert($(this).val());
  74.                     testEditor.cm.replaceSelection($(this).val());
  75.                     console.log($(this).val(), testEditor);
  76.                 });
  77.             }    
  78.     });
  79.   });
  80. </script>

注意事项

1、获取编辑器中所有图片地址：应该用正则匹配到这东西就可以了”editor.md（在线编辑器组件） - 图1“

参考资料

https://blog.csdn.net/zhulier1124/article/details/80242300
https://www.jianshu.com/p/176a446e5b64
https://juejin.im/post/5ac2ecbd518825558c479d0e
https://blog.csdn.net/cnhome/article/details/82855271
https://zhidao.baidu.com/question/521582839.html
https://blog.csdn.net/JontyHua/article/details/90142999