editor.md中markdown编辑器的实现

​ markdown编辑器我觉得用起来非常的方便，故我就想实现一个简单的markdown编辑器

1、下载editor.md插件

git地址:https://github.com/pandao/editor.md.git
npm安装：npm install editor.md
官网：https://pandao.github.io/editor.md/

2、实现一个简单的markdown

注意事项：
1、注意css和js引用的路径，引用错误就不可以使用。
2、一定要先引用jquery，然后在引用editor.md的js代码，因为editor是依赖于jquery的。
3、editormd需要初始化。

<!--引入 editormd css核心类-->
<link rel="stylesheet" href="/markdown/css/editormd.min.css" />

<div id="markdown">
    <textarea style="display: none;" name="markdown-doc" id="markdown-doc"> ### Hello Editor.md !</textarea>
</div>
	<!--引入jq核心类-->	
	<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<!--引入 editormd js核心类-->	
    <script src="/markdown/editormd.min.js" ></script>
    <script> $(function() {
      var editor = editormd("markdown", {
      width : "100%", height : "600px", placeholder : "请输入要发布的内容...", htmlDecode : true, htmlDecode : "style,script,iframe", path : "/markdown/lib/", //黑色背景 previewTheme : "dark", }); }); </script>

页面展示

初始化的参数

<script>
            var testEditor;
            $(function() {
    
                    testEditor = editormd("test-editormd", {
    
                        width  : "100%",
            			height : "600px",
                        path : '../lib/',
                        placeholder : "请输入要发布的内容...",
			            htmlDecode : true,
			            htmlDecode : "style,script,iframe",
			            path   : "/markdown/lib/",
			            //黑色背景
			            previewTheme : "dark",
                        markdown : md,
                        codeFold : true,
                        //syncScrolling : false,
                        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                        searchReplace : true,
                        //watch : false, // 关闭实时预览
                        //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);
                        }
                });
           
                testEditor.gotoLine(90);//转到第90行
 
                testEditor.show();//显示编辑器
 
                testEditor.hide();//隐藏编辑器
 
                alert(testEditor.getMarkdown());//获取编辑器内容（不含html）
 
               alert(testEditor.getHTML());//获取编辑器html内容
           
               testEditor.watch();//开启双窗口对比
                          
               testEditor.unwatch();//取消双窗口对比
                     
               testEditor.previewing();//预览效果
              
               testEditor.fullscreen();//全屏（按ESC取消）
              
               testEditor.showToolbar();//显示工具栏
 
               testEditor.hideToolbar();//隐藏工具栏
           
               testEditor.config({
    
                        tocDropdown   : true,
                        tocTitle      : "目录 Table of Contents",
               });//TOC下拉菜单
               
              testEditor.config("tocDropdown", false);//TOC默认 });
</script>