marked在vue项目中改变超链接跳转方式和图片放大预览

这里我是另起一个js文件对marked的配置做了修改，参考如下

import marked from 'marked'let renderer = new marked.Renderer()const linkRenderer = renderer.linkconst imgRenderer = renderer.image// 超链接使用新窗口打开renderer.link = (href, title, text) => {const html = linkRenderer.call(renderer, href, title, text)return html.replace(/^/, ')}// marked解析过程中解析到图片的回调，为每个img标签绑定点击事件，并传递当前事件以及href图片链接renderer.image = function (href, title, text) {const img = imgRenderer.call(renderer, href, title, text)// 在图片元素上添加点击事件处理函数return `<img class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img.maxssl.com/uploads/?url=${href}" alt="${text}" title="${title " />: ''}">`}marked.setOptions({renderer,sanitize: false})export default marked

然后在vue文件中进行进行该文件的引用

// vue结构<div class="show-inputText" v-html="markedContent(form.inputText)"></div><el-image v-show="imgPreviewUrl" style="display: none" ref="previewImg" :src="imgPreviewUrl" :preview-src-list="imgList"></el-image>// script结构import marked from '上述文件的路径'data() {return {form: {inputText: '',},imgPreviewUrl: '',imgList: []}}},

最后格式化markdown文本

init() {// 获取markdown文本中所有的图片链接 this.getImgList(item.inputText) // markdown图片放大预览 let _this = this window.showMarkedImage = function (url) { _this.imgPreviewUrl = url _this.$nextTick(() => { _this.$refs.previewImg.showViewer = true // 需要把当前的图片放到最前面，后面排序 let copyImgList = [..._this.imgList] let targetUrlIndex = copyImgList.findIndex(item => item == url) copyImgList.splice(targetUrlIndex, 1) let res = [url, ...copyImgList] _this.$refs.previewImg.previewSrcList = res _this.$refs.previewImg.src = url }, 200)}, // 获取图片getImgList(inputText) {// 匹配markdown文案中所有的图片，以便后续放大预览const regex = /!\[Image\]\((.*?)\)/gconst matches = inputText.match(regex)let res = []if (matches) {for (const match of matches) {const imageUrl = match.match(/\((.*?)\)/)[1]res.push(imageUrl)}}this.imgList = res},// markdown格式化markedContent(markdownContent) {let mak = marked.marked(markdownContent)if (mak.substr(-1) == '\n') {mak = mak.slice(0, -1)}return mak},