一, 了解一下editormd的属性与方法

用requirejs等工具引入所有所需依赖以后,window上就会挂载editormd方法,可直接调用

1 用于编辑的editormd

 
         
                Auto height test
         
          // 用于在外部添加功能

var testEditor = editormd("test-editormd", { // 配置选项对象
     autoHeight: true, // 自动高度 
     atLink    : false,    // disable @link
     codeFold: true, // 代码折叠
     emailLink : false,    // disable email address auto link
     emoji           : true,
     flowChart       : true, //流程图
     height : 640,
     syncScrolling: true | false | 'single' // 编辑与预览是否同步滚动 默认true
     htmlDecode      : "style,script,iframe", 
     lineNumbers     : false     // 隐藏编辑窗口行号,默认true
     mode: 'text/html', //  ["text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"];
     path   : "../lib/", // 下载的editor.md文件夹下的lib目录地址
     placeholder: 'Enjoy coding!',
     readOnly: true, // 开启会隐藏toolbar
     saveHTMLToTextarea : true,
     searchReplace: true,
     sequenceDiagram : true, // 时序图,系列图
     styleActiveLine : false,   // 高亮鼠标所在行,默认true
     taskList        : true, // - [ ] this  // - [x] this 是否支持该md语法,默认false
     todoList: true,
     tex             : true, // katex科学公式 默认false
     toc: true,
     tocContainer: '某的id如: #id', // ''空字符串表示默认的textarea, 有id表示为textarea外部
     tocDropdown   : true, // 下拉菜单,自动索引###
     tocStartLevel : 4 ,   // #### 顶格为4, 不渲染h1,h2,h3 .默认:1,
     toolbar: false, // 是否显示工具栏
     toolbarIcons:'"undo", "redo"',
     theme:  (localStorage.theme) ? localStorage.theme : "default",
     value: $('#id').val(), // textarea首尾标签之间的内容
     watch: false,  // 初始化时显示预览? 默认true
     imageUpload: false, //文件本地上传   默认false, 
     width  : "90%",
})
}

// 实例方法,可用于外部添加btn
testEditor.appendMarkdown(md);
testEditor.config('syncScrolling', true)
testEditor.getMarkdown();       // 获取 Markdown 源码
testEditor.getHTML();           // 获取 Textarea 保存的 HTML 源码
testEditor.getPreviewedHTML();  // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
testEditor.getValue(),
testEditor.setValue(code);
testEditor.fullscreen();
testEditor.setTheme(theme); //  var theme    = editormd.themes[i];
testEditor.setCodeMirrorOption("mode", mode);
testEditor.watch();
testEditor.unwatch();

用于编辑的editor.md 使用过程注意点:
1, 不支持v-model, 有因为需要特殊的保存为.md格式

image.png

2用于显示的editor.md

总结了部分后我就停笔了,因为感觉到配置选项应该是一样的


                // textarea可缺省
               ###Hello world!

$(function(){
var testEditormdView;
$.get('url').then(markdown=>{
testEditorView = editormd.markdownToHtml('test-editor-view',{
markdown: markdown,
// htmlDecode: true // 开启html标签解析,为了安全性,默认不开启
htmlDecode:  "style,script,iframe",
taskList: true,
tex: true, // 默认false
flowChart: true, // 默认false
sequenceDiagram: true // 默认false
}))
//实例方法
testEditormdView.getMarkdown()
})

二: 简单封装vue-editormd组件

1, 定义处,

2, 引入处

1, 编辑:

两件事: 保存.md, 初始化渲染md
1, 保存:

 import Editormd from '../../../utils/editormd/Editormd.vue'
  components: {
      Editormd
    },

2, 初始化:
在vue-editormd组件中写了v-html = content即可

2, 纯渲染(vue组件中):

END

简单封装一个vue-editormd组件

:大致思路