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 到 TextareasearchReplace: 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: `<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>`// }
}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-undefthis.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>

使用示例：

<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>

总结

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

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