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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
全面分析JavaScript 继承
May 30 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
关于vue属性使用和不使用冒号的区别说明
Oct 22 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php 函数中使用static的说明
2012/06/01 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP中的use关键字概述
2014/07/23 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
JS 毫秒转时间示例代码
2013/09/22 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python设计模式之MVC模式简单示例
2018/01/10 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
Python timeit模块原理及使用方法
2020/10/10 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
C语言基础笔试题
2013/04/27 面试题
.NET程序员的几道面试题
2012/06/01 面试题
仓库管理制度
2014/01/21 职场文书
总经理司机岗位职责
2014/02/06 职场文书
护理不良事件检讨书
2014/02/06 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年化验室工作总结
2014/11/21 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android