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 词法作用域和闭包分析说明
Aug 12 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 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/03 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
pandas按条件筛选数据的实现
2021/02/20 Python
为什么会有内存对齐
2016/10/10 面试题
晚宴邀请函范文
2014/01/15 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
陈欧广告词
2014/03/14 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
家长对老师的评语
2014/04/18 职场文书
档案信息化建设方案
2014/05/16 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
违章停车检讨书
2014/10/21 职场文书
导游词之河北邯郸
2019/09/12 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技