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
  },
相关推荐
mCell21 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip21 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript