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优先加载笔记代码
Sep 30 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 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中处理模拟rewrite 效果
2006/12/09 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php利用事务处理转账问题
2015/04/22 PHP
php mysql 封装类实例代码
2016/09/18 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python通过线程实现定时器timer的方法
2015/03/16 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python图形用户接口实例详解
2019/12/16 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
《天安门广场》教学反思
2014/04/23 职场文书
写给医生的感谢信
2015/01/22 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
公司档案管理制度
2015/08/05 职场文书
股东出资协议书
2016/03/21 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书