开源在线的MarkDown编辑器 --【Editor.md】

下载

官网地址： https://pandao.github.io/editor.md/index.html
Gitee 地址：https://gitee.com/pandao/editor.md

Editor.md的简单使用

1. 编辑html

<div id="md-content" style="z-index: 1;">
	<!--这里设置z-index是为了让编辑器可以全屏显示保持在上层 -->
</div>

2. 在js中对编辑器进行初始化

var testEditor;
$(function() {
    
testEditor = editormd("md-content", {
    
      width: "90%", //编辑器宽度
      height: 740,	//编辑器高度
      path : '../lib/',	//这里要指定下载好的文件中lib的路径
      //---设置以上三个即可使用---
      theme : "dark",
      previewTheme : "dark",
      editorTheme : "pastel-on-dark",
      codeFold : true,
      //syncScrolling : false,
      saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
      searchReplace : true,
      //watch : false, // 关闭实时预览
      htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启 
      //toolbar : false, //关闭工具栏
      //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
      emoji : true,
      taskList : true,
      tocm            : true,         // Using [TOCM]
      tex : true,                   // 开启科学公式TeX语言支持，默认关闭
      flowChart : true,             // 开启流程图支持，默认关闭
      sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
      //dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
      //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
      //dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
      //dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
      //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
      imageUpload : true,
      imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
      imageUploadURL : "./php/upload.php",
      onload : function() {
    
          console.log('onload', this);
          //this.fullscreen();
          //this.unwatch();
          //this.watch().fullscreen();

          //this.setMarkdown("#PHP");
          //this.width("100%");
          //this.height(480);
          //this.resize("100%", 640);
      }
      });
  });

3. 编辑器常用的一些方法

• 跳到指定行

testEditor.gotoLine(90);

• 显示和隐藏编辑器

testEditor.show();
testEditor.hide();

• 获取编辑器中的md语言

testEditor.getMarkdown();

• 获取编辑器中的html语言

testEditor.getHTML();

• 开启和关闭实时预览

testEditor.watch();
testEditor.unwatch();

• 查看预示

testEditor.previewing();

• 全屏

testEditor.fullscreen();

• 工具栏的显示与隐藏

testEditor.showToolbar();
testEditor.hideToolbar();

• 标题的下拉菜单显示与隐藏

 testEditor.config({
    
     tocDropdown   : true,
     tocTitle      : "目录 Table of Contents",
 });

 testEditor.config("tocDropdown", false);

[TOCM]
[TOC]