好用的Markdown编辑器 Editor.md （与vue结合使用）

记录自己第一次写博客

最近在项目里想用一个富文本编辑器，看到狂神的这个我就搜了一下，这个编辑器叫Editor.md是一款开源功能还挺强大的编辑器。但我在官网使用的都是原生js,没有看到和vue结合的。所以我就封装了一个。

当我们使用时就直接可以把组件放入到你想放得位置就可以了。
例如：

<editor-markdown :content="this.homePage.content" :config="this.config"></editor-markdown>

EditorMd的基本使用

导入相应的js和css

  <link rel="stylesheet" href="./static/lib/editormd/css/editormd.css">
  <script src="./static/lib/editormd/jquery.min.js"></script>
  <script src="./static/lib/editormd/editormd.min.js"></script>

封装组件

<template>
  <div :id="editorId">
    <textarea>{ {this.content} }</textarea>
  </div>
</template>

<script>
import {defaultConfig} from "../../../config/editor.md";
export default {
  name: "EditorMarkdown",
  props: {
    editorId: {
      type: String,//editor名字
      default: 'editor',
    },
    config: { // 编辑器配置
      type: Object,
      default: null
    },
    content: {
      type: String,
      default: ``
    }
  },
  data() {
    return {
      editor: null,
    }
  },

  methods: {
  	//获取编辑器所需的配置，如果没有传入config参数，我们就是用默认配置
    getConfig() {
      if (this.config) {
        return this.config;
      } else {
        return defaultConfig
      }
    }
  },
  mounted() {
  	//我们传入id和配置就可创建我们的编辑器
    this.editor = editormd(this.editorId, this.getConfig());
  },
}
</script>

EditorMd的配置

const defaultConfig = {
    width: "98%", //宽度
    height: 440, //高度
    path: "./static/lib/editormd/lib/", // editormd你所下载的位置，这里我把他放在了static的lib目录下
    codeFold: true, // 代码折叠
    lineWrapping: true, // 编辑框不换行
    watch: true,// 实时预览
    saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
    searchReplace: true,
    htmlDecode: false,       // 开启 HTML 标签解析，为了安全性，默认不开启
    emoji: false, //使用表情
    taskList: true, 
    tocm: false,         // Using [TOCM] //使用目录
    tex: true,                   // 开启科学公式TeX语言支持，默认关闭
    flowChart: true,             // 开启流程图支持，默认关闭
    sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
    imageUpload: true,
    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    imageUploadURL: "./php/upload.php", //这个需要你自己的后端上传图片的api

	//我们可以自己定制编辑上方的功能，这里我是按照狂神的做的
    toolbarIcons: function () {
        return ["undo", "redo", "|",
            "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "image", "|",
            "h1", "h2", "h3", "h4", "h5", "h6", "|",
            "list-ul", "list-ol", "hr", "|",
            "link", "reference-link", "code", "code-block", "table", "datetime", "|",
            "goto-line", "watch", "preview", "fullscreen", "|",
            "model", "|", "markdown" //这两个是自定义的功能按钮的名字
        ]
    },
	//如果你还想加一些你自己的功能，你就这里写你按钮所对应的功能
    toolbarIconTexts: {
        model: `<i class="fa" style="font-size: 16px;text-align: center;display: block;font-weight: bolder;padding: 5px;" name="testIcon" unselectable="on">模板</i>`,  // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
        markdown: `<i class="fa" name="layoutmd" unselectable="on"><a href="https://www.kuangstudy.com/bbs/1356475333565587458" target="_blank">MarkDown指南</a></i>`
    }
}

EditorMd的预览

这里我们也是将其封装成一个组件

 <markdown-to-html :id="this.id" :markdown-value="this.markdownValue"></markdown-to-html>

<template>
    <div :id="this.id">
      <textarea id="content" v-model="this.markdownValue"/>
    </div>
</template>

<script>
import scriptjs from "scriptjs";
import ClipboardJS from "clipboard";

export default {
  name: "MarkdownToHtml",
  props: {
    id: {//预览的div的id
      type: String,
      default: ''
    },
    target: {
      type: String,
      default: '\".editormd-html-preview\"'
    },
    markdownValue: {//预览的Markdown值
      type: String,
      default: ''
    }
  },
  methods: {
  	//我们异步加载我们转换成HTML所需要的js （别忘了安装scriptjs,npm安装即可）
    init(id) {
	(async () => {
    await this.fetchScript('./static/lib/editormd/lib/marked.min.js')
    await this.fetchScript('./static/lib/editormd/lib/prettify.min.js')
    await this.fetchScript('./static/lib/editormd/lib/raphael.min.js')
    await this.fetchScript('./static/lib/editormd/lib/underscore.min.js')
    await this.fetchScript('./static/lib/editormd/lib/sequence-diagram.min.js')
    await this.fetchScript('./static/lib/editormd/lib/flowchart.min.js')
    await this.fetchScript('./static/lib/editormd/lib/jquery.flowchart.min.js')
    await this.fetchScript('./static/lib/editormd/editormd.min.js')
    await this.$nextTick(() => {
      this.editor = window.editormd.markdownToHTML(id, {
        htmlDecode: "style,script,iframe",  // you can filter tags decode
        emoji: true,
        taskList: true,
        tex: true,  // 科学公式
        flowChart: true,  // 流程图
        sequenceDiagram: true,  // 时序图
        taskLists: true,
      })
    })

  })()
  },
  //用来解析我们的路径来加载资源
    fetchScript(url) {
      return new Promise((resolve) => {
        scriptjs(url, () => {
          resolve()
        })
      })
    },
  },
  mounted() {
  	//对我们的Markdown文章进行转换
    this.init(this.id)
  }

</script>

总结

以上的内容就是对editormd的初步使用，editormd还有很多的功能这里是我们没有用到的，喜欢这个编辑器的小伙伴可以去官网去看看，如果遇到了问题还可以去GitHub的issue区，可能有你要的答案，我遇到的大多数问题都是在哪里找的。以上的所有样式都是可以自定义的，小伙伴们也可以按照自己的喜欢的风格去修改他的样式。