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

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

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

javascript 复制代码
import marked from 'marked'
let renderer = new marked.Renderer()
const linkRenderer = renderer.link
const imgRenderer = renderer.image
// 超链接使用新窗口打开
renderer.link = (href, title, text) => {
    const html = linkRenderer.call(renderer, href, title, text)
    return html.replace(/^<a /, '<a target="_blank" ')
}

// marked解析过程中解析到图片的回调,为每个img标签绑定点击事件,并传递当前事件以及href图片链接
renderer.image = function (href, title, text) {
    const img = imgRenderer.call(renderer, href, title, text)
    // 在图片元素上添加点击事件处理函数
    return `<img width="800" height="500" οnclick="showMarkedImage('${href}')" src="${href}" alt="${text}" title="${title ? title : ''
        }">`
}
marked.setOptions({
    renderer,
    sanitize: false
})

export default marked

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

javascript 复制代码
// 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文本

javascript 复制代码
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\]\((.*?)\)/g
    const 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
  },
相关推荐
老坛0018 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛0019 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾11 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐16 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价17 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花17 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101318 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树18 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜20 分钟前
跨平台UI自动化-Appium
前端
海底火旺20 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js