Vue配置marked链接添加target="_blank"的方法


Posted in Javascript onJuly 19, 2019

1."引入marked

package.json

"dependencies": {
  "marked": "^0.3.9"
}
import marked from "marked";

1.修改生成的HTML的方法

const renderer = new marked.Renderer();
//https://github.com/markedjs/marked/issues/655#issuecomment-383226346
const linkRenderer = renderer.link;
renderer.link = (href, title, text) => {
  const html = linkRenderer.call(renderer, href, title, text);
  return html.replace(/^<a /, '<a target="_blank" ');
};
const html = marked(markdown, { renderer });

Tips:marked参数配置

const renderer = new marked.Renderer();
//基本设置
marked.setOptions({
  renderer: renderer,
  gfm: true, //允许 Git Hub标准的markdown.
  tables: true, //允许支持表格语法(该选项要求 gfm 为true)
  breaks: true, //允许回车换行(该选项要求 gfm 为true)
  pedantic: false, //不纠正原始模型任何的不良行为和错误(默认为false)
  sanitize: false, //对输出进行过滤(清理),将忽略任何已经输入的html代码(标签)
  smartLists: true, //使用比原生markdown更时髦的列表
  smartypants: false //使用更为时髦的标点
});

ps:vue实现类似target="_blank"打开新窗口

//href的{}不能少
let {href} = this.$router.resolve({path:'/applySocSecCard'});
window.open(href, '_blank');

总结

以上所述是小编给大家介绍的Vue配置marked链接添加target="_blank"的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript执行顺序详细介绍
Dec 04 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 #Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 #Javascript
bootstrap Table实现合并相同行
Jul 19 #Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 #Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 #Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 #Javascript
bootstrap table插件动态加载表头
Jul 19 #Javascript
You might like
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php字符串截取的简单方法
2013/07/04 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
javascript三元运算符用法实例
2015/04/16 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python中format()函数的简单使用教程
2018/03/14 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
超简单的Python HTTP服务
2019/07/22 Python
英国儿童图书网站:Scholastic
2017/03/26 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
五一服装活动方案
2014/01/11 职场文书
供用电专业求职信
2014/07/07 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
人大代表选举标语
2014/10/07 职场文书
2016年感恩节寄语
2015/12/07 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
辞职申请书范本
2019/05/20 职场文书