一、基础配置

当前前端渲染markdown文件比较好的插件就是marked.js了。

import marked from 'marked'

      const rendererMD = new marked.Renderer()marked.setOptions({renderer: rendererMD,gfm: true,tables: true,breaks: false,pedantic: false,sanitize: false,smartLists: true,smartypants: false,})// 对应后端接口路径，或者本地路径axios.get('/md' + this.$route.query.pageUrl).then(res => {this.markedHtml = marked(res.data) // 解析好的markdown，直接在对应容器标签上传进v-html里面即可})

二、设置回调

如果需要实现点击放大的功能，那就需要在所有img标签上绑定回调函数，获取到当前dom或者是src
刚好，markedjs给我们提供了img标签的回调

// marked解析过程中解析到图片的回调，为每个img标签绑定点击事件，并传递当前事件以及href图片链接
rendererMD.image = function(href, title, text) {return `<img οnclick="showMarkedImage(event, '${href}')" src="${href}" alt="${text}" title="${title ? title : ''}">`}

监听事件
我这里实现了投机取巧的方式，直接全屏显示了。

   window.showMarkedImage = function(e, href) {let el = e.targetlet rfs =el.requestFullScreen ||el.webkitRequestFullScreen ||el.mozRequestFullScreen ||el.msRequestFullScreenif (rfs) {rfs.call(el)}console.log(href)}

三、最终代码

import marked from 'marked'
import axios from 'axios'
import highlight from 'highlight.js'
import 'highlight.js/styles/github.css' //css可以找自己喜欢的样式
export default {name: 'index',data() {return {markedHtml: ''}},mounted() {window.showMarkedImage = function(e, href) {let el = e.targetlet rfs =el.requestFullScreen ||el.webkitRequestFullScreen ||el.mozRequestFullScreen ||el.msRequestFullScreenif (rfs) {rfs.call(el)}console.log(href)}this.mdConvert()},methods: {mdConvert() {const rendererMD = new marked.Renderer()rendererMD.image = function(href, title, text) {return `<img οnclick="showMarkedImage(event, '${href}')" src="${href}" alt="${text}" title="${title ? title : ''}">`}marked.setOptions({renderer: rendererMD,gfm: true,tables: true,breaks: false,pedantic: false,sanitize: false,smartLists: true,smartypants: false,highlight: function(code) {return highlight.highlightAuto(code).value}})axios.get('/md' + this.$route.query.pageUrl).then(res => {this.markedHtml = marked(res.data).replace(/<pre>/g,"<pre class='hljs'>")})}}
}

四、优化方向

我们已经能够获取当前被点击图片的href链接，这样我们其实可以按照自己的想法或者是需求做很多事情，比如自己手动实现一个放大显示框、利用v-viewer实现放大效果等等
而且marked.js还提供了其他很多的回调，我们可以按需使用

marked.js读取markdown文件，图片实现点击放大相关推荐

JS学习--用JS读取本地文件
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
linux下用js生成xml文件,使用JS读取XML文件的方法
由于项目上需要解析xml,于是各种百度,然后自己总结了下各个主流浏览器解析xml的方法,只能是很浅显的知道他的用法,但是还没有深层次的研究. 不同的浏览器对xml的解析方式不同,根据目前主流浏览器大致 ...
js 读取php页面内容,js读取html文件 js获取html页面显示内容
CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码如题,CSS布局HTML小编今天和大家分享HTML或者JS读取TXT文件内容的代码 JS读取TXT文件内容的代码如下: 读 ...
html表格中绑定显示xml文档内容的简单实例,JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)...
本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法.分享给大家供大家参考,具体如下: 先看xml文件: 张秋丽女 18 李文才男 31 李斯文男 22 马英女 25 孙红雷 ...
七牛云 vue 图片上传简单解说，js 上传文件图片
七牛云 vue 图片上传简单解说,js 上传文件图片一.七牛云简介首次使用七牛云存储进行项目的图片存储,整了一上午才整明白,这些官方的教程把明白人也给说糊涂了,文档很不规范. 七牛云有免费的使用额 ...
利用js读取xml文件
JS读取XML文件 XML文件: <?xml version="1.0" encoding="utf-8" ?> <CATALOG>&l ...
node.js 读取json文件
node.js 读取json文件效果图目录结构 data.json index.htm app.js 学习资源推荐效果图目录结构 data.json [{"name": & ...
js读取json文件和读取数据库的速度的差别
今天想直接js读取json文件会快点所以在网络上搜索如何读取本地的json文件结果找到了下边的这样 var Ajax = function () { $.getJSON ("js/useri ...
java解析excel的js页面,js读取excel文件并显示
js读取excel文件并展示本帖最后由 a911dalin 于 2013-12-30 13:01:17 编辑如题,读取excel中所有数据和格式,求大神帮忙,明天就得赶出来分享到: 更多 --- ...

marked.js读取markdown文件，图片实现点击放大

marked.js图片实现点击放大

一、基础配置

二、设置回调

三、最终代码

四、优化方向

marked.js读取markdown文件，图片实现点击放大相关推荐

最新文章

热门文章