editor.md #js markdown编辑器

文档： editor.md.ipandao.com

editor.md编辑器

1. 需要依赖 jquery.js 或者 zepto.js
2. 引入editormd.min.css，editormd.min.js
3. 除此之外，editor.md项目中的lib/plugins/fonts/images/languages 几个文件夹也不能删除，因为代码运行时，会引入里面的文件
   代码：

 <button onclick="handleEditormdUnWatch()">关闭实时预览</button>
 <button onclick="handleEditormdWatch()">实时预览</button>
 <button onclick="getMarkdown()">getMarkdown</button>
 <button onclick="getHTML()">getHTML</button>
<div id="editor-md">
    <textarea style="display:none;" class="content-markdown" name="content-markdown"></textarea>
</div>

<script type="text/javascript">

        var editor = editormd("editor-md", {
            width  : "100%",            //宽度，不填为100%
            height : "500px",           //高度，不填为100%
            //theme : "dark",             //主题,不填为默认主题
            path   : "editormd/lib/",   //editor.md插件的lib目录地址
            saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
            toolbarAutoFixed:true,      //工具栏自动固定定位的开启与禁用
            watch : false,                // 关闭实时预览
            toolbar  : false,             //关闭工具栏
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            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);
            }
        });
        
        editormd.katexURL = {
            js  : "./editormd/plugins/KaTeX/katex.min",  // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
            css : "./editormd/plugins/KaTeX/katex.min"   // default: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min
        };
        
        // editor.gotoLine(90);//转到第90行
 
        // editor.show();//显示编辑器

        // editor.hide();//隐藏编辑器

        // alert(testEditor.getMarkdown());//获取编辑器内容（不含html）

        // alert(editor.getHTML());//获取编辑器html内容
    
        // editor.watch();//开启双窗口对比
                    
        // editor.unwatch();//取消双窗口对比
                
        // editor.previewing();//预览效果
        
        // editor.fullscreen();//全屏（按ESC取消）
        
        // editor.showToolbar();//显示工具栏

        // editor.hideToolbar();//隐藏工具栏
    
        // editor.config({
        //         tocDropdown   : true,
        //         tocTitle      : "目录 Table of Contents",
        // });//TOC下拉菜单
        
        // editor.config("tocDropdown", false);//TOC默认 
        function handleEditormdWatch () {
            editor.watch()
        }
        function handleEditormdUnWatch() {
            editor.unwatch()
        }
        function getMarkdown() {
            console.log(editor.getMarkdown())
        }
        function getHTML() {
            console.log(editor.getHTML())
        }
</script>

vue 集成editor.md：

// src/components/EditorMd.vue
<template>
  <div :id="id">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;" v-model="contentMd"></textarea>
</div>
</template>
<script>
import '/public/editormd/css/editormd.min.css'
if (typeof window !== 'undefined') {
    var $s = require('scriptjs');
}
export default {
  name: 'editor.md',
  props: {
    id: {
      type: String,
      default: 'editor-md'
    },
    content: {
      type: String,
      default: '### Hello Editor.md !'
    },
    editorPath: {
      type: String,
      default: '/editormd',
    },
    editorConfig: {
      type: Object,
      default() {
        return {
          width: this.width,
          height: window.innerHeight > 400 ? (window.innerHeight - 100) : 380,
          path: '/editormd/lib/',
          codeFold: true,
          saveHTMLToTextarea: true,
          searchReplace: true,
          htmlDecode: 'style,script,iframe|on*',
          emoji: true,
          onchange : ()=>{
            this.$emit('change',this.instance.getPreviewedHTML(),this.instance.getMarkdown())
          }
        }
      }
    }
  },
  data() {
    return {
      instance: null,
      contentMd: ''
    };
  },
  mounted () {
    //加载依赖
      $s([
        `${this.editorPath}/jquery.min.js`,
        `${this.editorPath}/lib/marked.min.js`,
        `${this.editorPath}/lib/prettify.min.js`,
        `${this.editorPath}/lib/underscore.min.js`,
        `${this.editorPath}/lib/raphael.min.js`,
        // `${this.editorPath}/lib/flowchart.min.js`,
        // `${this.editorPath}/lib/jquery.flowchart.min.js`,
        // `${this.editorPath}/lib/sequence-diagram.min.js`
      ], () => {
        $s(`${this.editorPath}/editormd.js`, () => {
          let editorMD = window.editormd
         this.$nextTick(() => {
            if (editorMD) {
                this.instance = editorMD(this.id, this.editorConfig);
            }
          });
        });
      });
  },
  watch: {
    content: {
      handler(newVal) {
        console.log(newVal)
        this.contentMd = newVal
      },
      immediate: true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

// src/views/About.vue
<template>
  <editor-md :content="content" @change="handleChange"></editor-md>
</template>
<script>
// @ is an alias to /src
import EditorMd from '@/components/EditorMd.vue'
export default {
  name: 'About',
  components: {
    EditorMd
  },
  data () {
    return {
      content: '',
      editorPath: '/editormd'
    }
  },
  created () {
    this.fileMd()
  },
  methods: {
    fileMd () {
      let demo = `### Hello Editor.md !!!!!!`
      this.content = demo
    },
    handleChange (html, md) {
      console.log('handleChange: >>>>')
      console.log(html)
      console.log(md)
      console.log('handleChange: <<<<')
    }
  }
}
</script>