vue项目 Editor.md使用示例

简介

Editor.md
支持“标准” Markdown / CommonMark 和 Github 风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持 ToC 目录（Table of Contents）、Emoji 表情、Task lists、@链接等 Markdown 扩展语法；
支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
支持识别和解析 HTML 标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；
支持 AMD / CMD 模块化加载（支持 Require.js & Sea.js），并且支持自定义扩展插件；
兼容主流的浏览器（IE8+）和 Zepto.js，且支持 iPad 等平板设备；
支持自定义主题样式；

使用步骤

一，下载封装的Editor.md包

https://download.csdn.net/download/u012551928/87934068

预览

https://chengmaofeng.gitee.io/preview/rich-text/#/editor.md

组件代码

/components/EditorMd

<template>
  <div :id="editorId">
    <textarea v-model="content">textarea>
  div>
template>

<script>
const defaultConfig = {
  width: "98%", //宽度
  height: 440, //高度
  path: process.env.BASE_URL + "editor.md/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: "", //这个需要你自己的后端上传图片的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", "html-entities", "pagebreak", "|",
      "goto-line", "watch", "preview", "fullscreen", "clear", "search", "help", "|"
      // "model", "|", "markdown" //这两个是自定义的功能按钮的名字
    ]
  },
  //如果你还想加一些你自己的功能，你就这里写你按钮所对应的功能
  // toolbarIconTexts: {
  //   model: `模板`,  // 如果没有图标，则可以这样直接插入内容，可以是字符串或HTML标签
  //   markdown: `MarkDown指南`
  // }
}

export default {
  name: "EditorMarkdown",
  props: {
    editorId: {
      type: String,//editor名字
      default: 'editor-md',
    },
    config: { // 编辑器配置
      type: Object,
      default: null
    },
    value: {
      type: String,//editor名字
      default: '',
    },
  },
  data() {
    return {
      editor: null,
      content: ''
    }
  },
  watch:{
    content(val){
      this.$emit('input', val)
    }
  },
  created(){
    this.content = this.value
  },
  mounted() {
    //我们传入id和配置就可创建我们的编辑器
    // eslint-disable-next-line no-undef
    this.editor = editormd(this.editorId, this.getConfig());
    setTimeout(()=>{
      this.editor.on('change', () =>{
        // testEditor.getMarkdown();       // 获取 Markdown 源码
        // testEditor.getHTML();           // 获取 Textarea 保存的 HTML 源码
        // testEditor.getPreviewedHTML();  // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用

        // const getMarkdown = this.editor.getMarkdown()
        // const getHTML = this.editor.getHTML()
        const getPreviewedHTML = this.editor.getPreviewedHTML()
        this.$emit('input', getPreviewedHTML)
        // console.log(getMarkdown, getHTML, getPreviewedHTML)
      })
    })
  },

  methods: {
    //获取编辑器所需的配置，如果没有传入config参数，我们就是用默认配置
    getConfig() {
      if (this.config) {
        return {...defaultConfig, ...this.config};
      } else {
        return defaultConfig
      }
    }
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

使用示例：

<template>
  <div>
    <EditorMd v-model="dataStr">EditorMd>
    <div>
      <h3>源代码h3>
      <span style="font-size: 12px">{{dataStr}}span>
    div>
    <div style="margin-top: 15px">
      <el-button type="primary" @click="$router.back()">返回el-button>
      <el-button v-clipboard="dataStr" type="primary" @click="handleCopy">复制源代码el-button>
      <el-button type="primary" @click="handleToHome">访问官网el-button>
    div>
  div>
template>

<script>
import EditorMd from '@/components/EditorMd'

export default {
  components:{EditorMd},
  data() {
    return {
      dataStr: '请输入'
    }
  },
  mounted() {
  },
  methods: {
    handleCopy(){
      console.log('复制', this.dataStr)
      this.$message.success('复制成功')
    },
    handleToHome(){
      window.open('https://pandao.github.io/editor.md/')
    }
  }
}
script>

<style scoped>

style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

总结

本文仅仅简单介绍了Editor.md使用，更多富文本配置及使用方式，参考：https://pandao.github.io/editor.md/

如果觉得有用欢迎点赞关注
有问题私信我！！~~