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
  },
相关推荐
一张假钞1 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周6 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队24 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js